.btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical
容器内的按钮，可以使用button元素，也可以使用a元素，产生的效果是一样的。
容器的多个分组以table风格进行显示，每组之间保持5px的left margin
//源码
.btn-toolbar:before,
.btn-toolbar:after{
display:table;
content:" ";
}
.btn-toolbar:after{
Bootstrap中的按钮组(`btn-group`)是CSS组件之一，它允许你将多个按钮组合在一起，创建出功能丰富的用户界面。按钮组提供了多种布局和尺寸选项，能够适应不同的设计需求。
`.btn-toolbar` 是一个用于组合多个`btn-group`的容器，它帮助你组织和对齐这些按钮组。当你需要在页面上放置一组相关的按钮时，`btn-toolbar`是一个很好的选择。它通过CSS样式确保了按钮组之间的间距，使得整体布局更加整洁。
`.btn-group` 类是创建按钮组的基础。你可以通过添加 `btn-group-lg`, `btn-group-sm`, 或 `btn-group-xs` 类来调整按钮组的尺寸，分别对应大、小和超小尺寸的按钮。这使得按钮组可以在不同的设备和屏幕尺寸下保持良好的可读性和可用性。
在`.btn-group`容器内，可以使用`<button>`元素或`<a>`元素创建按钮，两者产生的视觉效果是相同的。这样做的好处是，你可以根据功能需求选择更适合的元素类型。例如，如果需要可点击链接的行为，使用`<a>`元素更为合适。
按钮组的CSS实现利用了表格的布局方式，通过`display: table`和`float: left`属性将按钮分组并排列。`.btn-toolbar:before`和`.btn-toolbar:after`的选择器用于清除浮动，以防止内容溢出问题。`.btn-toolbar`类的样式设置了负的左侧外边距(`margin-left: -5px`)，然后通过内部的按钮元素(`.btn`, `.btn-group`, `.input-group`)设置正的左侧外边距(`margin-left: 5px`)，实现了按钮组间的5像素间隔。
示例代码展示了不同尺寸的按钮组，包括普通、嵌套和垂直排列的按钮组。嵌套按钮组可以通过在需要嵌套的`dropdown`下拉菜单外包裹一个带有`btn-group`样式的`div`来实现。注意，在下拉菜单的父容器`div`上不应设置`dropup`或`dropdown`类，而是应该将其应用到包含按钮的子`div`上。
在实际应用中，Bootstrap的按钮组可以与下拉菜单、输入框等其他组件结合，创建复杂的交互式界面，如导航栏、工具栏或者表单操作区。此外，按钮组还可以配合响应式设计，自适应不同的设备屏幕大小，提供一致的用户体验。
Bootstrap的按钮组(`btn-group`)是构建用户界面的强大工具，它提供了灵活的布局和尺寸控制，易于实现各种按钮组合效果，同时保持了良好的视觉一致性。理解和熟练使用按钮组可以帮助开发者更高效地创建美观且功能丰富的Web应用。
