Bootstrap 5 按钮组

原创于 2024-12-21 06:13:03 发布 · 334 阅读

CC 4.0 BY-SA版权

文章标签：

Bootstrap 5 按钮组

Bootstrap 5 是一个流行的前端框架，它提供了许多组件和插件，用于快速设计和开发响应式网站。按钮组是 Bootstrap 5 中的一个重要组件，它允许您将多个按钮组合在一起，以创建更复杂的界面元素。在本文中，我们将详细介绍 Bootstrap 5 按钮组的用法、样式和自定义选项。

按钮组的基本用法

在 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 和 btn-primary 类，这是 Bootstrap 5 中按钮的基本样式。

按钮组的尺寸

Bootstrap 5 提供了四种按钮尺寸：小 (btn-sm)、默认、大 (btn-lg) 和超大型 (btn-xl)。您可以通过将这些尺寸类应用到按钮组中的每个按钮上来调整按钮组的尺寸。以下是一个示例：

<div class="btn-group" role="group" aria-label="Button group with different sizes">
  <button type="button" class="btn btn-primary btn-sm">小</button>
  <button type="button" class="btn btn-primary">默认</button>
  <button type="button" class="btn btn-primary btn-lg">大</button>
  <button type="button" class="btn btn-primary btn-xl">超大</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-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>

在这个示例中，我们创建了一个包含三个按钮组的工具栏。每个按钮组之间使用 me-2 类来添加一些间距。

按钮组的嵌套

您可以在一个按钮组中嵌套另一个按钮组，以创建更复杂的界面元素。以下是一个示例：

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

在这个示例中，我们创建了一个包含两个按钮和一个下拉菜单的按钮组。下拉菜单是通过在按钮组中嵌套另一个按钮组来实现的。