BootStrap Button Group Brief introduction

Learning button groups requires mastering the following classes.

BTN Btn-group Btn-toolbar btn-group-vertical and drop-down menu basic class Dropdown-toggle Dropdown-menu and attribute data-toggle= "dropdown";

1: Basic button group, just one btn-group is OK.

1 <spanclass= "Btn-group" >2     <Buttonclass= "Btn btn-primary">1111</Button>3     <Buttonclass= "Btn Btn-default">2222</Button>4     <Buttonclass= "Btn btn-info">3333</Button>5     <Buttonclass= "Btn Btn-default">4444</Button>6 </span>

Effect:

2: Category button group Add a Btn-toolbar class

1 <Divclass= "Btn-toolbar">2         <spanclass= "Btn-group" >3             <Buttonclass= "Btn btn-primary">1111</Button>4             <Buttonclass= "Btn Btn-default">2222</Button>5             <Buttonclass= "Btn btn-info">3333</Button>6             <Buttonclass= "Btn Btn-default">4444</Button>7         </span>8         <spanclass= "Btn-group" >9             <Buttonclass= "Btn btn-primary">1111</Button>Ten             <Buttonclass= "Btn Btn-default">2222</Button> One             <Buttonclass= "Btn btn-info">3333</Button> A             <Buttonclass= "Btn Btn-default">4444</Button> -         </span> -         <spanclass= "Btn-group" > the             <Buttonclass= "Btn btn-primary">1111</Button> -             <Buttonclass= "Btn Btn-default">2222</Button> -             <Buttonclass= "Btn btn-info">3333</Button> -             <Buttonclass= "Btn Btn-default">4444</Button> +         </span> - </Div>

Effect:

3: Nested grouping

First look at the effect:

Here we see that the last button clicked when a drop-down menu appeared, how is this done? In my original essay about a simple drop-down order, here, I summarize, as long as the drop-down menu, there are a few things necessary! The drop -down menu of the basic class Dropdown-toggle Dropdown-menu and Attributes data-toggle= "dropdown";

the small triangle in the figure is <span class= "caret" ></span> it and Nore. is located on a button.

Dropdown-menu: It was added to the UL.

Dropdown-toggle and Data-toggle are added to the parent element of UL.

Look at the code first:

1 <Divclass= "Btn-group">2             <Buttonclass= "Btn Btn-default">C#</Button>3             <Buttonclass= "Btn Btn-default">Javascript</Button>4             <Buttonclass= "Btn Btn-default">Bootstrap</Button>5             <Divclass= "Btn-group">6                 <Buttonclass= "btn btn-default dropdown-toggle"Data-toggle= "Dropdown">More ...<spanclass= "Caret"></span></Button>    7                 <ulclass= "Dropdown-menu">8                     <Li><ahref= "javascript:void (0)">Java</a></Li>9                     <Li><ahref= "javascript:void (0)">Php</a></Li>Ten                     <Li><ahref= "javascript:void (0)">Maven</a></Li> One                 </ul> A             </Div> +   </Div>

The last drop-down is a div wrapped with a button and UL consisting of one of the above-emphasized classes and attributes one cannot be less!

4: OK, we can now do a little more boring things, a button group, add a few more down the order can be.

Effect:

It's just a few copies of the code, but the effect is good!

Then we think, add a disable can, so, <li class= "disabled" ><a href= "javascript:void (0)" >java</a></li > the results are perfect!

5: Vertical grouping.

Now we meet all the horizontal, but often encounter the vertical button group to do?

Just replace the btn-group with the btn-group-vertical !

Effect:

Summary: Just these few still just bootstrap button group of bucket , continue to explain tomorrow!

BootStrap Button Group Brief introduction