Bootstrap 5 按钮组教程

基础按钮组

将一系列按钮包装在.btn-group中，形成水平排列的按钮组。

基础按钮组示例

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

按钮工具栏

将多个按钮组组合成更复杂的工具栏，使用.btn-toolbar包装多个按钮组。

按钮工具栏示例

<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-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">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-secondary">8</button>
  </div>
</div>

按钮组尺寸

使用.btn-group-lg或.btn-group-sm类来调整整个按钮组的尺寸。

不同尺寸的按钮组

<!-- 大尺寸 -->
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <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="Default button group">
  <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 btn-group-sm" role="group" aria-label="Small button group">
  <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="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 type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">下拉链接 1</a></li>
      <li><a class="dropdown-item" href="#">下拉链接 2</a></li>
      <li><a class="dropdown-item" href="#">下拉链接 3</a></li>
    </ul>
  </div>
</div>

垂直按钮组

使用.btn-group-vertical类创建垂直排列的按钮组。

垂直按钮组示例

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-secondary">按钮</button>
  <button type="button" class="btn btn-secondary">按钮</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">下拉链接</a></li>
      <li><a class="dropdown-item" href="#">下拉链接</a></li>
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">按钮</button>
  <button type="button" class="btn btn-secondary">按钮</button>
</div>

轮廓按钮组

使用.btn-outline-*类创建轮廓样式的按钮组。

轮廓按钮组示例

<div class="btn-group" role="group" aria-label="Outline button group">
  <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>

复选框和单选框样式

使用按钮组样式来创建复选框和单选框的替代视觉样式。

复选框和单选框样式示例

复选框 1 复选框 2 复选框 3

单选框 1 单选框 2 单选框 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">复选框 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="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">单选框 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>

Bootstrap5教程

Bootstrap5 按钮组