Class | Description
----- | -----------
.container | 根据不同屏幕宽度会有不同的 `max-width`
.container-fluid | 宽度始终是 100%
.row | 定义一个行，如果各列的数值加起来大于12，那么会换行，但与其他行还是会有分隔的
.col-[]-[] | 如 `col-sm-4`，定义不同宽度时列所占的比例，注意列之间存在 gutter
.offset-[]-[] | 偏移，如 `.offset-lg-0` `margin-left: percentage(($columns / $grid-columns)`
.push-[]-[] | 换序，如 `push-md-3` `left: percentage(($columns / $grid-columns)`
.pull-[]-[] | 换序，如 `pull-md-9` `right: percentage(($columns / $grid-columns)`
### Flexbox grid system
采用 CSS’s Flexible Box module，提供更高级的布局方式，默认未开启，因为 IE9 不支持。
### Media Object
The media object is an abstract element used as the basis for building more complex and repetitive components (like blog comments, Tweets, etc). Included is support for left and right aligned content, content alignment options, nesting, and more.
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
Class | Description
----- | -----------
.media |
.media-left |
.media-object |
.media-heading |
.media-body |
### Responsive utilities
* `.hidden-[]-down` 如 `.hidden-md-down` 表示 md 时隐藏，然后小于 md 的情形也隐藏
* `.hidden-[]-up` 如 `.hidden-md-up` 表示 md 时隐藏，然后大于 md 的情形也隐藏
## 内容 Content
### Reboot
Bootstrap 在 Normalize 基础上做了增强和调整就成了 Reboot，这部分只有元素选择器，不涉及任何类定义。
### Typography
排版方面的定义，如标题、文本、列表等的详细定义：
* 对各元素的基本定义在 `_reboot.scss`
* 增强的各种类定义在 `_type.scss`
* 对齐、变形、样式、颜色等额外功能在 `_text.scss`。
### Codes
定义文件在 `_code.scss`
* `` 行内代码
* `
` 代码块，可以添加一个可选类 `.pre-scrollable { max-height: 340px; overflow-y: scroll;}`
* `` 变量
* `` 输入
* `` 输出 sample output from a computer program
### Images
对图形的修改都是通过添加类来实现的，在 V2 版本中曾试图修改 `` 的默认行为为“不超出父元素”，但出现了问题。
* `.img-fluid {max-width: 100%; and height: auto;}`
* `.img-rounded`
* `.img-thumbnail` {padding; background-color; border; border-radius; display: inline-block; max-width: 100%;}
* `.img-circle`
图片的布局没有专门的类，而是采用通用布局类来实现的。
Align images with the helper float classes or text alignment classes. block-level images can be centered using the `.m-x-auto` margin utility class.
### Tables
因为表格使用过于普遍，所以我们没敢修改 `
` 标签的默认行为，因此任何时候都需要添加 `.table` 类来应用样式。
* `.table` { width: 100%; background-color；th,td { padding } ... }
* `.table-inverse` 黑底白字
* `.table-striped` 斑马纹
* `.table-bordered` 显示边框
* `.table-hover` 鼠标滑过时加底色
* `.table-sm` 将 padding 减半
* `.table-active / success / info / warning / danger`
* `.table-responsive` 在小于 768px 的屏幕上开启表格横向滚动
* `.table-reflow` 使行与列对调，除非表格很规整，否则慎用
* `.thead-default` 灰底黑字表头，不加的话没有底色，这个类名取得不怎么好，带有欺骗性
* `.thead-inverse` 黑底白字表头 .thead-inverse th {color: #fff; background-color: #373a3c;}
### Figures
如果要显示一块内容(如图片)且需要带标题，那么请使用 `` 标签。
The `` tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
While the content of the `` element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
```html
A caption for the above image.
```
## 组件 Components
### 警告框 Alerts
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。
* `.alert` { padding: 15px; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem;}
* `.alert-success / info / warning / danger`
* `.alert-link` { font-weight: 700; }
* `.alert-heading` { color: inherit; }
* `.alert-dismissible { padding-right: 35px; }` 调整关闭标签位置
* `.fade { opacity: 0; transition: opacity .15s linear; }`
* `.fade.in { opacity: 1; }` 使用 fade 主要是增加关闭效果，不用不影响动作
```html
