- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 - 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似
.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
.col-xs-4来创建。 - 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何
.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-lg-*不存在， 也影响大屏幕设备。 -
/* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } -
我们偶尔也会在媒体查询代码中包含
max-width从而将 CSS 的影响限制在更小范围的屏幕大小之内。Copy@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 (<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） 是 列排序 是
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
class="row">class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9
在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。
在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外， （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
内联文本元素
Marked text
For highlighting a run of text due to its relevance in another context, use the tag.
You can use the mark tag to highlight text.
You can use the mark tag to highlight text.
被删除的文本
对于被删除的文本使用
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as deleted text.无用文本
对于没用的文本使用
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as no longer accurate.插入文本
额外插入的文本使用 标签。
This line of text is meant to be treated as an addition to the document.
This line of text is meant to be treated as an addition to the document.带下划线的文本
为文本添加下划线，使用 标签。
This line of text will render as underlined
This line of text will render as underlined利用 HTML 自带的表示强调意味的标签来为文本增添少量样式。
小号文本
对于不需要强调的inline或block类型的文本，使用 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 元素被设置不同的 font-size 。
你还可以为行内元素赋予 .small 类以代替任何 元素。
This line of text is meant to be treated as fine print.
This line of text is meant to be treated as fine print.
着重
通过增加 font-weight 值强调一段文本。
The following snippet of text is rendered as bold text.
rendered as bold text
斜体
用斜体强调一段文本。
The following snippet of text is rendered as italicized text.
rendered as italicized text对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
class="text-left">Left aligned text.
class="text-center">Center aligned text.
class="text-right">Right aligned text.
class="text-justify">Justified text.
class="text-nowrap">No wrap text.
改变大小写
通过这几个类可以改变文本的大小写。
lowercased text.
UPPERCASED TEXT.
Capitalized Text.
class="text-lowercase">Lowercased text.
class="text-uppercase">Uppercased text.
class="text-capitalize">Capitalized text.