按钮组
将一系列按钮组合在一行上或将它们堆叠在垂直列中。
基本示例
在 .btn-group 中用 .btn 包裹一系列按钮。
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">左</button>
<button type="button" class="btn btn-primary">中</button>
<button type="button" class="btn btn-primary">右</button>
</div>
确保角色正确并提供标签
为了让辅助技术（例如屏幕阅读器）传达一系列按钮被分组的意思，需要提供适当的角色属性。对于按钮组，这将是 role="group"，而工具栏应该有一个 role="toolbar"。
此外，组和工具栏应该被赋予明确的标签，因为大多数辅助技术不会公布它们，尽管存在正确的角色属性。在此处提供的示例中，我们使用 aria-label，但也可以使用 aria-labelledby 等替代方法。
这些类也可以添加到链接组中，作为 .nav 导航组件的替代方案。
<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">选中的链接</a>
<a href="#" class="btn btn-primary">链接</a>
<a href="#" class="btn btn-primary">链接</a>
</div>
混合风格
<div class="btn-group" role="group" aria-label="基本混合样式示例">
<button type="button" class="btn btn-danger">左</button>
<button type="button" class="btn btn-warning">中</button>
<button type="button" class="btn btn-success">右</button>
</div>
轮廓样式
<div class="btn-group" role="group" aria-label="基本边框样式示例">
<button type="button" class="btn btn-outline-primary">左</button>
<button type="button" class="btn btn-outline-primary">中</button>
<button type="button" class="btn btn-outline-primary">右</button>
</div>
复选框和单选按钮组
将类似按钮的复选框和单选切换按钮组合成一个外观无缝的按钮组。
<div class="btn-group" role="group" aria-label="基本复选框切换按钮组">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">复选框 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">复选框 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">复选框 3</label>
</div>
<div class="btn-group" role="group" aria-label="基本单选切换按钮组">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">单选框 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">单选框 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">单选框 3</label>
</div>
按钮工具栏
将多组按钮组组合成按钮工具栏以实现更复杂的组件。根据需要使用实用程序类来分隔组、按钮等。
<div class="btn-toolbar" role="toolbar" aria-label="带有按钮组的工具栏">
<div class="btn-group me-2" role="group" aria-label="第一组">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="第二组">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="第三组">
<button type="button" class="btn btn-info">8</button>
</div>
</div>
随意将输入组与工具栏中的按钮组混合。与上面的示例类似，您可能需要一些实用程序来正确分隔事物。
<div class="btn-toolbar mb-3" role="toolbar" aria-label="带有按钮组的工具栏">
<div class="btn-group me-2" role="group" aria-label="第一组">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="输入组示例" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="带有按钮组的工具栏">
<div class="btn-group" role="group" aria-label="第一组">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon2">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="输入组示例" aria-describedby="btnGroupAddon2">
</div>
</div>
尺寸
无需将按钮大小调整类应用于组中的每个按钮，只需将 .btn-group-* 添加到每个 .btn-group，包括嵌套多个组时的每个按钮。
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-dark">左</button>
<button type="button" class="btn btn-outline-dark">中</button>
<button type="button" class="btn btn-outline-dark">右</button>
</div>
<div class="btn-group" role="group" aria-label="Default button group">
<button type="button" class="btn btn-outline-dark">左</button>
<button type="button" class="btn btn-outline-dark">中</button>
<button type="button" class="btn btn-outline-dark">右</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-outline-dark">左</button>
<button type="button" class="btn btn-outline-dark">中</button>
<button type="button" class="btn btn-outline-dark">右</button>
</div>
嵌套
当您希望下拉菜单与一系列按钮混合时，将 .btn-group 放置在另一个 .btn-group 中。
<div class="btn-group" role="group" aria-label="带有嵌套下拉菜单的按钮组">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
下拉
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">下拉链接</a></li>
<li><a class="dropdown-item" href="#">下拉链接</a></li>
</ul>
</div>
</div>
垂直变化
使一组按钮显示为垂直堆叠而不是水平堆叠。此处不支持拆分按钮下拉菜单。
<div class="btn-group-vertical">
...
</div>