按钮组

将一系列按钮组合在一行上或将它们堆叠在垂直列中。

基本示例

.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>