Bootstrap 5 | 按钮组

按钮组是 Bootstrap UI 库中常见组件之一，它为我们提供了在一个组内排列一组按钮的便捷方式。按钮组可以用于收集用户反馈，例如提交表单或执行明确的动作。

在 Bootstrap 5 中，按钮组的使用方法和 Bootstrap 4 中基本一致，但是会有一些细微的变化。在本文中，我们将介绍 Bootstrap 5 的按钮组和如何使用它们。

使用方式

Bootstrap 5 中的按钮组通过 btn-group 类可以创建。我们可以将多个按钮包裹在这个类下作为一个组。例如：

<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-secondary">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

在这个示例中，我们包装了三个按钮，并将其放在一个带有 btn-group 类的 div 元素内。这个 div 元素的 role 属性的值设为 group，我们还为其添加了一个 aria-label 属性，用于提供语音提示（screen readers）。

按钮组样式

Buttons 组件提供了几个不同的样式类，它们可以用于更改按钮组的外观和触感。下面是 Bootstrap 5 中使用的几个类：

• btn-group

这个类是使用按钮组的主要类。它可以用来创建单行、块级和嵌套按钮组。

• btn-group-vertical

使用这个类可以将按钮组垂直排列。

• btn-group-toggle

如果您需要创建一个单选按钮组，则可以使用此类。它允许用户在一组已选择按钮中仅选择一个。

• btn-toolbar

如果您需要组合多个按钮组，您可以使用这个类来创建一个工具栏。

我们可以通过在按钮组容器上使用这些类来自定义样式。例如：

<!-- Single row button group -->
<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-secondary">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

<!-- Vertical button group -->
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">One</button>
  <button type="button" class="btn btn-secondary">Two</button>
  <button type="button" class="btn btn-success">Three</button>
</div>

<!-- Button group toggle -->
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

<!-- Button toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-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 mr-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>

参考

• Bootstrap 5 Buttons
• Bootstrap 5 Button group

以上是 Bootstrap 5 中按钮组的介绍，它们非常适合在网站或应用程序中创建交互式表单元素。通过合理地使用按钮组样式，构建出一个吸引人的用户界面。