Bootstrap 4 按钮 - 样式与交互指南

最后编辑于2025-04-14 13:49:03.6851517 +0800 CST

Bootstrap 4 按钮

按钮是网页中最常见的交互元素之一，用于触发动作或事件。Bootstrap 4 提供了丰富的按钮样式和变化，可以适应各种设计需求。

按钮样式

Bootstrap 4 提供了多种预定义的按钮样式，每种样式都有特定的语义和视觉表现：

<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

按钮语义说明

各种按钮样式有其特定的使用场景和语义：

  • btn-primary: 用于主要操作，如表单提交、确认等
  • btn-secondary: 用于次要操作，通常作为主要按钮的辅助选项
  • btn-success: 表示积极的操作，如保存、完成等
  • btn-danger: 表示危险或破坏性操作，如删除、取消订单等
  • btn-warning: 需要用户注意的操作，可能有风险
  • btn-info: 提供信息性操作，如查看详情、获取帮助等
  • btn-light/dark: 用于不同背景下的中性操作
  • btn-link: 看起来像链接但行为像按钮

按钮元素

按钮类可以应用于多种HTML元素上，最常见的是 <button>、<a> 和 <input> 元素：

<a href="#" class="btn btn-info" role="button">链接按钮</a>
<button type="button" class="btn btn-info">按钮元素</button>
<input type="button" class="btn btn-info" value="输入框按钮">
<input type="submit" class="btn btn-info" value="提交按钮">
链接按钮

可访问性提示

当使用 <a> 元素创建按钮时，务必添加 role="button" 属性以增强可访问性。如果按钮不链接到新页面，还应设置 href="#" 或 href="javascript:void(0)"。

轮廓按钮

Bootstrap 4 提供了轮廓按钮样式，只有边框而没有背景色，适合用于次要操作或特定设计需求：

<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-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>

按钮大小

Bootstrap 4 允许通过添加额外的类来改变按钮大小：

<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>

何时使用不同大小的按钮？

  • 大号按钮 (btn-lg): 用于强调主要操作，如页面上最重要的号召性操作 (CTA)
  • 默认按钮: 适用于大多数常规操作
  • 小号按钮 (btn-sm): 适合空间有限的区域或次要操作

块级按钮

通过添加 .btn-block 类可以创建占满父容器宽度的块级按钮：

<button type="button" class="btn btn-primary btn-block">块级按钮</button>
<button type="button" class="btn btn-outline-success btn-block">块级轮廓按钮</button>

块级按钮非常适合：

  • 移动设备界面
  • 表单提交按钮
  • 需要突出显示的主要操作

激活和禁用状态

按钮可以设置为激活或禁用状态，以反映不同的交互情况：

<!-- 激活状态 -->
<button type="button" class="btn btn-primary active">激活按钮</button>

<!– 禁用状态 –>
<button type=“button” class=“btn btn-primary” disabled>禁用按钮</button>
<a href="#" class=“btn btn-primary disabled”>禁用链接按钮</a>

禁用链接按钮

关于禁用链接按钮的注意事项

<a> 元素不支持 disabled 属性，必须使用 .disabled 类。此外，这种方法只改变按钮的外观，并不能阻止用户点击链接。如需完全禁用链接，需要额外的JavaScript代码。

带图标的按钮

结合Font Awesome或Bootstrap Icons，可以创建带图标的按钮，使其更具视觉吸引力：

<button type="button" class="btn btn-primary">
  <i class="fa fa-home"></i> 首页
</button>

<button type=“button” class=“btn btn-success”>
<i class=“fa fa-save”></i> 保存
</button>


<button type=“button” class=“btn btn-danger”>
<i class=“fa fa-trash”></i> 删除
</button>

加载状态按钮

通过添加 .spinner-border-sm 或 .spinner-grow-sm 类，可以创建表示加载中的按钮：

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  加载中...
</button>

<button class=“btn btn-primary” type=“button” disabled>
<span class=“spinner-grow spinner-grow-sm” role=“status” aria-hidden=“true”></span>
加载中…
</button>

切换状态(Toggle State)

使用 data-toggle="button" 可以创建具有切换功能的按钮，点击后会在激活和非激活状态之间切换：

<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
  单个切换按钮
</button>

按钮应用场景与最佳实践

按钮使用的最佳实践

  • 使用正确的语义：根据操作的重要性和类型选择适当的按钮样式
  • 保持一致性：在整个网站/应用中保持一致的按钮风格
  • 明确的层次结构：页面上的主要操作应使用 btn-primary，次要操作使用 btn-secondary 或轮廓按钮
  • 表单中的按钮：提交按钮使用 btn-primary，取消按钮使用 btn-secondary 或 btn-outline-*
  • 破坏性操作：如删除、重置等操作应使用 btn-danger 以提醒用户
  • 按钮大小：与其重要性相匹配，重要操作使用较大按钮
  • 添加图标：适当使用图标可以增强按钮的可识别性

常见应用场景示例

登录表单
删除确认
商品页面

响应式设计考虑

在不同设备上，按钮的设计可能需要调整：

  • 移动设备：考虑使用较大的按钮（便于触摸）和 .btn-block 来优化触摸区域
  • 桌面设备：可以使用正常大小的按钮，并排放置
  • 高密度界面：对于功能密集的界面，可使用 .btn-sm 节省空间