Bootstrap 全局CSS样式之栅格系统

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

使用方法：

    栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中,记住行（row）要放到容器(container)中
    用实例介绍栅格系统，这样比较方便理解。
第一步：在使用栅格系统的时候，首先创建栅格系统的容器

<div class="container-fluid"> 
   <div class="row"> 
   ... 
   </div> 
</div>

    原理：数据行(.row)必须包含在容器(.container或者.container-fluid)中,这两个class是Bootstrap事先设计好的。
    .container是固定宽度，居中显示，并且自带左右各15px的padding值，这样.container与浏览器窗口之间就存在一定的距离，方便了栅格系统的排版。

    下面给出.container 和.container-fluid的代码
.container是固定宽度

.container{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }

.container-fluid宽度是100%

.container-fluid{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

第二步：创建合适的栅格，即在行(.row)中添加列(column)，但列数之和不能超过平分的总列数（12），代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8" style="background-color: red">col-md-8</div>
        <div class="col-md-4" style="background-color: green">col-md-4</div>
    </div>
</div>

    原理解释：只有列（column）才可以作为行容器(.row)的直接子元素，具体内容要放在列容器(column)中。每一个“row”代表一行，而内部的“col-md-数字”代表一个单元格；　Bootstrap把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份；合理的选择单元格的数字配置，再往单元格中添加我们想要的内容，这样一个栅格系统就完成了！
    下面看例子，我如果这样写呢。在column元素中，添加的类名有多个，实验结果是什么呢？

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-8" style="background-color: red">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4" style="background-color: green">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-xs-6 col-md-4" style="background-color: blue">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4" style="background-color: gold">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4" style="background-color: pink">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
        <div class="col-xs-6" style="background-color: greenyellow">.col-xs-6</div>
        <div class="col-xs-6" style="background-color: skyblue">.col-xs-6</div>
    </div>
</div>

运行结果：

    一开始就讲到bootstrap是支持响应式布局的。如果，我把浏览器的窗口缩小到一定范围，你会发现出现这样的结果。

    第一行中，绿色本该和红色在一行，结果绿色掉下来，与红色并列排列了。同理，蓝色、黄色、粉色，粉色也掉了下来。这是为什么呢？
    通过下面的截图就可以看到Bootstrap的栅格系统是如何在不同的设备上进行工作的。
栅格参数：

简单解释：　当列的总和不超过12的时候，
.col-xs-　　无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
　　　　.col-sm-　　屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
　　　　.col-md-　　屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
　　　　.col-lg-　　屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；

当屏幕的宽度为1046px 即>992px的时候，-col-md-8和.col-md-4还在作用范围，单元格在一行显示。

当屏幕为718px时，.col-xs在起作用，由于.col-xs-12与.col-xs-6的和大于12，所以会另起一行。
注意：如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

列偏移

    有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-3”，表示该列向右移动3个列的宽度。
示例

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4" style="background-color: blue">.col-md-4</div>
        <div class="col-md-4" style="background-color: gold">.col-md-4</div>
        <div class="col-md-4" style="background-color: pink">.col-md-4</div>
    </div>

    <div class="row">
        <div class="col-md-4" style="background-color: pink">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4"style="background-color: blue">.col-md-4 .col-md-offset-4</div>
    </div>
    <hr>
    <hr>
    <div class="row">
        <div class="col-md-3" style="background-color: blue">.col-md-3</div>
        <div class="col-md-3" style="background-color: gold">.col-md-3</div>
        <div class="col-md-3" style="background-color: pink">.col-md-3</div>
        <div class="col-md-3" style="background-color: orange">.col-md-3</div>
    </div>

    <div class="row">
        <div class="col-md-3 col-md-offset-3" style="background-color: yellow">.col-md-3 .col-md-offset-3</div>
        <div class="col-md-3 col-md-offset-3" style="background-color: green">.col-md-3 .col-md-offset-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="background-color: blue">.col-md-6 .col-md-offset-3</div>
    </div>
</div>

    不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示，如：

<div class="row">
    <div class="col-md-3" style="background-color: blue">.col-md-3</div>
    <div class="col-md-3 col-md-offset-3" style="background-color: gold">.col-md-3</div>
    <div class="col-md-3" style="background-color: pink">.col-md-3</div>
    <div class="col-md-4" style="background-color: orange">.col-md-3</div>
</div>

上面代码中列和偏移列总数为3+3+3+4 = 13>12，所以发生了列断行。

列嵌套

    Bootstrap框架的网格系统还支持列的嵌套。可以在一个已经存在的 .col-sm-* 元素内添加一个新的.row 元素和一系列 .col-sm-* 元素。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。

注意：嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。

列排序

    列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-”和“col-md-pull-” (其中星号代表移动的列组合数)。

<div class="row">

    <div class="col-md-9 col-md-push-3" style="background-color: red;">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9" style="background-color: green;">.col-md-3 .col-md-pull-9</div>
</div>

本该红色在左，绿色在右。通过“col-md-push-3”和“col-md-pull-9”将左右位置颠倒了。

总结：这两天用bootstrap 做了几个小小的练习，感觉bootstrap挺好用的。简单总结了这篇博客，其实也是参照网上部分大牛的博客，有不对的地方，也希望各位博友指出！