bootstrap之布局容器和栅格网格系统

布局容器

第一种布局：两侧留白
将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>