Bootstrap中的Button Group组件可以帮助你将多个按钮组合在一起，从而创建更好的用户界面和体验。在本文中，我们将介绍如何使用Bootstrap中的Button Group组件。
创建Button Group
要创建一个Button Group，首先需要使用HTML代码定义一个div元素，并为其添加.btn-group类。然后，在这个div元素内添加一系列的button元素，每个button元素都需要添加.btn类。例如，下面的HTML代码定义了一个Button Group：
<div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">
<button type=\"button\" class=\"btn btn-secondary\">Left</button>
<button type=\"button\" class=\"btn btn-secondary\">Middle</button>
<button type=\"button\" class=\"btn btn-secondary\">Right</button>
</div>
这个Button Group显示了三个按钮。每个按钮都有一个.btn类，以及.btn-secondary类，这个类定义了按钮的样式。其中，role属性和aria-label属性用于添加语义化信息，方便读屏软件和辅助技术工具阅读。
Button Group的大小
Bootstrap中的Button Group组件默认大小为中等大小，即btn-group类。如果需要使用更小或更大的Button Group，可以使用.btn-group-sm类或.btn-group-lg类。例如：
<div class=\"btn-group btn-group-sm\" role=\"group\" aria-label=\"Small button group\">
<button type=\"button\" class=\"btn btn-secondary\">Left</button>
<button type=\"button\" class=\"btn btn-secondary\">Middle</button>
<button type=\"button\" class=\"btn btn-secondary\">Right</button>
</div>
这个Button Group使用了.btn-group-sm类，从而将Button Group的大小变为小型。
垂直Button Group
默认情况下，Bootstrap中的Button Group是水平排列的。如果需要将其变为垂直排列，可以使用.btn-group-vertical类。例如：
<div class=\"btn-group-vertical\" role=\"group\" aria-label=\"Vertical button group\">
<button type=\"button\" class=\"btn btn-secondary\">Top</button>
<button type=\"button\" class=\"btn btn-secondary\">Middle</button>
<button type=\"button\" class=\"btn btn-secondary\">Bottom</button>
</div>
这个Button Group使用了.btn-group-vertical类，从而将Button Group垂直排列。
含下拉菜单的Button Group
Button Group不仅可以包含多个按钮，还可以包含下拉菜单。下面的示例代码展示了一个含有下拉菜单的Button Group：
<div class=\"btn-group\" role=\"group\" aria-label=\"Button group with nested dropdown\">
<button type=\"button\" class=\"btn btn-secondary\">1</button>
<button type=\"button\" class=\"btn btn-secondary\">2</button>
<div class=\"btn-group\" role=\"group\">
<button id=\"btnGroupDrop1\" type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">
Dropdown
</button>
<div class=\"dropdown-menu\" aria-labelledby=\"btnGroupDrop1\">
<a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
<a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
</div>
</div>
</div>
这个Button Group中含有两个按钮和一个下拉菜单。下拉菜单的代码被封装在一个新的div元素中，并使用了.dropdown-menu类。dropdown-toggle类用于创建下拉菜单的触发器，data-toggle属性和aria-haspopup属性和aria-expanded属性用于指定下拉菜单的行为和状态。