bootstrap学习（全局CSS样式）（一）

布局容器

bootstrap需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作词用处的类。注意，由于padding等属性的原因，这两种容器类不能互相嵌套。

.container类用于固定宽度并支持响应式布局的容器。

    <div class="container">
        ...
    </div>

.container-fluid类用于100%宽度，占据全部视口（viewport）的容器

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

栅格系统

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

简介

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

下面是bootstrap栅格系统的工作原理。

1.“行（row）”必须包含.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment）和内补（padding）。

2.通过“行（row）”在水平方向创建一组“列（column）”。

3.你的内容应该放在“列（column）”内，并且，只有“列（column）”可以作为行(row)的直接子元素。

4.类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格系统。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

5.通过为“列（column）”设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接的为“行（row）”所包含的“列（column）”抵消掉了padding

6.负值的margin就是下面的示例为什么是向外突出的原因，在栅格列中的内容排成一行

7.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建的。

8.如果一行中包含的列大于12，多余的列所在的元素将被作为一个整体另起一行排列。

9。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类，因此，在元素上应用任何.col-lg-不存在，也影响大屏幕设备。

栅格参数

超小屏幕手机（<768px）,小屏幕 平板(>=768px),中等屏幕 桌面显示器（>992px）,大屏幕 大桌面显示器（>1200px）

注意：可能在一个class属性里面，可能会应用多个类前缀。

下面用代码来说明这个：

    <div class="row">
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
    </div>

.col-xs-,.col-md-等等这些前缀，会将内容分成几列，但是前提是必须在设备的范围内，才会起作用，因此就需要为一个class属性设置多个前缀，以便不同屏幕宽度的适应。

比如：在中等屏幕的时候，这时候起作用的只有col-md-，其他都失效了。

在超小屏幕的时候，这时候起作用的是col-xs-。

还有一个总的原则就是，随着屏幕或视口的尺寸增加，系统会自动分为最多12列，

如果超出这个范围的列就移至下一行。

响应式列重置

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用.clearfix和响应式工具类。

除了列在分界点清除响应，您可能需要重置偏移，后推或前拉某个列。

列偏移

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

嵌套列

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

列排序

通过使用.col-md-push-和.col-md-pull-类就可以很容易的改变列的顺序。

    <div class="row">
        <div class = "col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
        <div class = "col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
    </div>