栅格法

栅格法

栅格法当下最流行的前端开发框架是Bootstrap

它的有点很多：

节省时间

Bootstrap库中包含很多现成的代码片段，这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。此外，CSS利用LESS编写，很多样式和设计都已设计完成。

定制化

Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分，抛弃不需要的。Bootstrap整体允许你根据自己的需要，裁剪自己开发的项目。

网格系统

对页面进行布局时，往往需要有一个合适的网格。你不一定使用该平台的网格，但它确实能大大降低你工作的难度。默认模式下，该平台提供一个16列的网格（宽为960px）。每列宽40px，每列左右两侧具有10px的间隙，各网格最外侧均留出20px的空白。你可以根据需要改变行数与间隔大小。样式已开发完成，开发者只需要把合适的代码放入HTML合适的位置即可。

易于集成

如果你想进一步完善一个已完成的网站，Bootstrap可以帮助你。例如，如果你要统一使用自己编写的表格样式，你要做的是把你的样式复制到CSS样式文件中。Bootstrap将立即剔除它本身的样式，在这里，你需要将该文件与Twitter进行关联。集成的过程十分简单、方便、快捷。完成之后，你便可以把你的设计应用到你的核心内容上。

布局

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

原理

1. 行（row）必须包含在.container中
2. 使用行（row）在水平方向创建一组列（column）。
3. 你的内容应当放置于列（column）内，而且，只有列（column）可以作为行（row）的直接子元素。
4. 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
5. 通过设置padding从而创建列（column）之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
6. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。