##3.1. 基本用法
###3.1.1. 列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div>//4+8 = 12 <div class="col-md-8">.col-md-8</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> // 4+4+4 = 12 <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-3">.col-md-3</div>//3+6+3 = 12 <div class="col-md-6">.col-md-6</div> <div class="col-md-3">.col-md-3</div> </div> </div>
|
1 2 3 4 5 6
| ``` ###3.1.2. 列偏移 不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名`col-md-offset-*`(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。 > 要保证列与偏移列的总数不超过12，不然会致列断行显示
|
.col-md-4
列向右移动四列的间距
.col-md-3
.col-md-4
列向右移动四列的间距
1 2 3
| ###3.1.3. 列排序 列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类`col-md-push-*`和`col-md-pull-*`(其中星号代表移动的列组合数)。
|
1 2 3
| ###3.1.4. 列的嵌套 Bootstrap框架的网格系统还支持列的嵌套。可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）
|
.col-md-4
我的里面嵌套了一个网格
col-md-4
col-md-4
col-md-4
1 2 3
| #4. 下拉菜单 > 因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果
|
1 2 3 4 5 6 7 8 9
| ##4.1. 使用方法 1. 使用一个名为`dropdown`的容器包裹了整个下拉菜单元素，示例中为:`<div class="dropdown"></div>` 2. 使用了一个`<button>`按钮做为父菜单，并且定义类名`dropdown-toggle`和自定义`data-toggle`属性，且值必须和最外容器类名一致，此示例为:`data-toggle="dropdown"` 3. 下拉菜单项使用一个ul列表，并且定义一个类名为`dropdown-menu`，此示例为: `<ul class="dropdown-menu">` ##4.2. 下拉分隔线 下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的`<li>`，并且给这个`<li>`添加类名`divider`来实现添加下拉分隔线的功能。
|
