布局容器
第一种布局：两侧留白
将div的class属性设置为container，就可以响应式的方式将所属区域居中，并自适应屏幕宽度。
<div class="container" style="background-color: #31B0D5; height: 550px;">
第一种布局：两侧留白
</div>
第二种布局：占据整个屏幕的宽度
<div class="container-fluid" style="background-color: #31B0D5; height: 550px;">
第二种布局：占据整个屏幕的宽度
</div>
注意，二者不兼容，需要选择其中的一个宽度就可以。
栅格网格系统
bootstrap提供了流式栅格系统，随着屏幕视图的增加，系统布局自动分为最多12列，超过12自动换行。它通过一系列的行与列的组合来创建页面布局，并且div标签可以成为行级标签，让使用更加方便。
列组合
<div class="container" style="background-color: #31B0D5; height: 550px;">
<div class="row">
<!-- col-md-1表示中等屏幕大小之后平分，占平分中的一份，电脑屏幕一般为md -->
<div class="col-md-1">
第一行
</div>
<!-- 同理占五份 -->
<div class="col-md-5" style="background-color: #878282; height: 550px;">
第二行
</div>
<div class="col-md-6" style="background-color: #685215; height: 550px;">
第三行
</div>
</div>
</div>
列偏移
作用：通过列偏移可以产生间隙，让不同列之间不会相邻。
示例：
<div class="container" >
<div class="row">
<!-- col-md-1表示中等屏幕大小之后平分，占平分中的一份，电脑屏幕一般为md -->
<div class="col-md-1" style="background-color: #3E8F3E;">
第一行
</div>
<!-- col-md-offset-2表示向右偏移2个格子 总数超过12时也会自动换行 -->
<div class="col-md-1 col-md-offset-2" style="background-color: #878282; height: 550px;">
第二行
</div>
<div class="col-md-1" style="background-color: #685215; height: 550px;">
第三行
</div>
</div>
</div>
列排序
作用类似修改浮动属性，push往右，pull往左
<div class="container" >
<div class="row">
<div class="col-md-1" style="background-color: #3E8F3E;">
第一行
</div>
<!-- col-md-pull-1表示向左浮动2个格子 -->
<div class="col-md-1 col-md-pull-1" style="background-color: #878282; height: 550px;">
第二行
</div>
<div class="col-md-1" style="background-color: #685215; height: 550px;">
第三行
</div>
</div>
</div>
列嵌套
栅格系统将之分成12个等份，在每一个等份里面可以嵌套等份，这就是列嵌套。
<div class="container" >
<div class="row">
<div class="col-md-6" style="background-color: #3E8F3E;height: 550px;">
第一行
<div class="row">
<div class="col-md-1" style="background-color: #3E8F3E;height: 550px;">
第一行
</div>
</div>
</div>
<!-- col-md-pull-1表示向左浮动2个格子 -->
<div class="col-md-6 col-md-pull-1" style="background-color: #878282; height: 550px;">
第二行
</div>
</div>
</div>
