IESC - Button Groups

Button Groups

Categoría de nivel principal o raíz: Demo

Categoría: Bootstrap

Escrito por Super User

Creado: 09 Noviembre 2012

Visto: 619

Two basic options, along with two more specific variations.

Single button group

Wrap a series of buttons with .btn in .btn-group.

<divclass="btn-group">
<buttonclass="btn">1</button>
<buttonclass="btn">2</button>
<buttonclass="btn">3</button>
</div>

Multiple button groups

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

<divclass="btn-toolbar">
<divclass="btn-group">
 ...
</div>
</div>

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

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

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.