一、列组合

二、列偏移

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-*类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。为了在大屏幕显示器上使用偏移，请使用.col-md-offset-*类。这些类会把一个列的左外边距（margin）增加*列，其中*范围是从1到11。

三、列嵌套

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

四、列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。可以很轻易地改变带有.col-md-push-*和.col-md-pull-*类的内置网格列的顺序，其中*范围是从1到11。

---

                                           响应式栅格

                                             基础排版

一、标题

bootstap为传统的标题h1~h6重新定义了标准的样式，使得在所有浏览器下显示效果都一样，具体定义规则如下

二、页面主题

一般在默认情况下，Bootstrap为字体设置了全局的大小为12px，行间距line-height为字体大小的1.428倍既20px。段落元素p会有一个额外的margin-bottom，大小是行间距的一半（默认为10px），若果想让一段文字突出显示，可以使用.lead样式，嘁作用主要是增大字体大小，粗细，行间距和margin-bottom。

三、列表

1.内联列表：网页中很多时候使用的列表都是横向的，因此bootstrap就封装了这个特性（list-inline）

2.水平定义列表：Bootstrap提供了一个dl-horizontal样式，通过在dl元素上应用该class，实现定义列表水平显示（dl-horizontal）

四、表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

1.向父元素添加 role="form"。

2.把标签和控件放在一个带有 class .form-group 的中。这是获取最佳间距所必需的。

3.向所有的文本元素 向所有的文本元素 <input><textarea>和<select>添加 class ="form-control" 。

实例

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，向标签添加 class .form-inline

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

1.向父元素添加 class .form-horizontal。

2.把标签和控件放在一个带有 class .form-group 的中。

3.向标签添加 class .control-label。

输入框（Input）

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。

复选框（Checkbox）和单选框（Radio）

1.复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

2.当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。

3.对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

选择框（Select）

1.当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

2.使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。

3.使用 multiple="multiple" 允许用户选择多个选项。

静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，在<p>使用 class .form-control-static。

表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

输入框焦点

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用的输入框 input

如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

表单控件大小

可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点：

表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，在<input>后使用 .help-block。

                                            Bootstrap 按钮

一、按钮样式

二、按钮大小

三、按钮组

在 div 中直接使用 .btn-group 可以创建按钮组

四、自适应大小的按钮组

可以通过 .btn-group-justified 类来设置自适应大小的按钮组。

五、内嵌下拉菜单的按钮组

按钮组内嵌的按钮可以设置下拉菜单

实例