Bootstrap 按钮组

概述

Bootstrap 按钮组允许将一系列按钮组合在一起，形成一个单一的组件。按钮组提供了工具栏的功能，可以用于创建复杂的组件。

基本按钮组

使用 .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>

按钮工具栏

将按钮组组合成按钮工具栏，以获得更复杂的组件：

<div class="btn-toolbar" role="toolbar" aria-label="带有按钮组的工具栏">
    <div class="btn-group me-2" role="group" aria-label="第一组">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-primary">3</button>
        <button type="button" class="btn btn-primary">4</button>
    </div>
    <div class="btn-group me-2" role="group" aria-label="第二组">
        <button type="button" class="btn btn-secondary">5</button>
        <button type="button" class="btn btn-secondary">6</button>
        <button type="button" class="btn btn-secondary">7</button>
    </div>
    <div class="btn-group" role="group" aria-label="第三组">
        <button type="button" class="btn btn-info">8</button>
    </div>
</div>

按钮组大小

使用 .btn-group-lg 或 .btn-group-sm 来调整按钮组的大小：

<!-- 大按钮组 -->
<div class="btn-group btn-group-lg" 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>

<!-- 默认大小 -->
<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>

<!-- 小按钮组 -->
<div class="btn-group btn-group-sm" 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>

嵌套下拉菜单

在按钮组中嵌套下拉菜单：

<div class="btn-group" role="group" aria-label="带下拉菜单的按钮组">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</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="#">下拉链接</a></li>
            <li><a class="dropdown-item" href="#">下拉链接</a></li>
        </ul>
    </div>
</div>

垂直按钮组

使用 .btn-group-vertical 创建垂直的按钮组：

<div class="btn-group-vertical" 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>
    <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>

单选按钮组

创建单选按钮组，只能选择一个选项：

<div class="btn-group" role="group" aria-label="基本单选切换按钮组">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="btnradio1">单选 1</label>
    
    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio2">单选 2</label>
    
    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio3">单选 3</label>
</div>

复选框按钮组

创建复选框按钮组，可以选择多个选项：

<div class="btn-group" role="group" aria-label="基本复选框切换按钮组">
    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck1">复选框 1</label>
    
    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck2">复选框 2</label>
    
    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck3">复选框 3</label>
</div>

