在网页开发中，经常需要将多个按钮并排排列，形成一组功能相关的操作按钮。Bootstrap5的“按钮组”（Button Groups）功能可以轻松实现这一需求，无需手动编写复杂的CSS布局代码。本文将从基础到进阶，详细讲解Bootstrap5按钮组的使用方法，适合初学者快速上手。
一、什么是Bootstrap5按钮组？¶
按钮组是将多个按钮包裹在一个容器中，通过统一的类名实现并排显示和样式统一。它解决了传统HTML中按钮单独排列时的间距、对齐和样式不一致问题，同时支持尺寸、排列方向和嵌套等灵活扩展。
二、基础用法：水平按钮组¶
最常用的按钮组是水平排列的，只需通过两个核心类名即可实现：
- 外层容器：使用
.btn-group包裹所有按钮，这是水平按钮组的基础容器。 - 内层按钮：每个按钮必须添加
.btn类（基础按钮样式），以及Bootstrap提供的按钮颜色类（如.btn-primary、.btn-secondary等）。
示例代码：
<!-- 基础水平按钮组 -->
<div class="btn-group" role="group" aria-label="基础操作按钮组">
<button type="button" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-secondary">取消</button>
<button type="button" class="btn btn-success">提交</button>
</div>
role="group"：无障碍属性，告诉屏幕阅读器这是一组相关按钮。aria-label：为按钮组提供描述性标签，提升无障碍体验（可选但推荐）。- 效果：三个按钮会并排显示，且按钮之间无额外间距（Bootstrap默认去除了按钮间的margin）。
三、按钮组的尺寸控制¶
Bootstrap5支持按钮组整体尺寸的统一设置，只需在.btn-group外层添加尺寸类：
- 小尺寸：
.btn-group-sm - 默认尺寸：无需额外类（与按钮默认尺寸一致）
- 大尺寸：
.btn-group-lg
示例代码：
<!-- 小尺寸按钮组 -->
<div class="btn-group btn-group-sm" role="group" aria-label="小尺寸按钮组">
<button class="btn btn-primary">小按钮1</button>
<button class="btn btn-secondary">小按钮2</button>
</div>
<!-- 大尺寸按钮组 -->
<div class="btn-group btn-group-lg" role="group" aria-label="大尺寸按钮组">
<button class="btn btn-success">大按钮1</button>
<button class="btn btn-warning">大按钮2</button>
<button class="btn btn-danger">大按钮3</button>
</div>
四、垂直按钮组¶
如果需要垂直排列的按钮组（如侧边导航菜单），可使用.btn-group-vertical类替代.btn-group：
示例代码：
<div class="btn-group-vertical" role="group" aria-label="垂直按钮组">
<button class="btn btn-outline-primary">首页</button>
<button class="btn btn-outline-secondary">列表</button>
<button class="btn btn-outline-success">详情</button>
</div>
- 效果：按钮从上到下垂直排列，每个按钮占满容器宽度。
五、按钮组嵌套使用¶
按钮组支持嵌套结构，常见场景是在按钮组中包含下拉菜单按钮（如“更多操作”按钮）：
示例代码：
<div class="btn-group" role="group" aria-label="嵌套按钮组">
<button class="btn btn-primary">左侧按钮</button>
<button class="btn btn-secondary">中间按钮</button>
<!-- 下拉菜单按钮 -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-success 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>
- 关键点：嵌套的
.btn-group会形成一个独立的按钮组，与外层按钮组并排显示。
六、按钮组对齐方式¶
若需控制整个按钮组在父容器中的对齐方式（如居中、靠右），可结合Bootstrap的Flex布局类：
- 靠左对齐：默认（无需额外类）
- 居中对齐：
.d-flex justify-content-center - 靠右对齐：
.d-flex justify-content-end
示例代码：
<!-- 居中对齐的按钮组 -->
<div class="d-flex justify-content-center">
<div class="btn-group" role="group" aria-label="居中对齐按钮组">
<button class="btn btn-info">按钮1</button>
<button class="btn btn-light">按钮2</button>
</div>
</div>
七、注意事项¶
- 结构必须正确：按钮组必须用
.btn-group包裹，内部按钮必须用.btn类，不可直接嵌套其他非按钮元素。 - 无障碍属性：始终添加
role="group"和aria-label，帮助屏幕阅读器识别按钮组的功能。 - 避免过度嵌套：复杂场景（如多层嵌套下拉菜单）可能影响可维护性，可考虑使用更简单的组件替代。
总结¶
Bootstrap5按钮组通过简单的类名组合，实现了按钮的快速并排、尺寸控制、垂直排列和嵌套功能，极大简化了网页交互组件的开发。掌握上述基础用法后，可轻松应对大多数常见的按钮组合场景，提升开发效率。
关键类名速查表：
- .btn-group：水平按钮组（默认）
- .btn-group-vertical：垂直按钮组
- .btn-group-sm/.btn-group-lg：控制按钮组整体尺寸
- .justify-content-*：按钮组对齐方式（需配合.d-flex）
- 嵌套：.btn-group内包含.dropdown组件
通过以上技巧，你可以灵活使用Bootstrap5按钮组构建出清晰、易用的操作界面，让网页交互更直观高效。