这是bootstrap的一个亮点技术。使用它可以让我们的界面布局变得很轻松。我们不用再去纠结高度宽度、左右移动这些东西。
bootstrap的布局使用的是行列的方式来布局的，所以好像是一个个的小网格，所以叫栅格。
它是一行一行的来布局。然后每一行里面可以设置列。然后一行分成12列，每一行不一定12列，可以有一些列占多列。宏观上每行都是12列，但是我们可以合并某些列。
比如我们的例子，左侧红色占8列，绿色的占4列，加起来就是12列：
<div class="row">
<div class="col-md-8" style="background-color:red;">.col-md-8xxxxxx</div>
<div class="col-md-4" style="background-color:green;">.col-md-4</div>
</div>Code language: HTML, XML (xml)另外，就算是不同设备，每一行都是12列。只不过是大屏幕的列宽，小屏幕的列窄一点。然后我们可以通过配置样式，让我们的行在不同的屏幕下面，列占多少。
把屏幕分成四个类型来设置行的列：
- 大屏幕：col-lg-* （*是从1到12，表示这一列占多少）
- 中屏幕：col-md-*
- 小屏幕：col-sm-*
- 超小屏幕：col-xs-*
| 屏幕尺寸 | 描述 | 宽度范围 |
|---|---|---|
| 超小屏幕 | 手机 | 小于 768px |
| 小屏幕 | 平板 | 大于等于 768px 且 < 992px |
| 中等屏幕 | 桌面显示器 | 大于等于 992px 且 < 1200px |
| 大屏幕 | 大桌面显示器 | 大于等于 1200px |
我们可以给一个行设置不同的配置来决定下面列占的多少。
行row的div必须放在一个container或者container-fluid里面，不一定是它的直接子div，可以是里面的（可以嵌套），比如下面的：
<div class="container">
<div style="width:500px;">
<div class="row">
<div class="col-md-8" style="background-color:red;">.col-md-8xxxxxx</div>
<div class="col-md-4" style="background-color:green;">.col-md-4</div>
</div>
</div>
</div>Code language: HTML, XML (xml)但是不建议大家这样使用，因为如果给了宽度，那么可能在手机端下面不兼容，出现一个底部横滚动条。
我们还可以给row和列设置样式：
<div class="row" style="margin-top:10px;margin-bottom:10px;">
<div class="col-md-8" style="background-color:red;">Code language: JavaScript (javascript)不一定一行只有两部分，还可以是多个部分，一个div（col的样式）就是一部分。
如果一行的div加起来不够12列，那么就有一部分是空白。比如说下面：
<div class="row" style="margin-top:10px;margin-bottom:10px;">
<div class="col-md-2" style="background-color:red;">.col-md-8xxxxxx</div>
<div class="col-md-3" style="background-color:green;">.col-md-4</div>
</div>Code language: HTML, XML (xml)如果比12列多，那怎么办？如果多了，则最后一部分会跑到下面一行去：
<div class="row" style="margin-top:10px;margin-bottom:10px;">
<div class="col-md-2" style="background-color:red;">.col-md-8xxxxxx</div>
<div class="col-md-3" style="background-color:green;">.col-md-4</div>
<div class="col-md-3" style="background-color:green;">.col-md-4</div>
<div class="col-md-3" style="background-color:green;">.col-md-4</div>
<div class="col-md-3" style="background-color:green;">.col-md-4</div>
</div>Code language: HTML, XML (xml)这里一行有14列。
我们上面所有的类都是设置col-md-*这样对吧，那么其实它就是只是配置中等屏幕。如果是其他的屏幕，则会有一个自动适配。
只有”列（column）”可以作为行（row）的直接子元素，也就是row里面不要有其他的元素，比如span等等或者非col的div。
bootstrap的布局就是三层：
container → row → col
其中row里面直接是col。container里面可能有其他的元素（不建议）。
body → container → row → col（一个div占一部分，每个div占的列不一样，加起来最好就是12，多了就跑下一行，少了就有空白）。