bootstrap网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

基本网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

响应式的列重置

在小设备浏览时无法确定网格显示的位置，可以使用?.clearfix?class和响应式工具来解决。

?偏移列

.col-xs-*?类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

在大屏幕显示器上偏移，使用?.col-md-offset-*?类，它会把一个列的左外边距（margin）增加?*?列，其中?*?范围是从?1?到?11。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
        </div>
    </div>
</div>

?实现居中效果

嵌套列

为了在内容中嵌套默认的网格，可以添加一个新的?.row，并在一个已有的?.col-md-*?列内添加一组?.col-md-*?列。被嵌套的行应包含一组列，这组列个数不能超过12

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第一列</h4>
         <p>Lorem </p>
      </div>

      <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第二列</h4>
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Consectetur </p>
            </div>
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> sed </p>
            </div>
         </div>

         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>quis</p>
            </div>   
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem </p>
            </div>
         </div>

      </div>

   </div>

</div>

?列排序

使用?.col-md-push-*?和?.col-md-pull-*?类来交换带有?.col-md-push-*?和?.col-md-pull-*?类的内置网格列的顺序，其中?*?范围是从?1?到?11。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
        </div>
        <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序后
        </p>
        <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
        </div>
        <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
        </div>
    </div>
</div>