1、Bootstrap架构的六大部分

1.1 CSS组件

3.x版本中提供了将近20种CSS组件，分别是

1.2 Javascript插件

总共12种，相比较2.x版本少了一种输入提示插件（typeahead）。

插件typeahead的下载地址https://github.com/twitter/typeahead.js

1.3 CSS12栅格系统

栅格系统定义

以规则的网格阵列来指导和规范网页中的版面布局以及信息分布

优点
让网页信息的呈现更加美观、易读，更具可用性。也让网页开发更加灵活与规范

Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。

[摘自：http://caibaojian.com/bootstrap/scaffolding.html]

特点

• 按照百分比进行12等分；
• 是Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式；

1.4 基础布局组件

包括排版、代码、表格、按钮、表单等    

1.5 jQuery

Bootstrap所有的javascript插件都依赖于jQuery1.10+,因此必须引用jQuery库，如果只用CSS组件，则无需引用。

1.6 响应式设计

Bootstrap所有内容，都是以响应式设计为设计理念来实现的。

具体的实践方式由多方面决定，包括弹性网格和布局、图片、CSS媒体查询的使用等。使得一个网站能兼容多个终端。

2 栅格系统

实现原理：通过定义容器大小，平分12份，再调整内外边距，结合媒体查询

主要工作原理

• 行数据（row）需包含在容器.container中；
• 使用行（row）在水平方向创建一组列（column）；
• 具体内容放置于列（column）中，且只有列（column）可以作为行（row）的直接子元素；
• 内置一大堆样式，可以使用像.row和.col-xs-4(占4列宽度);
• 设置padding创建column之间的间隔，第一列和最后一列设置负值的margin来抵消掉padding的影响；
• 列是通过指定1~12的值来表示其跨越的范围。例如，要让屏幕分为3个等宽，可使用3个.col-xs-4来创建。

2.1 列，row和container的样式

1. 列的样式

   padding-right: 15px;
   padding-left: 15px;

2. .row的样式

   .row {
   margin-right: -15px;
   margin-left: -15px;
   }

3. .container的样式

   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;

在第一列的左边和最后一列的右边会有15px的补白，.row可以消除两边的补白，同时为了响应不同屏幕，防止溢出，.container的padding值进行了修补

2.2 基本用法

即列的组合，有4种特性

2.2.1 列组合

使用方法：通过更改数字来合并列，如上述主要工作原理所示

• .col-xs-[1-12] 超小屏幕 手机 (<768px)
• .col-sm-[1-12] 小屏幕 平板 (≥768px)
• .col-md-[1-12] 中等屏幕 桌面显示器 (≥992px)
• .col-lg-[1-12] 大屏幕 大桌面显示器 (≥1200px)

其只涉及两个CSS特性：左浮动和宽度百分比。代码如下所示（以超小屏幕为例，xs）：

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}    

2.2.2 列偏移（offset）

下面范例以超小屏幕为例（xs）

使用背景：无需两个紧挨的列太靠近，不必定义margin值，使用.col-xs-offset-形式的样式即可将列偏移到右侧，该样式使用的是margin-left

例如：.col-xs-offset-4将.col-xs-4向右移动了4个列的宽度

2.2.3 列嵌套

• 在一个列里再声明一个或者多个行row

备注 内部row都是以当前被嵌入的列的宽度为基准，按照百分比进行分配的。

2.2.4 列排序

列排序即改变列的方向，也即改变左右浮动，并且设置浮动的距离。

可以使用.col-xs-pull-[1-12]和.col-xs-push-[1-12]来实现

• 所有的列默认情况都是左浮动
• 当需要将两列互换位置时，可以使用.col-xs-pull-[1-12]

2.3 响应式栅格

• 超小屏幕（xs）；
• 小型屏幕（sm）；
• 中型屏幕（md）；
• 大型屏幕（lg）；

响应式栅格尺寸标准及实现设置

分界点的是通过媒体查询@media来定义的

1. 跨设备组合定义

   • 可以在一个元素上应用不同类型的样式，以适配不同尺寸的屏幕
   • 如果只用min-width，表示向大兼容，
   • 可以在一个div上分别应用xs,sm,md,lg类型的样式

2. 清除浮动

由于所有的col-样式都是左浮动，换行时，所以很容易会出现错位的现象，如图所示：

解决这种问题，可以使用clearfix样式。如下图所示：

3 CSS组件的设计思想

8大类型样式

3.1 基础样式

略

3.2 颜色样式

定义规则：组件名称-颜色类型

例如：btn-info,alert-success

• 具体定义什么颜色和该组件的特性有关系。

  比如，面板panel只需定义边框的颜色，按钮btn需定义边框颜色、背景色和文本颜色。

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

3.3 尺寸样式

Bootstrap也为大部分组件提供了尺寸快捷设置。

一般组件都有4种尺寸：超小（xs）、小型（sm）、普通、大型（lg）
例如：btn-xs,btn-sm,btn-lg

源码如下图所示：

3.4 状态样式

对于可点击的元素，需要根据状态来显示其效果

这种类型的样式一般是处理元素的阴影、鼠标形状、透明度、虚框等方面的内容。

例如：active,disabled

3.5 特殊元素样式

所谓特殊元素，即特定类型的组件一般只使用某一种或者几种固定的元素

例如：导航nav里常用的li元素，在定义这些组件时，也需为这些常用的元素定义相关的默认样式。

3.6 并列元素样式

略

3.7 嵌套子元素样式

假如多个分组按钮一起使用的时候，需考虑浮动方向和间距，下拉菜单还需要考虑圆角问题。如下图所示：

上图的CSS样式则表示当不是第一个和最后一个元素时，不设置圆角。

3.8 动画样式

一般在进度条组件中会使用

使用方法：

在`progress`样式上应用一个`active`，可开启动画过渡效果。源码如下图所示：