Bootstrap Tutorial Lesson Sixth: Various button combination styles

The bootstrap gives the button a rich set of styles, as well as a combination of styles that can be flexibly customized to suit different needs. In the fourth lesson, we introduced a set of buttons to add. Btn-group class, so that a group of buttons together into a small set of function buttons, this is very practical, interested can go to see. (Bootstrap tutorial Lesson four: Making a set of feature icon buttons)

This section is based on the fourth section to introduce more button combination styles.

If we have a couple of button combinations, we can use the. Btn-toolbar class to wrap these. Btn-group together, which makes up a collection of several sets of function buttons, with the following code examples:

<div class= "Btn-toolbar" > <div class= "Btn-group" > <button type= "button" class= " BTN Btn-default "> left </button> <button type=" button "class=" btn Btn-default "> Middle </button&gt
                ; <button type= "button" class= "Btn Btn-default" > Right </button> </div> <div class= " Btn-group "> <button type=" button "class=" Btn Btn-default "> left </button> <b Utton type= "button" class= "btn Btn-default" > Middle </button> <button type= "button" class= "Btn btn-d  Efault "> Right </button> </div> <div class=" Btn-group "> <button Type= "button" class= "Btn Btn-default" > left </button> <button type= "button" class= "Btn Btn-defaul
            T "> Middle </button> <button type=" button "class=" Btn Btn-default "> Right </button> </dIv> </div> 

Style effects:



If you want to control the size of a set of button icons, you can continue adding on the. Btn-group class on the. Btn-group-lg and so on, you can achieve:

. BTN-GROUP-LG Large
. BTN-GROUP-SM Small
. Btn-group-xs smaller

The code examples are as follows:

<div class= "Btn-toolbar" > <div class= "Btn-group btn-group-lg" > <button type= "bu Tton "class=" btn Btn-default "> left </button> <button type=" button "class=" btn Btn-default "> Middle & lt;/button> <button type= "button" class= "Btn Btn-default" > Right </button> </div&
            Gt <div class= "Btn-group btn-group-sm" > <button type= "button" class= "Btn Btn-default" > Left </butt on> <button type= "button" class= "btn Btn-default" > Middle </button> <button ty Pe= "button" class= "Btn Btn-default" > Right </button> </div> <div class= "Btn-group btn -group-xs "> <button type=" button "class=" Btn Btn-default "> left </button> <b Utton type= "button" class= "btn Btn-default" > Middle </button> <button type= "button" class= "Btn btn-d Efault "> Right </button> </div> </div> 

Screenshot of the effect:



You can add a drop-down menu group. Btn-group into another. Btn-group, implement the button combination function, code examples are as follows:

<div class= "Btn-group" >
            <button class= "btn btn-default" type= "button" >1</button>
            < Button class= "btn btn-default" type= "button" >2</button>
            <div class= "Btn-group" >
                <button class= "btn btn-default" data-toggle= "dropdown" > Drop-down menu <span class= "Caret" ></span></button>
                <ul class= "Dropdown-menu" >
                    <li><a href= "" > Dropdown 1</a></li>
                    <li><a href = "" > drop-down 2</a></li>
                </ul>
            </div>
        </div>

Style effects:


If you want to implement a vertical combination of button menu functions, you only need to change the outermost. Btn-group to. Btn-group-vertical, as shown in the code example:

<div class= "btn-group-vertical" > ...
           .
        </div>

The effect is as follows: