栅格系统的小总结！

cdn：网络代码托管

优点：减少对服务器的请求、提高性能。

栅格系统的容器分为：

1、固定宽居中（container）

2、全屏（百分百）：container-fluid（自身带有左右padding的15px）

简单的介绍一下不同设备的匹配范围：

1、移动端(xs，一般在:0-768px范围内)开发时一般设为100%

2、pad端(sm，768-992px)开发时一般设为750px

3、pc端(md，992-1200px)开发时一般设为970px

4、pc宽屏端(lg，1200~)开发时一般设为1170px

在用栅格系统时，必须先写行（row）再写列（col），在栅格系统下，若设置范围为sm则在md，lg都会以sm设置的样式展示，

   辅助工具：

   hidden-*隐藏

   visible-*显示

   *表示的是设备的范围（xs，sm，pc，lg），辅助工具只在规定的范围执行。

列偏移： col-*(范围)-offset-1(数量)
注意：列的偏移作用在它自身范围以及比它大的范围
如果之作用在当前范围，则需要声明更宽范围偏移为0 ;

列排序：
向右：col-*-push-*
向左：col-*-pull-*
注意：列的偏移作用在它自身范围以及比它大的范围
如果之作用在当前范围，则需要声明更宽范围排序为0 ;

最后简单的展示一下使用代码：
　　border：设置了盒子的大小；
　　red，yellow，blue，green：背景颜色；

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3 yellow border col-sm-push-9 hidden-md col-lg-10 visible-lg col-lg-push-0 col-lg-offset-1 "></div>
        <div class="col-xs-4 red border col-sm-pull-1 hidden-md hidden-lg"></div>
        <div class="col-sm-3 blue border visible-sm col-sm-pull-1 visible-md col-sm-pull-0 col-md-4 hidden-lg"></div>
        <div class="col-xs-5 green border col-sm-2 col-sm-pull-10 col-md-8 col-md-pull-0 hidden-lg"></div>
    </div>
</div>