Bootstrap5 按钮组

Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建响应式、移动优先的网站和应用程序。Bootstrap5 是 Bootstrap 的最新版本，它带来了许多新的特性和改进。其中，按钮组（Button Group）是 Bootstrap5 中一个非常有用的组件，可以用来创建一系列相互关联的按钮。

按钮组概述

按钮组（Button Group）允许开发者将一组按钮并排显示，形成一个紧凑的按钮组。这使得用户可以轻松地在多个选项之间切换。按钮组可以应用于单行按钮或按钮下拉菜单。

创建按钮组

要创建一个按钮组，首先需要使用 <button-group> 元素。然后，将按钮元素（如 <button> 或 <a>）添加到 <button-group> 中。

HTML 示例

html 复制代码

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-secondary">Middle</button>
  <button type="button" class="btn btn-outline-success">Right</button>
</div>

CSS 示例

css 复制代码

.btn-group {
  margin: 15px;
}

在上述示例中，我们创建了一个包含三个按钮的按钮组。每个按钮都有不同的边框颜色，分别对应不同的主题。

按钮组样式

Bootstrap5 提供了多种按钮组样式，包括默认样式、垂直样式和工具栏样式。

默认样式

默认样式的按钮组是水平排列的，按钮之间有间隔。

垂直样式

垂直样式的按钮组是垂直排列的，按钮之间有间隔。

工具栏样式

工具栏样式的按钮组类似于工具栏，按钮紧挨在一起，没有间隔。

CSS 示例

html 复制代码

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <button type="button" class="btn btn-success">3</button>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-success">3</button>
  </div>
</div>

按钮组尺寸

Bootstrap5 提供了三种按钮组尺寸：默认尺寸、小尺寸和大尺寸。

默认尺寸

默认尺寸的按钮组是标准尺寸。

小尺寸

小尺寸的按钮组比默认尺寸小。

大尺寸

大尺寸的按钮组比默认尺寸大。

CSS 示例

html 复制代码

<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <button type="button" class="btn btn-success">3</button>
</div>

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <button type="button" class="btn btn-success">3</button>
</div>

按钮组间距

Bootstrap5 允许开发者自定义按钮组之间的间距。

CSS 示例

html 复制代码

<div class="btn-group btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <button type="button" class="btn btn-success">3</button>
</div>

按钮组嵌套

Bootstrap5 允许开发者将按钮组嵌套在其他按钮组中。

HTML 示例

html 复制代码

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

总结

Bootstrap5 的按钮组组件为开发者提供了强大的功能，可以轻松创建各种样式和尺寸的按钮组。通过灵活运用按钮组，可以提升网站或应用程序的用户体验。在开发过程中，建议开发者充分利用 Bootstrap5 的按钮组功能，为用户提供更好的交互体验。