bootstrap中的样式分类

bootstrap中的样式分类

1. 基础样式
2. 颜色样式
3. 尺寸样式
4. 状态样式
5. 特殊元素样式
6. 并列元素样式
7. 嵌套子元素样式
8. 动画样式

其组件样式思想为，由【基础样式】为根基，对同一组件加以不同的特征样式（颜色样式、尺寸样式等）组合，来实现效果，例如class=”btn btn-info btn-xs”。

基础样式

基础样式仅仅定义基础模板。通常为组件名称简写如btn

颜色样式

Bootstrap默认为很多组件都提供了5种颜色的样式。
这5种颜色分别是：primary（重点蓝）、 success（成功绿）、 info（信息蓝）、 warning（警告橙）、 danger（危险红）。
定义规则是：组件名称简写-颜色类型，如btn-primary、 alert-info。

尺寸样式

Bootstrap也为大部分组件都提供了尺寸的快捷设置。
一般组件都有4种尺寸：超小（xs）、 小型（sm）、 普通、 大型（lg）
定义规则是：组件名称简写-尺寸，如btn-xs。

状态样式

状态样式通常是利用尺寸样式、颜色样式的伪类选择器，在实现某些组件的点击效果、阴影效果等。
例如:

.btn-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}

特殊元素样式与并列元素样式

通常某些组件只需要几种特定的元素，比如导航（nav）里的经常用的li元素，特殊元素样式会在定义这些组件的时候，为这些常用的元素定义其相关的默认样式。
当一个组件内部需要放置多个子元素，比如导航组件（nav）里可以放置多个li元素，这个时候一般由并列元素样式处理元素间距问题。

嵌套子元素样式

嵌套子元素样式定义了组件组合的情况，比如按钮组，输入控件组等

动画样式

暂略