浅谈bootstrap之栅格系统

bootstrap的强大功能之一也许就是他的栅格系统了吧！这是一套以移动设备优先的系统，通过其系统以及相关的设置，你可以很快的构建一个响应式的网站；

首先要使用grid（栅格）系统就必须在有一个父类.container（或者是.container-fluid百分比的栅格布局）包括着.row(行)类，然后每一行里面真正包含的内容就是栅格系统的关键所在了，在不同的屏幕尺寸的下，如下配置：

但在这里自己主要谈的是自己对栅格系统的一些总结：

1.栅格系统可以嵌套，只需要在可以嵌套的位置（某一列中添加类.row元素即可，其他的照旧即可，但嵌套的列不会超过12）；

2.对于栅格系统，如果在某种屏幕尺寸下（如col-sm-*）的和大于12，那么多出来的部分其整体会被挤到下面的一行及进行显示；

3.对于关于栅格系统的列偏移，说白了，就是在某种特定的屏幕尺寸做下某一列（几列）进行偏移（margin）如：

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度（也只是当屏幕尺寸符合md的时候才会出现偏移）。

4.不过一般而言，在利用栅格系统进行布局的时候要经常的配合.clearfix类和响应式工具类来进行综合布局；

注：在利用bootstrap进行响应式布局的时候，不要一味的想使用bootstrap的自带的一些现有的一些东西，说白了响应式布局的原理还是@media,自己原生的也要会写吧