Bootstrap 按钮

按钮是页面中出现频率最高的交互元素。Bootstrap 用 btn 加上颜色类即可生成风格统一的按钮，还提供尺寸、描边、禁用、状态等扩展，一套类名覆盖绝大多数场景。

按钮的基本样式

给 <button>、<a> 或 <input> 加上 .btn 与颜色类即可。常用颜色有 btn-primary（主蓝）、btn-success（绿）、btn-danger（红）、btn-warning（黄）、btn-info（浅蓝）、btn-dark（深灰）等：

<!-- 本示例基于 CDN 引入的 Bootstrap 5（引入代码见"环境安装"章节）；常见颜色按钮 -->
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-warning">警告按钮</button>

显示效果：四个按钮底色分别为蓝、绿、红、黄，文字白色、带圆角；悬停时颜色变深，点击时有轻微按压缩放感。

描边（轮廓）按钮

把颜色类换成 btn-outline-颜色，即得到只有描边、底色透明的按钮，鼠标悬停时才填充颜色，适合次级操作：

<!-- 描边按钮 -->
<button class="btn btn-outline-primary">描边主色</button>
<button class="btn btn-outline-danger">描边危险</button>

显示效果：两个按钮初始为白底蓝边、白底红边；悬停时分别填充蓝色与红色，文字反白。

按钮尺寸与块级按钮

.btn-lg、.btn-sm 调整按钮大小；btn 配合 w-100 类可做成整行宽的块级按钮，常用于登录页：

<!-- 不同尺寸 -->
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-primary">默认</button>
<button class="btn btn-primary btn-sm">小按钮</button>

显示效果：三个蓝色按钮从左到右依次变小，方便在不同页面区域选择合适的视觉层级。

禁用与激活状态

加 .disabled 类（或 disabled 属性）让按钮置灰不可点；.active 让按钮显示按下态，适合表示当前选中项：

<!-- 禁用与激活 -->
<button class="btn btn-primary">可点击</button>
<button class="btn btn-primary disabled" aria-disabled="true">已禁用</button>
<button class="btn btn-primary active">激活中</button>

显示效果：第一个正常可点；第二个文字变浅、鼠标移上无反馈、点击无反应；第三个颜色更深，模拟按下状态。

小结

记住 btn + 颜色类 是按钮的全部起点：主要操作用 btn-primary，次要操作用 btn-outline-*，再按需追加 btn-lg/btn-sm 与 disabled/active 即可覆盖常见需求。