Bootstrap 5 按钮知识点详解
编程小白也能轻松掌握的按钮使用指南
什么是Bootstrap按钮？
Bootstrap按钮是预先设计好的精美样式，只需添加几个类名，就能让你的按钮看起来专业又美观。
按钮是网页中最重要的交互元素之一，用于执行操作（提交表单、打开链接等）。
基本按钮代码：
<button type="button" class="btn btn-primary">主要按钮</button>
注意：所有Bootstrap按钮都需要
.btn类打底，然后再添加其他样式类。
一、按钮颜色样式
Bootstrap提供多种预定义颜色，只需在.btn后添加相应类名：
记忆技巧：颜色类名都基于实际语义：danger（危险/红色）、success（成功/绿色）等，方便记忆和使用。
二、按钮轮廓样式
想要只有边框的按钮？使用.btn-outline-*类：
使用场景：轮廓按钮适合在彩色背景上使用，或者在需要减少视觉冲击的地方使用。
三、按钮尺寸控制
三种预设尺寸满足不同设计需求：
实用技巧：使用
.w-100可以让按钮占据父元素的全部宽度，特别适合移动端设计。
四、按钮状态控制
控制按钮的交互状态：
禁用状态代码示例：
<button class="btn btn-primary" disabled>不可点击的按钮</button>
切换状态代码：
<button class="btn btn-primary" data-bs-toggle="button">可切换的按钮</button>
五、按钮组与工具栏
将多个按钮组合在一起：
按钮组：
工具栏：
注意：按钮组中使用
role="group"可以提高可访问性。
六、图标按钮
结合Font Awesome等图标库创建精美按钮：
图标按钮代码：
<button class="btn btn-success">
<i class="fas fa-save"></i> 保存
</button>
提示：需要在项目中引入Font Awesome才能使用图标，详见官网。
七、复选框和单选按钮样式
将复选框和单选按钮变成按钮样式：
单选按钮组：
复选框按钮组：
八、实用技巧总结
- 1. 按钮颜色类：
.btn-*（primary/secondary/success等） - 2. 轮廓按钮：
.btn-outline-* - 3. 尺寸控制：
.btn-lg,.btn-sm - 4. 禁用状态：添加
disabled属性 - 5. 激活状态：添加
.active类 - 6. 按钮组：使用
.btn-group容器 - 7. 图标按钮：结合Font Awesome等图标库
- 8. 全宽按钮：添加
.w-100类
最佳实践：始终为按钮提供明确的文字标签，避免单独使用图标按钮。对于表单按钮，请确保使用正确的
type属性（submit/reset/button）。