页面布局 栅格系统

1，栅格系统的原理

假设：Flowline的宽度为W，column的宽度为c，Gutter的宽度为g，Margin的宽度为m，栅格列数为N

　　W = c*N + g*(N-1) + 2m；g的宽度通常为m的两倍，所以：

　　W = (c+g) * N；把c+g记为C，得：

　　W = C * N;

　　大部分的栅格系统都是此公式的变体。

2，Bootstrap栅格系统

而对于BootStrap来说，Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
简介：栅格系统用于通过一系列的行(row)与列(column)的组合创建页面布局，你的内容就可以放入建好的布局
中。下面就介绍以下Bootstrap栅格系统的工作原理：
1. “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
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来创建。

所以，当你对心中页面布局有着大概的轮廓时，栅格系统无疑会让该轮廓变得清晰。整个屏幕分为12块，若你想占五块大小的位置，只需使用.clo-xs-5。其他类似。

下面是几个比较好用的栅格系统链接：http://www.wzsky.net/html/Website/CSS/128274.html

参考文章：http://www.cnblogs.com/dojo-lzz/p/4621627.html