Button group按钮组

~~Group a series of buttons together on a single line or stack them in a vertical column.~~将一系列按钮组合在一行上，或将它们堆叠在垂直列中。

~~On this page~~本页内容

Basic example基本示例

~~Wrap a series of buttons with .btn in .btn-group.~~在.btn-group中用.btn包装一系列按钮。

<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>

Ensure correct `role` and provide a label确保`role`正确并提供标签

~~In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided.~~ 为了让辅助技术（如屏幕阅读器）传达一系列按钮已分组，需要提供适当的角色属性。~~For button groups, this would be role="group", while toolbars should have a role="toolbar".~~对于按钮组，这将是role="group"，而工具栏应该有一个role="toolbar"。

~~In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute.~~ 此外，组和工具栏应该有一个明确的标签，因为大多数辅助技术不会公布它们，尽管存在正确的角色属性。~~In the examples provided here, we use aria-label, but alternatives such as aria-labelledby can also be used.~~在这里提供的示例中，我们使用aria-label，但也可以使用aria-labelledby等替代方法。

~~These classes can also be added to groups of links, as an alternative to the .nav navigation components.~~这些类也可以添加到链接组中，作为.nav导航组件的替代。

Active link Link Link

<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary">Link</a>
<a href="#" class="btn btn-primary">Link</a>
</div>

Mixed styles混合样式

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>

Outlined styles轮廓样式

<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>

Checkbox and radio button groups复选框和单选按钮组

~~Combine button-like checkbox and radio toggle buttons into a seamless looking button group.~~将类似按钮的复选框和单选切换按钮组合成一个外观无缝的按钮组。

Checkbox 1 Checkbox 2 Checkbox 3

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Radio 1 Radio 2 Radio 3

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

~~Combine sets of button groups into button toolbars for more complex components.~~ 将按钮组集合合并到按钮工具栏中，以获得更复杂的组件。~~Use utility classes as needed to space out groups, buttons, and more.~~根据需要使用实用程序类来分隔组、按钮等。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<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="Second group">
<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="Third group">
<button type="button" class="btn btn-info">8</button>
</div>
</div>

~~Feel free to mix input groups with button groups in your toolbars.~~ 在工具栏中随意混合输入组和按钮组。~~Similar to the example above, you’ll likely need some utilities though to space things properly.~~与上面的示例类似，您可能需要一些实用程序来正确地分配空间。

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<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="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<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="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>

Sizing尺寸

~~Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.~~不要将按钮大小类应用于组中的每个按钮，只需将.btn-group-*添加到每个.btn-group，包括嵌套多个组时的每个按钮。

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

Nesting嵌套

~~Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.~~如果希望下拉菜单与一系列按钮混合，请将.btn-group放置在另一个.btn-group中。

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<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">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>

Vertical variation垂直变化

~~Make a set of buttons appear vertically stacked rather than horizontally.~~ 使一组按钮垂直堆叠而不是水平排列。~~Split button dropdowns are not supported here.~~此处不支持拆分按钮下拉列表。