转载：https://mp.weixin.qq.com/s/wfu3sT0hG0JIP0NaB1aTaw
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统也叫网格系统，其实质就是布局。
通过一系列的行（row）和列（column）的组合创建页面布局，把网页内容放到设置的布局文件中，实现网页布局的目的。
栅格系统每行最多可容纳12列。
也就是说，如果<html>里一个.row内包含的列大于12个将会自动排版。
使用栅格系统时，在<head>部分导入CSS文件即可。
<head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width0,initial-scale=1"> <title>Document</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head>
要进行栅格系统操作，首先就要创建栅格系统的容器。
<div class="container"> <div class="row"> ...... </div> </div>
“container”和“row”共同组成栅格容器，“row”代表的就是一行。
创建栅格容器后，设置名为col-md-的div，当尾数为1时，表示每个div的宽度占1/12，所以每行最多可以放置12个子div。
如果超过12个，则会在下一行显示。
<div class="container"> <div class="row"> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-2</div> <div class="col-md-1">col-md-3</div> <div class="col-md-1">col-md-4</div> <div class="col-md-1">col-md-5</div> <div class="col-md-1">col-md-6</div> <div class="col-md-1">col-md-7</div> <div class="col-md-1">col-md-8</div> <div class="col-md-1">col-md-9</div> <div class="col-md-1">col-md-10</div> <div class="col-md-1">col-md-11</div> <div class="col-md-1">col-md-12</div> <div class="col-md-1">col-md-13</div> </div> </div>
为了方便和比较，还要给栅格加上边框、背景等属性，完整的代码如下：
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width0,initial-scale=1"> <title>Document</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> .row { margin-bottom:20px; } [class*="col-"] { padding-top:15px; padding-bottom:15px; background-color:#eee; background-color:rgba(86,61,124,.15); border:1px solid #ddd; border:1px solid rgba(86,61,124,.2); } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-2</div> <div class="col-md-1">col-md-3</div> <div class="col-md-1">col-md-4</div> <div class="col-md-1">col-md-5</div> <div class="col-md-1">col-md-6</div> <div class="col-md-1">col-md-7</div> <div class="col-md-1">col-md-8</div> <div class="col-md-1">col-md-9</div> <div class="col-md-1">col-md-10</div> <div class="col-md-1">col-md-11</div> <div class="col-md-1">col-md-12</div> <div class="col-md-1">col-md-13</div> </div> </div> </body> </html>
[class*="col-"]表示名为col-的类都可以匹配到。运行代码，网页效果如下：
这里的col-md是适应中等屏幕的，如果屏幕是大屏幕，使用col-md就不恰当了。
按照屏幕尺寸大小，Bootstrap栅格系统分别给出了相应的参数：
|
参数 |
含义 |
|
.col-xs- |
超小屏幕，如手机（<768px） |
|
.col-sm- |
小屏幕，如平板（≥768px） |
|
.col-md- |
中等屏幕，如桌面显示器（≥992px） |
|
.col-lg- |
大屏幕，如大桌面显示器（≥1200px） |
继续增加下面的代码，将一行显示为3列。
<body> <div class="container"> <div class="row"> <div class="col-md-4">col-md-1</div> <div class="col-md-4">col-md-2</div> <div class="col-md-4">col-md-3</div> <div class="col-md-4">col-md-4</div> </div> </div> </body>
这里的class为col-md-4，表示占整个宽度的4/12，即每个div占1/3宽度。运行代码后效果图如下：
在上面第一个class为col-md-4的div中修改内容：
<body> <div class="container"> <div class="row"> <div class="col-md-4"> 梦后楼台高锁，酒醒帘幕低垂。</br>去年春恨却来时。</br>落花人独立，微雨燕双飞。</br>记得小苹初见，两重心字罗衣。</br>琵琶弦上说相思。</br>当时明月在，曾照彩云归。</br> </div> <div class="col-md-4">col-md-2</div> <div class="col-md-4">col-md-3</div> <div class="col-md-4">col-md-4</div> </div> </div> </body>
上面的代码修改了文字信息，</br>表示换行。运行效果图如下：
可以看到，如果栅格中的一列内容显示过多，那么该列会被拉高，被占用的列会自动向下排版，实现自适应显示。
如果我们想对某个div位置进行移动，可以使用offset属性，代码如下：
<body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-2">col-md-1</div> <div class="col-md-4">col-md-2</div> <div class="col-md-4">col-md-3</div> </div> </div> </body>
col-md-offset-*表示由原来的位置向右移动，数字表示移动几个单位。
接下来介绍一下Boostrap栅格系统的列排序实例。
通过使用col-md-push-*和col-md-pull-*类可以很容易地改变列顺序：
<body> <div class="container"> <h4>原来的顺序</h4> <div class="row"> <div class="col-md-8">col-md-1</div> <div class="col-md-4">col-md-2</div> </div> <h4>排序后的顺序</h4> <div class="row"> <div class="col-md-8 col-md-push-4">col-md-1</div> <div class="col-md-4 col-md-pull-8">col-md-2</div> </div> </div> </body>
push表示向右推，pull表示向左拉。上面的代码中，push-4表示向右推4列，pull-8表示向左拉8列，最终实现效果是左右两边调换位置。
除了排序外，Boostrap还能实现列嵌套。
通过添加一个新的.row和一系列的col-md-*列到已经存在的col-md-*列中即可实现。
新的子列也将分为12份显示。
<body> <div class="container"> <h4>列嵌套</h4> <div class="row"> <div class="col-md-9"> Level 1: col-md-1 <div class="row"> <div class="col-md-6"> Level 2: col-md-1</div> <div class="col-md-6"> Level 2: col-md-2</div> </div> <div class="row"> <div class="col-md-3"> Level 3: col-md-1</div> <div class="col-md-6"> Level 3: col-md-2</div> </div> </div> </div> </div> </body>
上面的代码中，首先定义了一个row，然后在此行中添加9列，再在这个占有9列的元素里添加两个不同的row。第一个row将此行分为2份，每份占6列，共计12列。
这12列占满父容器（9列）的宽度，也就是说12列的总宽度和父容器中9列的宽度一样。
第二个row将此行分为2份，第一份3列，第二份6列，剩余的3列不填充，如图：
最终代码如下：
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width0,initial-scale=1"> <title>Document</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> .row { margin-bottom:20px; } [class*="col-"] { padding-top:15px; padding-bottom:15px; background-color:#eee; background-color:rgba(86,61,124,.15); border:1px solid #ddd; border:1px solid rgba(86,61,124,.2); } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-2</div> <div class="col-md-1">col-md-3</div> <div class="col-md-1">col-md-4</div> <div class="col-md-1">col-md-5</div> <div class="col-md-1">col-md-6</div> <div class="col-md-1">col-md-7</div> <div class="col-md-1">col-md-8</div> <div class="col-md-1">col-md-9</div> <div class="col-md-1">col-md-10</div> <div class="col-md-1">col-md-11</div> <div class="col-md-1">col-md-12</div> <div class="col-md-1">col-md-13</div> </div> <div class="row"> <div class="col-md-4">col-md-1</div> <div class="col-md-4">col-md-2</div> <div class="col-md-4">col-md-3</div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4"> 梦后楼台高锁，酒醒帘幕低垂。</br>去年春恨却来时。</br>落花人独立，微雨燕双飞。</br>记得小苹初见，两重心字罗衣。</br>琵琶弦上说相思。</br>当时明月在，曾照彩云归。</br> </div> <div class="col-md-4">col-md-2</div> <div class="col-md-4">col-md-3</div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4 col-md-offset-2">col-md-1</div> <div class="col-md-4">col-md-2</div> <div class="col-md-4">col-md-3</div> </div> <h4>原来的顺序</h4> <div class="row"> <div class="col-md-8">col-md-1</div> <div class="col-md-4">col-md-2</div> </div> <h4>排序后的顺序</h4> <div class="row"> <div class="col-md-8 col-md-push-4">col-md-1</div> <div class="col-md-4 col-md-pull-8">col-md-2</div> </div> <h4>列嵌套</h4> <div class="row"> <div class="col-md-9"> Level 1: col-md-1 <div class="row"> <div class="col-md-6"> Level 2: col-md-1</div> <div class="col-md-6"> Level 2: col-md-2</div> </div> <div class="row"> <div class="col-md-3"> Level 3: col-md-1</div> <div class="col-md-6"> Level 3: col-md-2</div> </div> </div> </div> </div> </body> </html>
栅格系统的使用非常广泛，运用的好能帮我们节省很多开发时间。
除了布局以外，栅格的样式也很关键，关系到界面的美观。