Bootstrap 按钮组件

按钮是页面里最最常见的交互元素。Bootstrap 的 btn 系列 class 把各种颜色、尺寸、状态都预制好了,加 class 就能用,完全不用写 CSS。这一章带你彻底玩转按钮。

1. 基础按钮:btn + 颜色

所有按钮的基础是 btn class——它提供基础 padding、圆角、字号、hover 效果。再加颜色修饰(btn-primary 等)就有完整样式:

<!-- 基础按钮:btn + 颜色修饰 -->
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">信息</button>

<!-- 浅色系列(浅背景) -->
<button class="btn btn-light">浅色</button>
<button class="btn btn-dark">深色</button>

<!-- 链接样式按钮 -->
<button class="btn btn-link">链接样式</button>

颜色命名遵循语义,不是"红色绿色"而是"成功危险":

• primary:主要动作(提交、保存)。主题色,默认蓝紫。
• secondary:次要动作(取消、返回)。灰色。
• success:成功类操作(确认、通过)。绿色。
• danger:危险操作(删除、撤销)。红色。
• warning:警告(谨慎操作)。黄色。
• info:信息提示。青色。
• light / dark:浅灰 / 深灰,适合特殊背景。
• link:伪装成链接样式的按钮(去掉边框和背景)。

全站统一用这套语义色,视觉一致性自然就有了——用户看到绿色就放心点,看到红色就停下来想一下。

2. 描边按钮:btn-outline-*

如果觉得实心按钮太"重",想要轻量的描边风格,用 btn-outline-*:

<!-- btn-outline-*:描边按钮,只显示边框和文字色 -->
<button class="btn btn-outline-primary">主要描边</button>
<button class="btn btn-outline-success">成功描边</button>
<button class="btn btn-outline-danger">危险描边</button>
<button class="btn btn-outline-warning">警告描边</button>
<button class="btn btn-outline-dark">深色描边</button>

<!-- 鼠标悬停时,背景会变成对应颜色,文字变白 -->

描边按钮的特点:默认只有边框和文字色,背景透明;鼠标 hover 时背景填充对应颜色,文字变白。适合次要操作、表单过滤器、卡片底部按钮等"不想抢戏"的场景。

3. 按钮尺寸:btn-lg / btn-sm

Bootstrap 提供三档尺寸:

<!-- btn-lg:大号按钮(更高、更宽、字号更大) -->
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-outline-secondary btn-lg">大描边</button>

<!-- btn-sm:小号按钮 -->
<button class="btn btn-primary btn-sm">小按钮</button>
<button class="btn btn-outline-secondary btn-sm">小描边</button>

<!-- 不带尺寸修饰的是默认大小 -->

<!-- 占满父容器宽度:配合 d-grid -->
<div class="d-grid gap-2">
  <button class="btn btn-primary">占满宽的按钮 A</button>
  <button class="btn btn-outline-primary">占满宽的按钮 B</button>
</div>

• btn-lg:大号。适合英雄区主 CTA、登录页大按钮。
• 不带尺寸修饰:默认。绝大多数场景。
• btn-sm:小号。适合表格内操作、卡片小按钮、工具栏。

想"占满父容器宽度",用 d-grid gap-2 把父容器变成网格布局——这是 Bootstrap 5 推出的响应式满宽按钮用法,比写 width:100% 更优雅。

4. 按钮状态

按钮有三种特殊状态:

<!-- active:激活态(按下后的样子) -->
<button class="btn btn-primary active">激活</button>

<!-- disabled:禁用,鼠标变禁止图标,点击无效 -->
<button class="btn btn-primary" disabled>禁用</button>

<!-- a 标签做按钮时,禁用要用 aria-disabled 而不是 disabled 属性 -->
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true">禁用链接</a>

<!-- loading 状态:用 spinner 边框组件 -->
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm me-2"></span>
  加载中...
</button>

• active:激活态,看起来像被按住。用于 toggle 按钮、当前选中的过滤器。
• disabled:禁用。鼠标变禁止图标,点击无效。表单提交后常用。
• loading:加载中。配合 spinner-border 组件实现,需要在 JS 里动态加 / 移除。

注意 a 标签做按钮时禁用写法不同——它不支持 disabled 属性,要用 class="disabled" + aria-disabled="true" + tabindex="-1"(防止 Tab 键聚焦)。

5. 按钮可以用任何标签

btn class 不限定标签,button / a / input 都能用:

<!-- 三种标签都可以做按钮(btn class 通用) -->
<a class="btn btn-primary" href="#" role="button">链接按钮</a>
<button class="btn btn-primary" type="button">button 标签</button>
<input class="btn btn-primary" type="button" value="input 按钮" />

<!-- 注意:a 标签做按钮要加 role="button",提升无障碍体验 -->

• button:语义最正确,用于触发 JS 动作。
• a:用于跳转页面、下载文件。加 role="button 提升无障碍。
• input:老派表单写法,现在少用,推荐改用 button。

6. 按钮组:btn-group

多个按钮要"连成一组"(比如分页、对齐工具栏、_YES/NO 二选一),用 btn-group:

<!-- btn-group:水平按钮组,圆角连一起 -->
<div class="btn-group" role="group">
  <button class="btn btn-outline-primary">左</button>
  <button class="btn btn-outline-primary">中</button>
  <button class="btn btn-outline-primary">右</button>
</div>

<!-- btn-group-lg / btn-group-sm:整组改尺寸 -->
<div class="btn-group btn-group-lg">
  <button class="btn btn-primary">大组左</button>
  <button class="btn btn-primary">大组右</button>
</div>

<!-- btn-toolbar:多个 btn-group 组合成工具条 -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2">
    <button class="btn btn-outline-secondary">B</button>
    <button class="btn btn-outline-secondary">I</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline-secondary">左对齐</button>
    <button class="btn btn-outline-secondary">居中</button>
  </div>
</div>

<!-- btn-group-vertical:垂直按钮组 -->
<div class="btn-group-vertical">
  <button class="btn btn-outline-dark">上</button>
  <button class="btn btn-outline-dark">中</button>
  <button class="btn btn-outline-dark">下</button>
</div>

• btn-group:水平按钮组,圆角连一起,中间无缝。
• btn-group-lg / btn-group-sm:整组改尺寸。
• btn-toolbar:多个 btn-group 组合成工具条(比如富文本编辑器的工具栏)。
• btn-group-vertical:垂直按钮组,适合侧边栏菜单。

记得加 role="group" 提升无障碍体验——屏幕阅读器会把它读成"按钮组"而不是孤立的几个按钮。

7. 实战技巧

• 一页一个 primary:主要按钮每屏最好只有一个,其他用 secondary 或 outline。否则视觉焦点分散。
• 危险操作要二次确认:删除、撤销类按钮虽然 Bootstrap 给了 danger 红色,但点击后应该弹 confirm 或模态框确认,避免误操作。
• 表单提交按钮加 loading:点击后立刻 disable + 加 spinner,防止用户连点导致重复提交。
• 图标 + 文字组合:配合 Bootstrap Icons,<button><i class="bi bi-trash"></i> 删除</button> 是常用写法。

小结

按钮组件的要点:

• 基础:btn + btn-primary/success/danger... 八种语义色。
• 描边:btn-outline-* 轻量风。
• 尺寸:btn-lg / 默认 / btn-sm 三档。
• 状态:active / disabled / loading(spinner-border)。
• 组合:btn-group 把多个按钮连成一组。

下一篇看卡片、警告和徽章——后台和内容站最常用的容器组件。

← 上一篇 布局容器

下一篇 卡片、警告与徽章 →