Bootstrap 网格系统

【Bootstrap 网格系统】

1、网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

• row必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
• 使用row来创建col的水平组。
• 内容应该放置在col内，且唯有col可以是row的直接子元素。
• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。
• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

　　

2、下面是 Bootstrap 网格的基本结构：

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

　　为了适应不同大小的屏幕，可以像下面这样使用：

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

3、响应实用工具，可以用于针对屏幕控制哪些元素显示：

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

　　 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中* 范围是从 1 到 11。

<div class="col-xs-6 col-md-offset-3" >

5、通过.col-md-push-* 和 .col-md-pull-* 来改变位置。

<div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" >
         我在左边
        </div>
        <div class="col-md-8" >
         我在右边
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序后
        </p>
        <div class="col-md-4 col-md-push-8" >
         我在左边
        </div>
        <div class="col-md-8 col-md-pull-4">
         我在右边
        </div>
    </div>

参考：

1、http://www.runoob.com/bootstrap/bootstrap-grid-system.html

2、http://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html