BootStrap学习之栅格布局

　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的改变，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。Bootstrap 栅格系统的工作原理如下：

•  “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
•  通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
•  类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
•  通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
•  如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

从堆叠到水平排列

　　使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

<div class="row">
    <div class="col-md-1" style="background-color: #8a6d3b">.col-md-1</div>
    <div class="col-md-1" style="background-color: #4cae4c ">.col-md-1</div>
    <div class="col-md-1" style="background-color: #623565">.col-md-1</div>
    <div class="col-md-1" style="background-color: #1b6d85">.col-md-1</div>
    <div class="col-md-1" style="background-color: #2b542c">.col-md-1</div>
    <div class="col-md-1" style="background-color: #623565">.col-md-1</div>
    <div class="col-md-1" style="background-color: #4cae4c">.col-md-1</div>
    <div class="col-md-1" style="background-color: #8a6d3b">.col-md-1</div>
    <div class="col-md-1" style="background-color: #761c19">.col-md-1</div>
    <div class="col-md-1" style="background-color: #1b6d85">.col-md-1</div>
    <div class="col-md-1" style="background-color: #843534">.col-md-1</div>
    <div class="col-md-1" style="background-color: #d58512">.col-md-1</div>
</div>

多余的列（column）将另起一行排列

　　如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

<div class="row">
    <div class="col-md-8" style="background-color: #d58512">.col-md-8</div>
    <div class="col-md-4" style="background-color: #4cae4c">.col-md-4</div>
</div>

 

.row 内包含的列（column）大于12个

<div class="row">  
    <div class="col-md-9" style="background-color: #d58512">.col-md-9</div>
    <div class="col-md-7" style="background-color: #4cae4c">.col-md-7</div>
</div>

 

列偏移

       使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="row">
    <div class="col-md-4" style="background-color: #8a6d3b">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4" style="background-color: #2e6da4">
        .col-md-4 .col-md-offset-4
    </div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3" style="background-color: #3c763d">
        .col-md-3 .col-md-offset-3
    </div>
    <div class="col-md-3 col-md-offset-3" style="background-color: #5bc0de">
        .col-md-3 .col-md-offset-3
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3" style="background-color: #761c19">
        .col-md-6 .col-md-offset-3
    </div>
</div>

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row">
    <div class="col-sm-8 col-md-8" style="background-color: #d9534f">
        Level 1: .col-sm-9 .col-md-9
        <div class="row">
            <div class="col-xs-7 col-sm-6" style="background-color: #8a6d3b">
                Level 2: .col-xs-8 .col-sm-6
            </div>
            <div class="col-xs-5 col-sm-6" style="background-color: #67b168">
                Level 2: .col-xs-4 .col-sm-6
            </div>
        </div>
        Level 2: .col-sm-9 .col-md-9
    </div>
    <div class="col-sm-4 col-md-4" style="background-color: #5bc0de">
        Level 1: .col-sm-9 .col-md-3
        <div class="row">
            <div class="col-xs-7 col-sm-6" style="background-color: #8a6d3b">
                Level 2: .col-xs-8 .col-sm-6
            </div>
            <div class="col-xs-5 col-sm-6" style="background-color: #623565">
                Level 2: .col-xs-4 .col-sm-6
            </div>
        </div>
        Level 1: .col-sm-9 .col-md-3
    </div>
</div>

列排序

通过使用 .col-md-push-*  和 .col-md-pull-*  类可以很容易的改变列（column）的顺序，即将两个相关板块的前后或者左右顺序调换。

<div class="row">
    <div class="col-md-6 col-md-push-3" style="background-color: #4cae4c">
        .col-md-6 .col-md-push-3
    </div>
    <div class="col-md-3 col-md-pull-6" style="background-color: #8a6d3b">
        .col-md-3 .col-md-pull-6
    </div>
    <div class="col-md-3" style="background-color: #8a6d3b">
        .col-md-3
    </div>
</div>

 

　　个人感觉这个实际上没什么用，就是通过col-md-push-3和col-md-pull-9来使得两个相关div改变原来的DOM位置，将两个div在DOM上的位置调换。但是col-md-push-3必须和col-md-3所占列数相等；同样col-md-pull-6也必须和col-md-6所占列数相等。 实际开发过程中估计很少会用到这两个类，没有多少实际作用。