栅格系统

容器类名：box、wrap、wrapper、content、container

栅格系统的容器：

固定宽居中：container

0-768：移动端       768-992：pad端        992-1200：pc端    1200-：pc端宽屏

    xs                    sm                   md                  lg

100%                     750px                970px               1170px

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

子元素需要实现全屏时需要加上 左右外边距-15px

（ margin-left:-15px;margin-right:-15px; ）

先写行再写列(若设定范围为sm则在md、lg、都会以sm样式展示)

行：row           列：col

辅助工具（只在规定范围内执行）：

hidden-* (范围)隐藏

visible-* (范围)显示

列偏移： col-*(范围)-offset-1(数量)

注意：列的偏移作用在它自身范围以及比它大的范围

如果之作用在当前范围，则需要声明更宽范围偏移为0 ;

列排序：

向右：col-*-push-*

向左：col-*-pull-*

注意：列的偏移作用在它自身范围以及比它大的范围

如果之作用在当前范围，则需要声明更宽范围排序为0 ;

 

<div class="container-fluid">

    <div class="row">

        <div class="col-sm-8 bo-red">

            <div class="row">

                <div class="col-sm-6 bo-red">4</div>

                <div class="col-sm-6 bo-red">4</div>

            </div>

        </div>

        <div class="col-sm-4 bo-red">4</div>

    </div>

</div>

 

 

<div class="container">

    <div class="row">

        <div class="border yellow col-sm-3 col-sm-push-9 col-xs-push-0 col-xs-3 hidden-md col-lg-10 col-lg-push-0 col-lg-offset-1 col-xs-offset-0 "></div>

        <div class="border red col-sm-4 col-sm-pull-1 col-xs-pull-0 col-xs-4 hidden-md hidden-lg"></div>

        <div class="border blue col-sm-3 col-sm-pull-1 hidden-xs col-md-5 col-md-pull-0 hidden-lg"></div>

        <div class="border green col-sm-2 col-sm-pull-10 col-xs-pull-0 col-xs-5 col-md-7 col-md-pull-0 hidden-lg"></div>

    </div>

</div>