CSS组件架构的设计思想

　　不管是设计思想，还是架构，都可以总结为一个词：AO模式。A表示Append，即“附加”的意思，O表示Overwrite，即“重写”的意思。所有的CSS组件都是沿用这种思想来设计的。这也是CSS的特性，不同名的样式可以叠加在一起使用；同名的样式，后面的会覆盖前面的，从而达到组合应用的效果。

 

 

1.基础样式

　　任何一个CSS组件在刚开始都要定义基本样式，就像一个新的HTML页面制作之前都要先定义统一的符号、背景色一样。在基本样式里，一般是定义该样式下的字体(font-)、外内边距(padding，margin)、显示方式(display)、边框(border)以及其他相关内容。

　　比如在警告框组件(alert)里，其基本样式就只定义了内外边距、边框、圆角设置。源码如下：

// 源码4434行
.alert { /* 基本的警告框设置 */
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

 2.颜色样式

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

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

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

/* btn */ 
.btn-primary {
  color: #ffffff;  background-color: #428bca;  border-color: #357ebd;
}
/* panel */ 
.panel-success {
  border-color: #d6e9c6;
}
.panel-success > .panel-heading {
  color: #468847;  background-color: #dff0d8;  border-color: #d6e9c6;
}
/* alert */
.alert-success {
  color: #468847;  background-color: #dff0d8;  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}

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

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

// 源码2081行
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}

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

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

3.尺寸样式

　　Bootstrap也为大部分组件都提供了尺寸的快捷设置。一般组件都有4中尺寸：超小(xs)、小型(sm)、普通()、大型(lg)。使用如下所示：

<button type="button" class="btn btn-xs">Primary</button>
<button type="button" class="btn btn-lg">Success</button>
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>

　　调整尺寸主要是调整所对应元素的padding和圆角设置，有时候也会相应调整行间距和字体大小。btn按钮和well组件在尺寸方面的设置源码如下所示：

/* 源码2134行*/
.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
/* 源码5060行*/
.well-lg {
  padding: 24px;                        /*加大内边距*/
  border-radius: 6px;                   /*加大圆角设置*/
}
.well-sm {
  padding: 9px;                         /*减少内边距*/
  border-radius: 3px;                   /*减少圆角设置*/
}

　　值得注意的是，同一个组件的不同类型的样式可以组合在一起使用，比如颜色样式btn-success和尺寸样式btn-lg一起使用完全没有问题，不会引起冲突。

<button type="button" class="btn btn-success btn-lg">Success</button>

4.特殊元素样式

　　所谓特殊元素，即特定类型的组件一般只使用某一种或者几种固定的元素，比如alert警告框内一般只用警告标题、内容和关闭链接元素。再如导航nav里的经常用的li元素。在定义这些组件的时候，也要为这些常用的元素定义其相关的默认样式。这两个组件对常用特殊元素的样式定义如下所示：

// 源码 4444 行
.alert .alert-link {  font-weight: bold;        /* alert内的链接样式 */
}
.alert > p,.alert > ul {  margin-bottom: 0;     /* alert内的p元素和ul元素的底部外边距设置 */
}
.alert > p + p {  margin-top: 5px;              /*两个段落之间,增加一个顶部外边距*/
}
.alert-dismissable { padding-right: 35px;       /* 增大右内边距,以便关闭按钮*/}
.alert-dismissable .close {                     /* 警告框内,如果设置关闭按钮,特殊处理 */
  position: relative;
  top: -2px;
  right: -21px;                                 /* 关闭按钮,右对齐 */
  color: inherit;
}
// 源码 3462 行
.nav > li {
  position: relative;                           /*所有的菜单项都是相对定位*/
  display: block;                                       /* 块级显示*/
}
.nav > li > a {
  position: relative;                           /* a链接相对定位*/
  display: block;                                       /* 块级显示*/
  padding: 10px 15px;                           /* 外边距保留稍微大一些*/
}
.nav > li > a:hover,.nav > li > a:focus {       /* 移动或焦点时链接的显示效果*/
  text-decoration: none;
  background-color: #eeeeee;                    /* 链接移动或焦点时,背景色变为灰色
*/
}
.nav > li.disabled > a {  color: #999999;       /* li上禁用时的链接颜色*/}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
/* li上禁用时,移动到链接上时的各种处理*/
  color: #999999;                               /* 颜色变灰*/
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}

　　特殊元素所定义的样式不固定，这取决于是什么样的特殊元素，有的是定义内外边距，有的是定义自定义颜色和背景色，具体元素具体对待。

5.并列元素的样式

　　在很多情况下，一个组件内部需要放置多个子元素，这种情况，就需要处理并列元素的间距问题。举个例子，alert组件里，有时候要提示两段内容，这时候就需要用到两个p元素，所以需要处理这种情况的样式。

// 源码4447行
.alert > p {
  margin-bottom: 0;             /* alert内的p元素和ul元素的底部外边距设置 */
}
.alert > p + p {
  margin-top: 5px;              /*两个段落之间,增加一个顶部外边距*/
}

　　而在模态弹窗组件(model)的底部，经常需要显示多个按钮（比如：保存和取消），这时候就需要处理水平并列的情况了：

// 源码5178行
.modal-footer .btn + .btn {
/* 底部区域内的按钮样式设置,如果有多个按钮,设置左部外边距 */
  margin-bottom: 0;
  margin-left: 5px;
}

6.嵌套子元素样式

 　　有时候，我们也需要将两个相同或不同的组件嵌套在一起使用，比如，多个按钮组在一起使用，或者按钮和下拉菜单一起使用，效果如图所示：

 

　　样式设置如下所示：

// 源码3147行
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: -1px;/* 消除2个按钮(或一个按钮和另外一个按钮组)之间的1像素细节引起的冲突 
*/
}
.btn-group > .btn-group {
  float: left;
}

7.动画样式

　　在Bootstrap里，动画样式应用得不是很多只是在进度条组件里会使用到。先看一下动画是如何应用的：只需要在progress样式上应用一个active样式，即可开启动画过渡效果。

<div class="progress progress-striped active">
    <div class="progress-bar" style="width: 45%">
        <span class="sr-only">45% Complete</span>
    </div>
</div>

　　样式定义：

// 源码4551行
.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;/* 2秒过渡40像素,无限循环 */
  animation: progress-bar-stripes 2s linear infinite;   /* 其他浏览器 */
}