Bootstrap按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
基本示例
<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>
<button type="button" class="btn btn-default">百度</button>
<button type="button" class="btn btn-default">百度</button>
</div>按钮工具栏
把一组 div class=”btn-group” 组合进一个 div class=”btn-toolbar”中就可以做成更复杂的组件。
<div class="btn-toolbar">
<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>
<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-warning">腾讯</button>
<button type="button" class="btn btn-warning">腾讯</button>
<button type="button" class="btn btn-warning">腾讯</button>
<button type="button" class="btn btn-warning">腾讯</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">淘宝</button>
<button type="button" class="btn btn-success">淘宝</button>
<button type="button" class="btn btn-success">淘宝</button>
</div>
</div> 尺寸
只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">百度</button>
<button type="button" class="btn btn-default">百度</button>
<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>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-warning">腾讯</button>
<button type="button" class="btn btn-warning">腾讯</button>
<button type="button" class="btn btn-warning">腾讯</button>
<button type="button" class="btn btn-warning">腾讯</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-success">淘宝</button>
<button type="button" class="btn btn-success">淘宝</button>
<button type="button" class="btn btn-success">淘宝</button>
</div>
</div> 嵌套
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。
<div class="btn-group">
<button type="button" class="btn btn-success">湖南</button>
<button type="button" class="btn btn-warning">江西</button>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-toggle="dropdown">
广东
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">广州</a></li>
<li><a href="">深圳</a></li>
<li><a href="">东莞</a></li>
</ul>
</div>
</div>
PS：上图中样式不是非常和谐统一，“湖南”按钮两边有圆角处理，而“广东”按钮为直角了；为了解决这个问题，在广东的button里面加入class=”dropdown-toggle”，这样就完美了；
<div class="btn-group">
<button type="button" class="btn btn-success">湖南</button>
<button type="button" class="btn btn-warning">江西</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
广东
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">广州</a></li>
<li><a href="">深圳</a></li>
<li><a href="">东莞</a></li>
</ul>
</div>
</div>垂直排列
让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。class=”btn-group-vertical”
<div class="btn-group-vertical">
<button type="button" class="btn btn-success">湖南</button>
<button type="button" class="btn btn-warning">江西</button>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-toggle="dropdown">
广东
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">广州</a></li>
<li><a href="">深圳</a></li>
<li><a href="">东莞</a></li>
</ul>
</div>
</div> 两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。class=”btn-group btn-group-justified”
