2.3.4　状态样式

有一些可单击元素，经常需要根据状态来显示其效果，比如高亮可用的时候用active样式，禁用的时候用disabled样式或disabled属性。Bootstrap的一部分组件针对这种元素也都进行了处理，例如btn按钮的样式定义如下所示：

  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, .125);      /*定义阴影*/
  7.           box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  8. }
  9. .btn.disabled,
  10. .btn[disabled],
  11. fieldset[disabled] .btn {
  12.   pointer-events: none;
  13.   cursor: not-allowed;
  14.   filter: alpha(opacity=65);
  15.   -webkit-box-shadow: none;                                     /* 去除阴影*/
  16.           box-shadow: none;
  17.   opacity: .65;                                                 /* 透明处理*/
  18. }

这种类型的样式一般是处理元素的阴影、鼠标形状、透明度、虚框等方面的内容。但是大家使用该机制做自定义组件开发时一定要注意，active和disabled样式和颜色样式有关联（因为牵涉到颜色），所以如果要定义这两种样式，就要为所有的颜色样式分别定义active和disabled对应的颜色。比如，将btn-success样式和active、disabled样式一起使用的时候，所定义的样式如下所示：

  1. // 源码2122行
  2. .btn-success:hover,.btn-success:focus,
  3. .btn-success:active,.btn-success.active,
  4. .open .dropdown-toggle.btn-success {
  5.   color: #fff;
  6.   background-color: #47a447;
  7.   border-color: #398439;
  8. }
  9. .btn-success:active,.btn-success.active,
  10. .open .dropdown-toggle.btn-success {
  11.   background-image: none;
  12. }
  13. .btn-success.disabled,.btn-success[disabled],
  14. /*此处省略部分选择器*/
  15. .btn-success.disabled.active,.btn-success[disabled].active,
  16. fieldset[disabled] .btn-success.active {
  17.   background-color: #5cb85c;
  18.   border-color: #4cae4c;
  19. }

通过上述代码可以发现，不仅要注意当前元素的active、disabled样式，还要注意嵌套元素的相关样式。上述样式，可以直接和颜色样式一起使用，也可以和默认样式一起使用。