W=(A*n)-i
W是一个页面的总宽度,比如950px;而A代表一个版块的宽度,设置为apx;n就是分为几个版块;而i就是区块之间的间隔。
例如 950=(a*24)-10 而a=40px;改变A和i的值就会生成不同的布局。
(高度960=24*40 宽度 560=14*40 )
而bootstrap格栅系统为12列(1,2,3,4,6,12)形成960px的宽度。
以下场景非常适合格栅系统:
- 页面的总体宽度布局,比如两栏、三栏等布局
- 一些固定区块的尺寸,比如广告图片的尺寸
- 区块之间的间距,可以参考栅格系统的槽宽(Gutter)
- 一些可以栅格化的小区域,暗合栅格往往能简化布局上的考虑。
阅读与:http://ued.taobao.com/blog/2008/09/grid_systems/。
http://ued.taobao.com/blog/2008/10/grid_system_research_1/
http://ued.taobao.com/blog/2008/10/grid_system_research_2/。
http://www.cnblogs.com/binyong/archive/2011/10/02/2197984.html。
http://www.cnblogs.com/yjmyzz/archive/2009/08/20/1550895.html。