不知道大家的布局水平怎么样，我的水平一般般，所以最近在恶补。。。今天想要和大家分享一下bootstrap grid布局的学习，一个超级实用并简单操作的前端框架，，不仅如此响应式也特别特别的好！！总之一个字就是赞！赞！！赞！！！
如果大家对bootstrap感兴趣请点击这里.
行和列
网格是由行(row)和列(column)组成的，使我们能够自由的在水平和垂直方向定位元素。
行表示一个块级别，意味着当你声明一个row时，它包含的元素默认会占据整行。网格是通过列进行水平对齐的，你只可以通过 列进行行子元素以及内容的放置，如果直接放置的话就会打破布局。
Note:行和列是有联系存在的。列之间存在一个15px的padding以保证其排列有序整齐。这时你就会发现第一个以及最后一个列的内容会与父元素留有一个15px的间隙。为了进行弥补，行有一个负值的左右15px的margin。这就是为什么你要在行内放置列的原因。
行 – 等分12份
行在水平方向被等分了12份，当我们在其内部放置列的时候不得不指出其占据了行的多少份。
这是通过.col-md-NUMBER类实现的，这里NUMBER的取值为1~12。根据NUMBER值就可以算出列占据行的百分比，如6占据50%(6/12),3占据25%(3/12)等等。
列将自动换行
这时我们就要考虑一行只有12个可用空间，如果我们在一行中指定的列的份数超出了12，这时结果会怎样呢？嘿嘿，对于这种情况大家点击下面的demo，一看就会明白了。。
屏幕大小分类
在第二步骤中我们是不是书写了col-md-2，这里-md-代表中等大小。Bootstrap关于屏幕大小有明确的分类，如下所示:
- xs –格外小的屏幕，如智能手机。其类为
.col-xs-NUMBER. - sm –小屏幕设备，如平板电脑。其类名为
.col-sm-NUMBER. - md –中等低分辨率的台式机以及笔记本电脑的屏幕。其类名为
.col-md-NUMBER. - lg – 大、高分辨率的屏幕。其类名为
.col-lg-NUMBER.
我们是不是在书写布局的时候为设备的适配问题感到棘手，，这时就可以采取不同类名在一定程度上可以解决问题，请点击下面的示例，缩放电脑屏幕进行观察。
清除浮动
在一些场景中如果一列的高度高于其后列的高度，这时布局也会被打破。列会一次排列，而不会另起一行在其原先应在的位置。
为了解决这个问题我们添加了一个使用了clearfix类的空div，这可以有效的解决上述出现的问题。
列偏移
默认情况下，列会左浮动，紧凑的排列在一起。行的空余空间都会保留在右边。
这时使用.col-SIZE-offset-NUMBER,SIZE取值为xs/sm/md/lg,NUMBER取值为1~12。这时就可以实现列向右NUMBER个空间的偏移。
Push & Pull
push和 pull可以允许我们根据屏幕的大小对列进行重新布局，push将列转向右边，pull反之。这与上面所讲的偏移是不一样的，push和pull
的实现是基于position:relative，对其它列没有影响。
其书写形式为.col-SIZE-push-NUMBER和.col-SIZE-pull-NUMBER。其中SIZE和NUMBER的取值和上述偏移一样。请点击下面的Demo，缩放屏幕大小查看效果。
小结
好了，今天的分享就先到这里，希望大家喜欢并且希望大家可以亲自动手实践一下，这样子才可以更好的进步奥~~~