bootstrap< Basic 13 > button Group

Original:bootstrap< Base 13 > button Group

Button groups allow multiple buttons to be stacked on the same line. This is especially useful when you want to align the buttons together. You can add optional JavaScript radio box and check box style behavior through the bootstrap button plugin.

The following table summarizes some of the important classes that BOOTSTRAP provides for using button groups:

Class	Description	code Example
. btn-group	This class is used to form a basic group of buttons. A series of buttons with Class . btn are placed in the . Btn-group .	<div class= "Btn-group" > <button type= "button" class= "btn Btn-default" >Button1</button> <button type= "button" class= "Btn Btn-default" >Button2</button></div>
. Btn-toolbar	This class helps to combine several sets of <div class= "Btn-group" > into a <div class= "Btn-toolbar" >, generally getting more complex components.	<div class= "Btn-toolbar" role= "Toolbar" > <div class= "Btn-group" >...</div> <div class= "Btn-group" >...</div></div>
. BTN-GROUP-LG,. Btn-group-sm,. Btn-group-xs	These classes can be applied to the sizing of the entire group of buttons, without resizing each button.	<div class= "Btn-group btn-group-lg" >...</div><div class= "Btn-group btn-group-sm" >...</div> <div class= "Btn-group btn-group-xs" >...</div>
. btn-group-vertical	This class allows a set of buttons to be stacked vertically, rather than stacked horizontally.	<div class= "btn-group-vertical" > ...</div>

Basic Group of buttons

The following example demonstrates the use of the class . Btn-group As discussed in the table above:

<! DOCTYPE html>
The results are as follows:
Button Toolbar
The following example demonstrates the use of the class . Btn-toolbar As discussed in the table above:
<! DOCTYPE html>
The results are as follows:
The size of the button
The following example demonstrates the use of the class . btn-group-* As discussed in the table above:
<! DOCTYPE html>
The results are as follows:
Nesting
You can nest another group of buttons in one button group, that is, a . Btn-group nested inside another . Btn-group . This is used when you use the drop-down menu in combination with a series of buttons.
<! DOCTYPE html>Data-toggle= "Dropdown" >The following<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" > <li><a href= " # "> Zip-up 1</a></li> <li><a href=" # "> Under Zipper 2</a></li> </ul> </div&gt ;</div></body>
The results are as follows:
Vertical Group of buttons
The following example demonstrates the use of the class . btn-group-vertical As discussed in the table above:
<! DOCTYPE html>Data-toggle= "Dropdown" >Drop down<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" > <li><a href= " # "> Zip-up 1</a></li> <li><a href=" # "> Under Zipper 2</a></li> </ul> </div&gt ;</div></body>
The results are as follows:
Series Articles:Bootstrap < Fundamentals > CSS Overview
bootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < fundamentals 21 > badges (Badges) Bootstrap < basic 22 > Oversized screen (Jumbotron) Bootstrap < basic 23 > page title Header) bootstrap< Basic 24 > Thumbnail Bootstrap < basic 25 > Warning (Alerts) Bootstrap < basic 26 > progress bar
bootstrap< Basic 13 > button Group