栅格系统的应用
1，栅格系统介绍
- Bootstrap提供了一套响应式，移动设备优先的流式的栅格系统
- 把一个盒子或整个网页分成了12列
- 由一行和多列组成
- 栅格系统通过行列的形式来创建网页布局，把具体数据放入列种
- 栅格系统必须在.container和.container-fluid之中
2，栅格系统的用法：
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<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-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
3，列偏移
指一个栏向右偏移多少个列
.col-md-offset-n
N代表向右偏移的列数
4，列嵌套
<div class="row">
<div class="col-md-4">~~~~~
<div class="row">
<div class="col-md-4">￥%￥%</div>
<div class="col-md-4">…………&</div>
<div class="col-md-4">$$##@</div>
</div>
</div>
</div>
<div class="col-md-4">!!!!!!!</div>
<div class="col-md-4">￥￥￥￥￥</div>
</div>
红色表示基层的栏，分为3栏4列
黑色表示在第一栏中嵌套列3栏4列
