BOOSTRAP 3.0 網格(GRID)工做原理

BOOTSTRAP CSS 網格是實現響應式頁面設計的利器，但至於它的工做原理，大多數時候對開發人員應該是一個黑盒。不多有人想知道它背後是如何工做的。直到你自已設計的頁面沒法知足一個複雜的需求，或者設計出來的頁面顯示怎麼也達不到你的預期。你真的會像丈二和尚摸不着頭腦。直到我看到了一篇國外開發人員寫的文章，它提示了一些BOOTSTRAP 3.0框架中GRID的一些工做原理，這邊簡單作一個概括總結，供你們參考。

容器 ( container)

• 容器的左內邊距是15px，以下圖給粉紅部分顯示
• 容器的寬度動態地取決於屏幕寬度

行(row)

• 列column應該包含在行row裏面 ，最多可添加到12的列。它還充當包裝器，由於全部列都向左浮動,若是浮動異常，行與行之間也不會有重疊。
• 行每邊都有15px的負邊距，以下圖中藍色所示。它正好抵消了外部容器的15px的左內邊距。理解這點相當重要，有助於理解後續列 column的排列方式。以及自已設計的頁面佈局出現異常的時候。它使得行內的列能夠貼着屏幕邊距爲起點，計算左內邊距
• 不要在容器外使用行，那將不起做用

列(column)

• 列如今有15px的內邊距，以黃色顯示。這樣一來就能夠作到2點：

  • 兩側列沿着容器對齊（因爲行的-15px)
  • 列與列的內容之間永遠保持着30px的間隙
• 不要在行外使用列，那將不起做用

列的內容

有了上述行和列的內邊距互相抵消，這樣每一列的內容，無管是最2邊的列，仍是中間的列，對於整個屏幕來講，都是平等對待的，同時還能控制在同一行當中，即15px + ??px+ 15px的獨立單元，這即是container > row > column 的內邊距設置的巧妙之處。

嵌套

能夠在列中建立新的網格系統，記得只能在列中使用行，不能使用容器：
這樣外層列對於內層行來講，與最外層的容器與行來講的關係是同樣的。
也就是說此時，列的做用與容器的做用相同，造成一個遞歸關係。

偏移 （offset)

偏移比較好理解，它只是將列的左外邊距增長相應的若干個單位長度。只惟一須要注意的是，針對最左側列進行偏移時，偏移的起始位置，以下圖所示，是從行的-15px外開始的。其實這也好理解，由於外部的行的起始位置是-15px,畢竟內邊距也屬於行的一部分。而中間的列進行偏移時，效果是將前一列與當前列一分爲二。

推和拉（push and pull)

爲何使用推/拉？根據屏幕尺寸的變大變小，翻轉當前佈局。
特別適用於將列從新排列，當屏幕從移動設計佈局變到桌面設計，由於它容許你在屏幕大小變更時，打破HTML默認的：自頂向下，從左至右的佈局方式。

特別須要注意的是，pull和push實際上移動了列的位置，而不是改變列的左右邊距，以下圖所示，這樣一來，若是push/pull一個列，而不是push/pull其相鄰列的話，會出列與列內容重疊在一塊兒的狀況。

所以，每當你pull/push一列的時候，相應的鄰近的列也要作一個互補的push/pull的操做。

 
明白了網格系統的以上工做原理，我項目當中頁面佈局的異
常都獲得了合理的解釋。若是以爲仍是很難理解，那就切記要按照
container ->row ->column->row->column這種方式去組織界面的網格元素。