3.6.5　禁用状态

与活动状态一样，Bootstrap也提供了禁用状态按钮的设置，主要实现将按钮的背景色做65%的透明处理。有两种方式可以禁用按钮，一种是使用原始的disabled属性，一种是利用.disabled样式。两者的区别是.disabled样式不禁止按钮的默认行为（需要利用JavaScript代码来阻止）。

使用方式如下：

  1. 方式一:
  2. <button type="button" class="btn btn-primary" disabled="disabled">大按钮</button>
  3. 方式二:
  4. <button type="button" class="btn btn-primary disabled">大按钮</button>

注意

IE 9和以下版本下使用disabled属性会导致文本变成灰色，并产生阴影。

另外，.disabled样式作用在拥有.btn样式的链接a元素上时，也会产生同样的禁用状态效果，唯一的不足也是阻止不了链接的默认行为（需要JavaScript代码阻止其行为）。用法如下：

  1. <a href="#" class="btn btn-primary btn-lg disabled">大按钮</a>
  2. <a href="#" class="btn btn-default btn-sm disabled">小按钮</a>

相关源码如下：

  1. // 源码2025行
  2. .btn.disabled,
  3. .btn[disabled],
  4. fieldset[disabled] .btn {
  5.   pointer-events: none;
  6.   cursor: not-allowed;
  7.   filter: alpha(opacity=65);
  8.   -webkit-box-shadow: none;                     /* 去除阴影*/
  9.          box-shadow: none;
  10.   opacity: .65;                                 /* 透明处理*/
  11. }

同时，各自风格对禁用状态也进行了颜色的特殊处理。举例如下：

  1. // 源码2054行
  2. .btn-default.disabled,
  3. .btn-default[disabled],
  4. /* 此处省略部分选择符 */
  5. fieldset[disabled] .btn-default.active {                /* 禁用状态下,各种变化时的颜色 */
  6.  background-color: #fff;                                /* 禁用状态下,背景色 */
  7.  border-color: #ccc;                            /* 禁用状态下,边框颜色 */
  8. }