Bootstrap Button Group

Button groups allow multiple buttons to be stacked on the same row. This is useful when you want to align buttons together. You can add optional JavaScript radio and checkbox style behavior via the Bootstrap Button plugin.

The following table summarizes some of the important classes provided by Bootstrap for using button groups:

Class	illustrate
.btn-group	This class is used to form a basic button group. Place a series of buttons with class .btn in .btn-group.
.btn-toolbar	This class helps to combine several groups into one, generally used in more complex components.
.btn-group-lg, .btn-group-sm, .btn-group-xs	These classes can be applied to the sizing of the entire button group, rather than needing to resize each button.
.btn-group-vertical	This class causes a group of buttons to be stacked vertically instead of horizontally.

1 Basic button set

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

<div class="btn-group">
    <button type="button" class="btn btn-default">新增</button>
    <button type="button" class="btn btn-default">删除</button>
    <button type="button" class="btn btn-default">导出</button>
</div>

2 Button Toolbar

The following example demonstrates the use of the class .btn-toolbar discussed in the table above:

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">新增</button>
        <button type="button" class="btn btn-default">删除</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">导入</button>
        <button type="button" class="btn btn-default">导出</button>
    </div>
</div

3 button size

The following example demonstrates the use of the class .btn-toolbar discussed in the table above:

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">新增</button>
    <button type="button" class="btn btn-default">删除</button>
</div>
<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">新增</button>
    <button type="button" class="btn btn-default">删除</button>
</div>
<div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">新增</button>
    <button type="button" class="btn btn-default">删除</button>
</div>

4 Nested

You can nest a button group within another button group, that is, a .btn-group within another .btn-group. This is used when you want to use a dropdown menu in combination with a series of buttons.

<div class="btn-group">
    <button type="button" class="btn btn-default">新增</button>
    <button type="button" class="btn btn-default">删除</button>
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle"
                data-toggle="dropdown">更多<span class="caret"></span> </button>
        <ul class="dropdown-menu">
            <li><a href="#">导入</a> </li>
            <li><a href="#">导出</a> </li>
        </ul>
    </div>
</div>

5 Vertical Button Groups

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

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