作者:
WangMin
格言:努力做好自己喜欢的每一件事
通过按钮组容器（.btn-group）把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
注意：
- 按钮组中的工具提示和弹出框需要特别的设置。当为
.btn-group中的元素应用工具提示或弹出框时，必须指定container: 'body'选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。 - 确保设置正确的
role属性并提供一个 label 标签。为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组，需要提供一个合适的role属性。对于按钮组合，应该是role="group"，对于toolbar（工具栏）应该是role="toolbar"。 - 此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的
role属性，但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中，我们使用aria-label，但是，aria-labelledby也可以使用。
基本实例
在.btn组中用.btn包装一系列按钮。
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
按钮工具栏
我们常常会看到将多个按钮组合在一起使用，那么把一组<div class="btn-group">组合进一个<div class="btn-toolbar">中就可以做成按钮组。
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">one</button>
</div>
</div>
尺寸（按钮组大小）
只要给.btn-group加上.btn-group-*类，就省去为按钮组中的每个按钮都添加尺寸类了，如果包含了多个按钮组时也适用。按钮组的大小，我们也可以通过以下方法：
.btn-group-lg:大按钮组
.btn-group-sm:小按钮组
.btn-group-xs:超小按钮组
只需要在.btn-group类名上追加对应的类名，就可以得到不同大小的按钮组。
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
下拉菜单组嵌套
想要把下拉菜单混合到一系列按钮中，只须把.btn-group放入另一个.btn-group中。
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="##">link</a></li>
<li><a href="##">link</a></li>
</ul>
</div>
</div>
下拉菜单垂直排列
让一组按钮垂直堆叠排列显示而不是水平排列。在按钮组添加类 .btn-group-vertical
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="##">link</a></li>
<li><a href="##">link</a></li>
</ul>
</div>
</div>
两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。
注意 ：
- 关于边框的处理。由于对两端对齐的按钮组使用了特定的 HTML 和 CSS （即
display: table-cell），两个按钮之间的边框叠加在了一起。 - IE8 和边框。 IE8不支持在两端对齐的按钮组中绘制边框，无论是
<a>或<button>元素。为了兼容IE8，把每个按钮放入另一个.btn-group中即可。
（1） 关于<a>元素
只须将一系列.btn元素包裹到.btn-group.btn-group-justified中即可。
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<a type="button" class="btn btn-default">Left</a>
<a type="button" class="btn btn-default">Middle</a>
<a type="button" class="btn btn-default">Right</a>
</div>
如果 a 元素用作按钮在页面功能中触发，而不是链接到其他页面中去，还要给它们添加属性role=“button”。
（2） 关于<button>元素
为了将<button>元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Milddle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
它的页面效果和 a 元素展示的效果一样。
就先分享到这里!! :smile: 后续继续更新!!