实际示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 按钮组示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 按钮组示例</h1>
        
        <!-- 基本按钮组 -->
        <h2>基本按钮组</h2>
        <div class="mb-4">
            <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>
        </div>
        
        <!-- 不同样式的按钮组 -->
        <h2>不同样式的按钮组</h2>
        <div class="mb-4">
            <div class="btn-group mb-2" role="group">
                <button type="button" class="btn btn-outline-primary">左</button>
                <button type="button" class="btn btn-outline-primary">中</button>
                <button type="button" class="btn btn-outline-primary">右</button>
            </div>
            <br>
            <div class="btn-group mb-2" role="group">
                <button type="button" class="btn btn-success">成功</button>
                <button type="button" class="btn btn-warning">警告</button>
                <button type="button" class="btn btn-danger">危险</button>
            </div>
        </div>
        
        <!-- 按钮工具栏 -->
        <h2>按钮工具栏</h2>
        <div class="mb-4">
            <div class="btn-toolbar" role="toolbar" aria-label="编辑器工具栏">
                <div class="btn-group me-2" role="group" aria-label="文本格式">
                    <button type="button" class="btn btn-outline-secondary">
                        <strong>B</strong>
                    </button>
                    <button type="button" class="btn btn-outline-secondary">
                        <em>I</em>
                    </button>
                    <button type="button" class="btn btn-outline-secondary">
                        <u>U</u>
                    </button>
                </div>
                <div class="btn-group me-2" role="group" aria-label="对齐">
                    <button type="button" class="btn btn-outline-secondary">左对齐</button>
                    <button type="button" class="btn btn-outline-secondary">居中</button>
                    <button type="button" class="btn btn-outline-secondary">右对齐</button>
                </div>
                <div class="btn-group" role="group" aria-label="操作">
                    <button type="button" class="btn btn-outline-secondary">撤销</button>
                    <button type="button" class="btn btn-outline-secondary">重做</button>
                </div>
            </div>
        </div>
        
        <!-- 按钮组大小 -->
        <h2>按钮组大小</h2>
        <div class="mb-4">
            <div class="btn-group btn-group-lg mb-2" 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>
            <br>
            <div class="btn-group mb-2" 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>
            <br>
            <div class="btn-group btn-group-sm" 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>
        </div>
        
        <!-- 带下拉菜单的按钮组 -->
        <h2>带下拉菜单的按钮组</h2>
        <div class="mb-4">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary">操作</button>
                <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">
                        更多选项
                    </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>
            </div>
        </div>
        
        <!-- 垂直按钮组 -->
        <h2>垂直按钮组</h2>
        <div class="mb-4">
            <div class="row">
                <div class="col-md-3">
                    <div class="btn-group-vertical" 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>
                        <button type="button" class="btn btn-primary">关于我们</button>
                        <button type="button" class="btn btn-primary">联系我们</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 单选按钮组 -->
        <h2>单选按钮组</h2>
        <div class="mb-4">
            <div class="btn-group" role="group" aria-label="视图选择">
                <input type="radio" class="btn-check" name="viewOptions" id="listView" autocomplete="off" checked>
                <label class="btn btn-outline-primary" for="listView">列表视图</label>
                
                <input type="radio" class="btn-check" name="viewOptions" id="gridView" autocomplete="off">
                <label class="btn btn-outline-primary" for="gridView">网格视图</label>
                
                <input type="radio" class="btn-check" name="viewOptions" id="cardView" autocomplete="off">
                <label class="btn btn-outline-primary" for="cardView">卡片视图</label>
            </div>
        </div>
        
        <!-- 复选框按钮组 -->
        <h2>复选框按钮组</h2>
        <div class="mb-4">
            <div class="btn-group" role="group" aria-label="功能选择">
                <input type="checkbox" class="btn-check" id="feature1" autocomplete="off">
                <label class="btn btn-outline-success" for="feature1">通知</label>
                
                <input type="checkbox" class="btn-check" id="feature2" autocomplete="off" checked>
                <label class="btn btn-outline-success" for="feature2">自动保存</label>
                
                <input type="checkbox" class="btn-check" id="feature3" autocomplete="off">
                <label class="btn btn-outline-success" for="feature3">同步</label>
            </div>
        </div>
        
        <!-- 实际应用场景 -->
        <h2>实际应用场景</h2>
        
        <!-- 分页控件 -->
        <h4>分页控件</h4>
        <div class="mb-4">
            <div class="btn-group" role="group" aria-label="分页">
                <button type="button" class="btn btn-outline-primary">上一页</button>
                <button type="button" class="btn btn-outline-primary active">1</button>
                <button type="button" class="btn btn-outline-primary">2</button>
                <button type="button" class="btn btn-outline-primary">3</button>
                <button type="button" class="btn btn-outline-primary">下一页</button>
            </div>
        </div>
        
        <!-- 媒体播放器控件 -->
        <h4>媒体播放器控件</h4>
        <div class="mb-4">
            <div class="btn-group" role="group" aria-label="播放控件">
                <button type="button" class="btn btn-outline-dark">⏮</button>
                <button type="button" class="btn btn-outline-dark">⏯</button>
                <button type="button" class="btn btn-outline-dark">⏹</button>
                <button type="button" class="btn btn-outline-dark">⏭</button>
            </div>
        </div>
        
        <!-- 表格操作 -->
        <h4>表格操作</h4>
        <div class="mb-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5>用户列表</h5>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary btn-sm">全选</button>
                    <button type="button" class="btn btn-outline-success btn-sm">导出</button>
                    <button type="button" class="btn btn-outline-danger btn-sm">删除</button>
                </div>
            </div>
            
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>zhangsan@example.com</td>
                        <td><span class="badge bg-success">活跃</span></td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-outline-primary">查看</button>
                                <button type="button" class="btn btn-outline-secondary">编辑</button>
                                <button type="button" class="btn btn-outline-danger">删除</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

最佳实践

1. 语义化标记：使用 role="group" 和 aria-label 属性提高可访问性
2. 合理分组：将相关的按钮组合在一起
3. 保持一致性：在同一个按钮组中使用相同的按钮样式
4. 适当的大小：根据使用场景选择合适的按钮组大小
5. 响应式考虑：在小屏幕上考虑按钮组的显示效果

下一步

现在你已经掌握了 Bootstrap 按钮组的使用方法，接下来我们将学习徽章组件。

下一章：Bootstrap 徽章 →