2.3.2　颜色样式

如果在Bootstrap官方网站看过btn按钮或者alert警告框的样例，你会发现，Bootstrap默认为很多组件都提供了5种颜色的样式，这5种颜色分别是：primary（重点蓝）、success（成功绿）、info（信息蓝）、warning（警告橙）、danger（危险红）。定义规则是：组件名称-颜色类型，如btn-primary、alert-info。

在定义不同颜色样式的时候，主要是定义文本颜色、边框颜色、背景颜色等，具体定义什么颜色和该组件的特性有关。比如面板panel就只需要定义边框的颜色就可以了，而按钮不仅需要定义边框颜色，还需要定义背景色以及文本颜色。btn、panel、alert三个组件在定义颜色样式时的代码如下所示：

  1. /* btn */ 
  2. .btn-primary {
  3.   color: #ffffff;  background-color: #428bca;  border-color: #357ebd;
  4. }
  5. /* panel */ 
  6. .panel-success {
  7.   border-color: #d6e9c6;
  8. }
  9. .panel-success > .panel-heading {
  10.   color: #468847;  background-color: #dff0d8;  border-color: #d6e9c6;
  11. }
  12. /* alert */
  13. .alert-success {
  14.   color: #468847;  background-color: #dff0d8;  border-color: #d6e9c6;
  15. }
  16. .alert-success hr {
  17.   border-top-color: #c9e2b3;
  18. }

可以发现，不同的组件，定义的内容稍有不同，具体定义什么主要由组件特性来决定。另外还要定义其内部子样式的颜色以便形成统一风格，比如.panel-success内部的.panel-heading顶部元素也要定义一个相同风格的颜色。

而对于一些可单击元素，比如btn按钮，还要特殊处理按钮在hover、focus、active状态时的颜色，以便让这些状态在同一个风格下表现一致。其源码如下所示：

  1. // 源码2081行
  2. .btn-primary:hover,
  3. .btn-primary:focus,
  4. .btn-primary:active,
  5. .btn-primary.active,
  6. .open .dropdown-toggle.btn-primary {
  7.   color: #fff;
  8.   background-color: #3276b1;
  9.   border-color: #285e8e;
  10. }

使用方式就像Bootstrap宣传的那样，将两个样式叠加在一起使用即可。示例如下所示：

  1. <button type="button" class="btn btn-primary">Primary</button>
  2. <button type="button" class="btn btn-success">Success</button>
  3. <div class="alert alert-warning">...</div>
  4. <div class="alert alert-danger">...</div>