Bootstrap 按钮组

原创于 2025-10-12 09:44:50 发布 · 590 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html

前端同时被 3 个专栏收录

132 篇文章

订阅专栏

html

40 篇文章

订阅专栏

bootstrap

15 篇文章

订阅专栏

Bootstrap 的按钮组（Button Group）是其组件库中的一个功能模块，用于将多个按钮组合在一起，形成水平或垂直排列的按钮集合，常用于工具栏、导航或选项选择等场景。按钮组结合了 Bootstrap 的按钮样式和响应式特性，支持灵活的布局和交互功能。以下是对 Bootstrap 按钮组的中文讲解，涵盖核心功能、类名、用法和示例，基于最新版本 Bootstrap 5.3.3（截至 2025 年 10 月 11 日）。

Bootstrap 按钮组示例

<!-- 基本按钮组 -->
<h4>基本按钮组</h4>
<div class="btn-group" role="group" aria-label="基本按钮组">
  <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>

<!-- 不同尺寸 -->
<h4>不同尺寸</h4>
<div class="btn-group btn-group-lg" role="group" aria-label="大按钮组">
  <button type="button" class="btn btn-secondary">大 1</button>
  <button type="button" class="btn btn-secondary">大 2</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="小按钮组">
  <button type="button" class="btn btn-secondary">小 1</button>
  <button type="button" class="btn btn-secondary">小 2</button>
</div>

<!-- 垂直按钮组 -->
<h4>垂直按钮组</h4>
<div class="btn-group-vertical" role="group" aria-label="垂直按钮组">
  <button type="button" class="btn btn-success">上</button>
  <button type="button" class="btn btn-success">中</button>
  <button type="button" class="btn btn-success">下</button>
</div>

<!-- 按钮工具栏 -->
<h4>按钮工具栏</h4>
<div class="btn-toolbar" role="toolbar" aria-label="工具栏">
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-info">3</button>
  </div>
</div>

<!-- 单选按钮组 -->
<h4>单选按钮组</h4>
<div class="btn-group" role="group" aria-label="单选按钮组">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off">
  <label class="btn btn-outline-primary" for="option1">选项 1</label>
  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
  <label class="btn btn-outline-primary" for="option2">选项 2</label>
</div>

<!-- 嵌套下拉菜单 -->
<h4>嵌套下拉菜单</h4>
<div class="btn-group" role="group" aria-label="嵌套下拉">
  <button type="button" class="btn btn-primary">按钮</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      下拉
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">选项 1</a></li>
      <li><a class="dropdown-item" href="#">选项 2</a></li>
    </ul>
  </div>
</div>

1. Bootstrap 按钮组概述

Bootstrap 的按钮组通过将多个按钮组合在一个容器中，提供统一的样式和行为。其主要特点包括：

紧凑布局：按钮无缝连接，去除外边距，适合工具栏或选项组。
灵活性：支持水平或垂直排列，可嵌套下拉菜单。
交互性：支持单选或复选行为，结合 JavaScript 实现动态功能。
响应式：与网格系统和响应式工具类结合，适配不同设备。
可访问性：通过 ARIA 属性确保屏幕阅读器支持。

按钮组通常使用 <div> 容器（或 <nav>）结合 .btn-group 类实现。

2. 核心按钮组类

以下是Bootstrap 按钮组的主要类和用法：

(1) 基本按钮组

使用 .btn-group 将多个按钮组合成水平排列，按钮之间无缝连接。

用法：

<div class="btn-group" role="group" aria-label="基本按钮组">
  <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>

必要属性：
- role="group"：定义按钮组的角色。
- aria-label：为屏幕阅读器提供描述。

(2) 垂直按钮组

使用 .btn-group-vertical 将按钮垂直排列。

用法：

<div class="btn-group-vertical" role="group" aria-label="垂直按钮组">
  <button type="button" class="btn btn-success">上</button>
  <button type="button" class="btn btn-success">中</button>
  <button type="button" class="btn btn-success">下</button>
</div>

(3) 按钮工具栏

使用 .btn-toolbar 组合多个按钮组，形成复杂工具栏。

用法：

<div class="btn-toolbar" role="toolbar" aria-label="工具栏">
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-info">3</button>
  </div>
</div>

注意：.me-2 添加组间距。

(4) 按钮尺寸

调整按钮组的尺寸：

.btn-group-lg：大按钮组。
.btn-group-sm：小按钮组。
默认尺寸：无额外类。

用法：

<div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-secondary">大 1</button>
  <button type="button" class="btn btn-secondary">大 2</button>
</div>

(5) 单选和复选按钮组

使用 .btn-check 和 <input type="radio"> 或 <input type="checkbox"> 实现单选或复选行为。

单选按钮组：

<div class="btn-group" role="group" aria-label="单选按钮组">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="option1">选项 1</label>
  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
  <label class="btn btn-outline-primary" for="option2">选项 2</label>
</div>

复选按钮组：

<div class="btn-group" role="group" aria-label="复选按钮组">
  <input type="checkbox" class="btn-check" id="check1" autocomplete="off">
  <label class="btn btn-outline-primary" for="check1">复选 1</label>
  <input type="checkbox" class="btn-check" id="check2" autocomplete="off">
  <label class="btn btn-outline-primary" for="check2">复选 2</label>
</div>

(6) 嵌套下拉菜单

在按钮组中嵌套下拉菜单，结合 .dropdown 和 .dropdown-menu。

用法：

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">按钮</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      下拉
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">选项 1</a></li>
      <li><a class="dropdown-item" href="#">选项 2</a></li>
    </ul>
  </div>
</div>

(7) 响应式按钮组

结合响应式工具类调整按钮组在不同屏幕尺寸下的行为。

示例：

<div class="btn-group d-flex flex-column flex-md-row" role="group">
  <button type="button" class="btn btn-primary">按钮 1</button>
  <button type="button" class="btn btn-primary">按钮 2</button>
</div>

3. JavaScript 行为

按钮组的交互功能（如单选、复选或下拉）依赖 bootstrap.bundle.min.js（包含 Popper.js）。

动态激活：

const btnChecks = document.querySelectorAll('.btn-check');
btnChecks.forEach(btn => {
  btn.addEventListener('change', () => {
    console.log(`${btn.id} 被选中`);
  });
});

4. 定制按钮组

Bootstrap 的按钮组样式基于 Sass 变量，可通过以下方式定制：

颜色：$btn-group-bg、$btn-group-border-color。
边框：$btn-group-border-width、$btn-group-border-radius。
间距：$btn-group-gap。

定制示例：

// custom.scss
$primary: #ff5733;
$btn-group-border-radius: 0.5rem;

@import "node_modules/bootstrap/scss/bootstrap";

编译后引入：

<link href="custom.css" rel="stylesheet">

5. 注意事项

JavaScript 依赖：单选、复选或下拉功能需引入 bootstrap.bundle.min.js。
可访问性：确保使用 role="group" 和 aria-label 提供语义化支持。
响应式布局：测试按钮组在小屏幕上的排列，确保用户体验。
性能：避免过多嵌套（如多级下拉菜单），保持 DOM 简洁。
样式冲突：注意按钮组与其他组件（如导航栏）结合时的样式优先级。

6. 学习资源

官方文档：https://getbootstrap.com/docs/5.3/components/button-group/
中文教程：https://www.bootcss.com/（非官方）
X 平台：搜索“Bootstrap 按钮组”或“Bootstrap Button Group”，查看社区分享的设计技巧。

如果你需要更详细的按钮组讲解（例如动态交互、多级嵌套）或实现特定效果的代码，请告诉我，我可以提供进一步的指导或示例！