栅格系统

栅格系统

栅格系统 是横向布局的处理方式，使用起来非常方便适应ie8以上的版本，今天仿照bootstrap写一下基础的栅格系统。

容器 类名.row

将栅格布局中所有的元素浮动，便于布局。 如果用户自定义自己的父容器，不使用.row父容器 ，那么将需要自己清除浮动，计算父容器高度。bootsrap3是将.row 容器等份12份 我们也仿照进行12份。
浮动后元素变为行内块，所以元素内需要添加内容，否则看不到效果。

.row:after{
    content: '';
    display: table;
    clear: both;
}

/* 将所有栅格系统的元素变成 inline-block */
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12
,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12
,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12
{float:left;
    position: relative;
    min-height: 1px;
}

屏幕分类

.col-xs-xx 768px以下尺寸
.col-sm-xx 768-991px
.col-md-xx 992及以上 1200以下
.col-lg-xx 1200及以上

分的份数

col-xx-1：8.3333 3333%
col-xx-2：16.666 6667%
col-xx-3: 25%
col-xx-4: 33.3333 333%
col-xx-5:41.6666667%
col-xx-6:50%
col-xx-7:58.333333
col-xx-8:66.6666 667%
col-xx-9:75%
col-xx-10:83.3333333%
col-xx-11:91.666667
col-xx-12:100%

列偏移

通过改变position：relative left top 值实现列偏移

• 代表 1 2 3 4 5 6 7 8 9 10 11 12 xx表示是在xs,xm,md,lg中的偏移（虽然所不同的xs等代表的百分比相同，但是在响应式中就是通过xs,xm,md,lg来实现对一个元素作用于不同屏幕时，样式的改变，所以严谨一些这里还是用xx代表xs,xm,md,lg而不是致谢一种。）
  .col-xx-offset-*
  .col-xx-offset-*
  .col-xx-offset-*
  .col-xx-offset-*
  比如

.col-lg-offset-1{
        margin-left: 8.3333333%;
    }

排列

.col-xx-pull-* 相对元素位置右边（往左偏移） *代表份数
比如

.col-lg-pull-1{
        right: 8.3333333%;
    }
    .col-lg-pull-2{
        right: 16.6666667%;
    }

.col-xx-push-* 相对元素位置左边（往右偏移）

 .col-lg-push-12{
        left: 100%;
    }
    .col-lg-push-0{
        left: 0;
    }

实现的效果

 <div class="row wrap">
        <div class="col-xs-3 col-md-6 col-lg-8 red">
            我是左边
        </div>
        <div class="col-xs-9 col-md-6 col-lg-2 col-lg-offset-2 blue">
            我是右边
        </div>
    </div>
    <div class="row">
        <div class="col-xs-9">.col-xs-9</div>
        <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
        <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
    </div>
    <div class="row">
      <div class=" col-lg-4 col-lg-pull-2 red">
        我是pull-1
    </div>
    <div class="col-lg-4  col-lg-push-2 blue">
        我是push-2
    </div>