Bootstrap5 按钮组 – BuildCodePro

Bootstrap 5 按钮组详解

编程小白也能看懂的超详细按钮组指南

简单易懂示例丰富实战演示

什么是按钮组？

按钮组就像按钮的”朋友圈”，把多个按钮放在一起形成一个小组。这样做有两个好处：

美化界面：让多个按钮看起来像是一个整体，更美观
组织功能：把相关的按钮放在一起，比如”保存”、”取消”、”删除”等操作

在Bootstrap 5中，使用.btn-group类就可以轻松创建按钮组。

1. 基础按钮组

最简单的按钮组，就像这样：

<div class="btn-group" role="group">
    <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" 是给屏幕阅读器用的，让视障用户知道这是一组按钮
所有按钮都要有 .btn 类，再加一个颜色类如 .btn-primary
按钮组容器使用 .btn-group 类

2. 按钮工具栏

当你有多组按钮时，可以把它们放进一个工具栏，就像Word里的工具栏一样：

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group me-2" role="group">
        <!-- 第一组按钮 -->
    </div>
    <div class="btn-group me-2" role="group">
        <!-- 第二组按钮 -->
    </div>
    <div class="btn-group" role="group">
        <!-- 第三组按钮 -->
    </div>
</div>

注意：

.btn-toolbar 是工具栏的容器
使用 .me-2 类给每个按钮组添加右边距
可以混合不同颜色、不同类型的按钮组

3. 按钮组尺寸

按钮组大小可以整体调整，就像穿衣服的S/M/L号：

小号按钮组 (.btn-group-sm)

默认尺寸

大号按钮组 (.btn-group-lg)

<!-- 小按钮组 -->
<div class="btn-group btn-group-sm">
    ...
</div>

<!-- 默认按钮组 -->
<div class="btn-group">
    ...
</div>

<!-- 大按钮组 -->
<div class="btn-group btn-group-lg">
    ...
</div>

你知道吗：

直接在.btn-group上添加尺寸类就能调整整个组的大小
尺寸类：.btn-group-sm（小）、.btn-group-lg（大）
没有尺寸类就是默认大小

4. 垂直按钮组

按钮也可以垂直排列，就像电梯按钮一样：

<div class="btn-group-vertical">
    <button class="btn btn-info">第一个</button>
    <button class="btn btn-info">第二个</button>
    <button class="btn btn-info">第三个</button>
</div>

使用场景：

侧边栏菜单
移动端有限空间
垂直排列更美观的场景
同样支持尺寸类(.btn-group-sm/.btn-group-lg)

5. 带下拉菜单的按钮组

按钮组中可以包含下拉菜单，就像”文件”菜单里的”新建”、”打开”等选项：

<div class="btn-group">
    <button class="btn btn-primary">主要操作</button>
    <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" 
            data-bs-toggle="dropdown">
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">选项一</a></li>
        <li><a class="dropdown-item" href="#">选项二</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">高级选项</a></li>
    </ul>
</div>

关键技术点：

.dropdown-toggle 类标识这是一个下拉触发器
.dropdown-toggle-split 类创建小箭头按钮
data-bs-toggle="dropdown" 是激活下拉的必备属性
下拉菜单使用 .dropdown-menu
选项使用 .dropdown-item

6. 单选和复选按钮组

按钮组可以模拟单选按钮（单选一）和复选框（多选）：

单选按钮组（只能选一个）

选项 1 选项 2 选项 3

复选框按钮组（可多选）

复选框 1 复选框 2 复选框 3

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

<!-- 复选框按钮组 -->
<div class="btn-group">
    <input type="checkbox" class="btn-check" id="check1">
    <label class="btn btn-outline-success" for="check1">复选框 1</label>
    
    <input type="checkbox" class="btn-check" id="check2">
    <label class="btn btn-outline-success" for="check2">复选框 2</label>
</div>

实现原理：

隐藏真正的 <input> 元素
使用 <label> 作为可见的按钮
通过 for 属性关联标签和输入框
单选按钮组所有选项要有相同的 name 属性

小结：按钮组使用要点

基础结构：使用 .btn-group 包裹多个 .btn
工具栏：多个按钮组用 .btn-toolbar 包裹
尺寸控制：添加 .btn-group-sm 或 .btn-group-lg
垂直布局：使用 .btn-group-vertical 替代 .btn-group
下拉菜单：结合 .dropdown-toggle 和 .dropdown-menu
单选/复选：巧妙使用隐藏的 <input> 和 <label>