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。

轉載于:https://www.cnblogs.com/feng003/archive/2013/05/17/3084057.html

總結

以上是生活随笔為你收集整理的Bootstrap（二）—格栅系统！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。