Bootstrap5 按钮组

Bootstrap5按钮组

Bootstrap5是一款广受欢迎的前端框架。它提供了许多组件，其中之一是按钮组（Button Group）。按钮组使多个按钮排列在一起，更容易管理和视觉上更统一。

用法

使用按钮组，首先需要在页面中引入Bootstrap5的CSS文件和JavaScript文件。然后，创建一个容器元素，并在其中添加按钮元素，如下所示：

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

在这个例子中，我们创建了一个按钮组，其中有三个按钮排列在一起。这个按钮组使用了btn-group类，这是按钮组的基础类，用于将所有按钮组合在一起。按钮元素使用btn类，这是Bootstrap5中的标准按钮类。

按钮组添加了role=“group"和aria-label=“Basic example"属性，用于将它们与元素的作用联系起来，并提供了一个可访问的标签，以帮助屏幕阅读器用户理解按钮组的作用和意义。

按钮方向

Bootstrap5按钮组可以沿不同的方向排列，包括垂直和水平排列。要更改按钮组的方向，可以使用下列的类：

btn-group-vertical：垂直方向
btn-group-horizontal：水平方向（默认值）

使用这些类，可以在按钮组上添加所需的类，如下所示：

<div class="btn-group btn-group-vertical" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Top</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Bottom</button>
</div>

在这个例子中，我们使用了btn-group-vertical类，将按钮组的方向更改为垂直方向。这个按钮组现在在上，中和下位置显示三个按钮。

尺寸

Bootstrap5按钮组也可以改变尺寸，可以在按钮组上使用下列类：

btn-group-lg：大尺寸
btn-group-sm：小尺寸
btn-group-xs：超小尺寸

使用这些类，可以在按钮组上添加所需的类，如下所示：

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

在这个例子中，我们使用了btn-group-lg类，将按钮组的大小更改为大尺寸。这个按钮组现在显示为大号尺寸。

按钮风格

Bootstrap5还提供了不同的按钮风格，可以让按钮以不同的样式展现。可以使用下列类来更改按钮的风格：

btn-primary：原始按钮风格（蓝色）
btn-secondary：辅助按钮风格（灰色）
btn-success：成功按钮风格（绿色）
btn-danger：危险按钮风格（红色）
btn-warning：警告按钮风格（黄色）
btn-info：信息按钮风格（淡蓝色）
btn-light：浅色按钮风格（白色）
btn-dark：深色按钮风格（黑色）

使用这些类，可以在按钮上添加所需的类，如下所示：

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>
</div>

在这个例子中，我们展示了不同的按钮风格，使所有按钮分别以不同的颜色进行了设置。

结论

Bootstrap5的按钮组使多个按钮的排列更加整齐，更出色，避免了重复的样式代码，让开发人员专注于实现其设计目标。本文介绍了如何创建不同方向、大小、风格的按钮，使开发人员可以根据自己的需要选择适合他们的选项，并创建漂亮而一致的应用程序界面。

Bootstrap5 按钮 Bootstrap5 提示框