3.6.4　活动状态

当按钮处于活动状态时，其表现出的行为像被按压了一样（底色更深，边框颜色更深，内置阴影）。对于<button>元素，这是通过: active实现的；而对于<a>元素，则是通过.active实现的。但还可以联合使用：active和<button>，并通过编程的方式使其处于活动状态。

由于: active是伪类，因此无需添加<button>元素就默认支持。但是，如果想在页面加载的时候就表现出活动状态外观的话，则直接在上面添加.active样式即可。示例如下：

  1. <button type="button" class="btn btn-primary btn-lg active">button</button>
  2. <a href="#" class="btn btn-primary btn-lg active" role="button">link</a>

活动状态的实现方式是，首先在默认的.btn样式上定义: active伪类和.active样式，以提供阴影。源码如下：

  1. // 源码2018行
  2. .btn:active,
  3. .btn.active {
  4.   background-image: none;
  5.   outline: 0;/* 消除outline*/
  6.   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /*定义阴影*/
  7.           box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  8. }

然后在各自风格的样式上，为活动状态定义不同的文字颜色、背景颜色。边框颜色。源码如下：

  1. // 源码2040行
  2. .btn-default:hover,
  3. .btn-default:focus,
  4. .btn-default:active,
  5. .btn-default.active,
  6. .open .dropdown-toggle.btn-default {  /* hover、focus、active变化时的颜色 */
  7.   color: #333;
  8.   background-color: #ebebeb;
  9.   border-color: #adadad;
  10. }
  11. .btn-default:active,
  12. .btn-default.active,
  13. .open .dropdown-toggle.btn-default {  /* active状态下,背景图设置为none */
  14.   background-image: none;
  15. }