参考http://v3.bootcss.com/css/，根据自己的记忆进行的复述，加深记忆。
首先介绍bootstrap全局CSS样式
只通过使用bootstrap.css，即可获得统一的样式设置。在使用全局bootstrap的样式时，只需=设置每个元素的class属性值即可。
同意基础样式，防止不同浏览器的样式不同，使用了Normalize.css。
bootstrap需要为页面内容和栅格系统包裹一个 在一个容器中。共有两个有此作用的class
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>其中栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。
栅格系统每行做多保留12列的内容，超过了会另起一行。
.row 必须包含在 .container 中；.col-**-**必须包含在.row中
.clearfix用于清除元素后面的浮动，防止由于不同列高的不一致，导致错误的排列效果。
因为col-**-**本身是通过float的样式进行向左向右排列的。
<div class="col-md-6"></div><div class="clearfix"></div>
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
可以使用.col-**-offset-*控制某一列向右偏移。
可以使用.col-**-push-*控制某一列向右移动。
可以使用.col-**-pull-*控制某一列向左移动。
标题使用h1-h6完成，在内容中心使用small元素，完成副标题添加的效果。
在元素p中使用.lead的class值，可是本行突出显示。
mark元素可以高亮其内容。
del元素在其内容中间添加删除线。s元素可以达到此效果。
ins元素表示插入的文本，带下划线。元素也可以达到此效果。
在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。
文字对齐五种方式
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
改变大小写三种方式
<p class="text-lowercase">Lowercased text.</p>全部小写
<p class="text-uppercase">Uppercased text.</p>全部大写
<p class="text-capitalize">Capitalized text.</p>单词首字母大写
缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。
<abbr title="attribute">attr</abbr>
将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。在显示时，文字前面会出现一个竖线。右竖线样式使用blockquote-reverse类。
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>
在列表元素中，使用 list-unstyled类属性，可以移除列表前面的序列符号。list-inline类属性，取消列表元素的缩进。
<pre>可现实代码块，将其内容添加背景色和边框。
表格可使用.table，添加基础样式。
.table-striped隔行变色
.table-bordered添加表格边框
.table-hover鼠标悬停，行变色
.table-condensed减少表格内边距
.table-responsive响应式表格
| Class | 描述 |
|---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动作 |
.info |
标识普通的提示信息或动作 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 100%;。
将 label 元素（使用.form-lable）和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。所有元素在同一行内排列。
为 <form> 元素添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。
.radio、.radio-inline、.checkbox、.checkbox-inline用于装饰所指的元素。.disable可以使其为禁止状态。
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。
用文本代替原先出现的input，为 <p> 元素添加 .form-control-static 类即可。
.has-warning、.has-error 或 .has-success 类可以控制表单元素的状态颜色。
为 <a>、<button> 或 <input> 元素添加按钮类（.btn .btn-default）即可使用 Bootstrap 提供的样式。
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>.img-responsive让图片支持响应式布局
.center-block让图片水平居中，也可以让其他内容居中。
图片形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
情景文本颜色<pclass="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p>情景背景颜色<p class="bg-primary">...</p><p class="bg-success">...</p><p class="bg-info">...</p><p class="bg-warning">...</p><p class="bg-danger">...</p>
关闭按钮，buttonclass属性为close。<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号<span class="caret"></span>快速浮动<div class="pull-left">...</div><div class="pull-right">...</div>