引导程序4 | 按钮组

按钮组是一种非常实用的UI组件，用于在页面上显示一组按钮，通常用于表单提交、操作按钮等场景。引导程序4提供了一种简单且易于使用的按钮组组件，以下是介绍。

引入按钮组组件

在HTML页面中引入Bootstrap库和它的样式表文件，可以通过以下CDN或官方下载方式引入：

CDN

<!-- 引入Bootstrap核心库 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
  
<!-- 引入Bootstrap样式表 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">

下载

下载Bootstrap并在HTML页面中引入bootstrap.min.css和bootstrap.min.js文件。

创建按钮组

在HTML页面中创建按钮组非常简单，只需要使用 div 标签，将按钮放在其中即可。如下所示，创建一个包含3个按钮的按钮组：

<div class="btn-group" role="group" aria-label="Basic example">
  <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>

按钮组样式

按钮组默认样式是水平排列的，如果想要垂直排列，可以添加 btn-group-vertical 类。如下所示，创建一个垂直排列的按钮组：

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

尺寸大小

对于按钮组尺寸可以通过添加以下类实现：

• btn-group-sm：小号按钮组。
• btn-group-lg：大号按钮组。

如下所示，创建一个小号按钮组：

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

激活状态

在按钮组中可以激活某个按钮状态，通过添加 active 属性实现。如下所示，激活第二个按钮：

<div class="btn-group" role="group" aria-label="Button group with toggle">
  <button type="button" class="btn btn-primary">按钮1</button>
  <button type="button" class="btn btn-secondary active">按钮2</button>
  <button type="button" class="btn btn-success">按钮3</button>
</div>

结语

通过Bootstrap库中的按钮组组件可以实现多个按钮的排列和显示，对于表单提交、操作按钮等场景非常适用。特别注意组件中的角色及属性，同时可以根据样式表中提供的类来实现样式更改。