##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-*`(其中星号代表移动的列组合数)。



.col-md-4

.col-md-8


1
2
3
###3.1.4. 列的嵌套
Bootstrap框架的网格系统还支持列的嵌套。可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)




我的里面嵌套了一个网格

col-md-6

col-md-6



col-md-4



.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`来实现添加下拉分隔线的功能。

  • 下拉菜单项


  • 下拉菜单项

  • 1
    2
    ##4.3. 菜单标题