Bootstrap 按钮组

Bootstrap 5 按钮组

按钮组

Bootstrap 允许您将一系列按钮组合在一起，放在一个按钮组内的单独一行上。

视觉上看起来像这样：

Apple Samsung Sony (按钮内联显示)

使用带有 .btn-group 类的 <div> 元素来创建一个按钮组：

<html>
 <head>
   <!-- 确保已链接 Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group" role="group" aria-label="Basic example">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <!-- 如果使用下拉菜单或其他 JS 组件，确保已链接 Bootstrap JS bundle (文件包) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>

提示：与其将按钮尺寸类（例如 .btn-lg、.btn-sm）应用到组中的每个按钮上，不如将尺寸类（例如 .btn-group-lg 或 .btn-group-sm）添加到 .btn-group 容器本身，以控制其中所有按钮的尺寸。

<html>
 <head>
   <!-- 确保已链接 Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <button type="button" class="btn btn-primary">Sony</button>
  </div>
 </body>
</html>

垂直按钮组

Bootstrap 也支持垂直按钮组，将按钮堆叠在一起。

视觉上看起来像按钮垂直堆叠。

使用 .btn-group-vertical 类来创建一个垂直按钮组：

<html>
 <head>
   <!-- 确保已链接 Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <button type="button" class="btn btn-primary">Sony</button>
  </div>
 </body>
</html>

两端对齐按钮组（全宽）

较旧的 Bootstrap 版本中的 .btn-group-justified 类已在 Bootstrap 4 和 5 中移除。要使按钮组占据其父容器的全部宽度，您可以使用 flex 工具类。每个按钮或其包裹元素可以使其填充可用空间。

使用占据可用宽度的 <button> 元素的示例：

<html>
 <head>
   <!-- 确保已链接 Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group d-flex" role="group" aria-label="Justified button group example">
   <button type="button" class="btn btn-primary flex-fill">Apple</button>
   <button type="button" class="btn btn-primary flex-fill">Samsung</button>
   <button type="button" class="btn btn-primary flex-fill">Sony</button>
  </div>
 </body>
</html>

使用 <a> 元素的示例，其中每个 <a> 都包裹在一个占据空间的 .btn-group 中：

<html>
 <head>
   <!-- 确保已链接 Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="d-flex" aria-label="Justified link button group example">
   <div class="btn-group flex-fill" role="group">
    <a href="#" class="btn btn-primary">Apple</a>
   </div>
   <div class="btn-group flex-fill" role="group">
    <a href="#" class="btn btn-primary">Samsung</a>
   </div>
   <div class="btn-group flex-fill" role="group">
    <a href="#" class="btn btn-primary">Sony</a>
   </div>
  </div>
 </body>
</html>

嵌套按钮组与下拉菜单

您可以嵌套按钮组，在按钮组内部创建下拉菜单。确保包含 Bootstrap 的 JavaScript 文件（通常是 bundle 文件包），以实现下拉菜单功能。

视觉上：Apple | Samsung | Sony (下拉菜单) [平板电脑, 智能手机]

示例：

<html>
 <head>
   <!-- 确保已链接 Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
   <button type="button" class="btn btn-primary">Apple</button>
   <button type="button" class="btn btn-primary">Samsung</button>
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
     Sony
    </button>
    <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Tablet</a></li>
     <li><a class="dropdown-item" href="#">Smartphone</a></li>
    </ul>
   </div>
  </div>
  <!-- 确保已链接 Bootstrap JS bundle (文件包) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>

注意：data-bs-toggle="dropdown" 用于下拉菜单触发器，dropdown-item 类用于菜单中的链接。插入符号/箭头由 Bootstrap 5 CSS 自动添加。

分割按钮下拉菜单

分割按钮下拉菜单将按钮的功能操作与下拉菜单的触发器分开。

视觉上：Sony (按钮) | (下拉触发器) [平板电脑, 智能手机]

<html>
 <head>
   <!-- 确保已链接 Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="btn-group" role="group" aria-label="Split button dropdown example">
   <button type="button" class="btn btn-primary">Sony</button>
   <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Tablet</a></li>
    <li><a class="dropdown-item" href="#">Smartphone</a></li>
   </ul>
  </div>
  <!-- 确保已链接 Bootstrap JS bundle (文件包) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>

.dropdown-toggle-split 类为分割部分提供了适当的间距。.visually-hidden 用于触发部分的可访问性。