bootstrap_ref_css_buttons

Bootstrap 5 CSS 按钮参考

按钮样式（颜色）

Bootstrap 提供了几种预定义的按钮样式，每种样式都有其语义上的用途。这些样式可以应用于 <button>、<a> 或 <input> 元素。

.btn-secondary 类是旧版本 .btn-default 的现代等效。Bootstrap 5 还引入了轮廓按钮（outline buttons）（例如 .btn-outline-primary），以提供更轻量的外观。

按钮尺寸

使用 .btn-lg 或 .btn-sm 使按钮更大或更小。

旧版 Bootstrap 中的 .btn-xs 类已被移除。对于小型按钮，请使用 .btn-sm；如果需要超小型尺寸，可以应用自定义 CSS。

激活状态和禁用状态

激活状态（Active State）：当处于激活状态时，按钮会显示为被按下的样子（背景颜色更深，边框更深，并带有内嵌阴影）。对于 <button> 元素，这通常通过 JavaScript 或添加 .active 类和 aria-pressed="true" 来实现。

禁用状态（Disabled State）：通过向任何 <button> 元素添加 disabled 布尔属性，可以使按钮看起来处于非活动状态。对于样式化为按钮的锚点 <a> 元素，需要添加 .disabled 类和 aria-disabled="true" 以及 tabindex="-1" 以正确传达禁用状态。

Disabled Link Button

块级 / 全宽度按钮

Bootstrap 5 中已移除了 .btn-block 类。要创建跨越其父元素整个宽度的块级按钮，请使用 display 实用类、网格类，或将按钮包裹在一个 .d-grid 容器中。

使用 d-grid 和 gap-2 的方法非常适合需要堆叠并且有固定间距的全宽度按钮。

按钮类总览

这些类可以用来样式化 <a>、<button> 或 <input type="button"> 元素：

类描述示例

.btn 按钮样式的基本类。所有其他按钮类都需要它。试一试

.btn-primary 主要操作按钮（通常为蓝色）。试一试

.btn-secondary 次要操作按钮（通常为灰色）。替代 .btn-default。试一试

.btn-success 表示成功或积极操作（通常为绿色）。试一试

.btn-danger 表示危险或潜在负面操作（通常为红色）。试一试

.btn-warning 表示警告或注意（通常为黄色/橙色）。试一试

.btn-info 用于信息类消息的上下文按钮（通常为浅蓝/青色）。试一试

.btn-light 浅色按钮，常用于深色背景上。试一试

.btn-dark 深色按钮，常用于浅色背景上。试一试

.btn-link 使按钮看起来像超链接，同时保留按钮的内边距和行为。试一试

.btn-outline-* （例如 .btn-outline-primary）创建一个透明背景的轮廓按钮。试一试

.btn-lg 创建大型按钮。试一试

.btn-sm 创建小型按钮。（.btn-xs 已移除）。试一试

.active 为按钮应用激活（按下）状态。与 aria-pressed="true" 一起使用。试一试

.disabled （对于 <a> 标签）使按钮看起来被禁用且不可交互。与 aria-disabled="true" 和 tabindex="-1" 一起使用。对于 <button> 元素，使用 disabled 属性。试一试

应用场景：表单提交可能使用 .btn-primary 作为主要的“提交”操作，使用 .btn-secondary 作为“保存草稿”操作，并使用 .btn-link 作为“取消”操作。如果表单尚未有效，则会使用禁用状态。

常见陷阱：在没有基础类 .btn 的情况下应用按钮颜色类（例如 .btn-primary）。.btn 类提供了基本的结构和内边距（padding），因此总是必需的。