Bootstrap按钮的状态

按钮的状态

在使用过程中，每个按钮可能都会有很多状态，通过按钮的状态，可以给用户或访问者提供一些有用的反馈。

Bootstrap为按钮提供了 2 种状态，分别是激活状态和禁用状态，并为不同状态定义了相应的样式。

1、激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于元素，是通过:active状态实现的。对于元素，是通过.active类实现的。你也可以将.active应用到上（包含aria-pressed="true"属性)），并通过编程的方式使其处于激活状态。

对于

元素，由于:active是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候，可以添加.active类。如：

1. Primary button

Button

效果如图 2‑75所示：

图2-75 激活的按钮

对于元素，可以为它添加.active类。如：

1. Primary link
2. Link

效果如图 2‑76所示：

图2-76 激活的链接

2、禁用状态

对于被禁用的按钮，Bootstrap通过为它的背景设置opacity属性，让它们呈现出无法点击的效果。

对于元素，为它添加disabled属性，使其表现出禁用状态。当鼠标移动到按钮上时，按钮会出现禁止点击的鼠标手势。如：

1. Primary button

Disabled Button

效果如图 2‑77所示：

图2-77 禁用的按钮

对于元素，为它添加 .disabled 类，就可以实现颜色变浅、褪掉渐变的效果，并让它看起来无法点击。同时，当鼠标移动到链接上时，链接的样式也不再发生变化。如：

1. Primary link
2. Disabled Link

效果如图 2‑78所示：

图2-78 禁用的链接

需要注意的是，.disabled 类只是通过设置pointer-events: none来禁止元素作为链接的原始功能，但是，这一 CSS 属性并没有被标准化，并且 Opera 18 及更低版本的浏览器并没有完全支持这一属性，同样，Internet Explorer 11 也不支持。因此，为了安全起见，建议通过 JavaScript 代码来禁止链接的原始功能。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。