1、栅格系统
- Bootstrap默认的是栅格系统
-
栅格系统用于通过一系列的行（
row）与列（column）的组合来创建页面布局，用来盛放你的内容 -
栅格系统是12列 ，形成一个940px宽的容器
使用.col-md-offset-*类可以将列向右侧偏移 - 所有列必须放在
.row内 - 示例
<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>
-
效果图
详解
使用单一的一组 .col-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列
2、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个
.container容器我们提供了两个作此用处的类，由于
padding等属性的原因，这两种容器类不能互相嵌套.container类用于固定宽度并支持响应式布局的容器
<div class="container">
...
</div>
- .container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
3、嵌套实例
- 示例
<div class="row">
<div class="col-xs-12" style="background-color: red"> 第一级别
<div class="row">
<div class="col-xs-6" style="background-color: black">第二级别</div>
<div class="col-xs-3" style="background-color: blue">第二级别</div>
</div>
</div>
</div>
-
效果图
- Note
每个嵌套的级别的网格数加起来都应该是 12 栏
参考文章推荐：
栅格系统
