Bootstrap3.0 柵格系統背後的精妙魔法(Bootstrap3.0的柵格佈局系統實現原理) - willian12345
原文 http://www.cnblogs.com/willian/p/3558180.html
主題 Html
這個標題取的有點奇怪，怪我翻譯的有問題吧。英文學平有限，有道詞典和google翻譯齊上陣是必須的。還好翻譯的不是小說，對於技術文章，還是能勉強翻過來的。
本文主要講解了Bootstrap3.0的柵格佈局系統實現原理，以及使用過程中應該注意的問題。
開始...翻譯..
像 CSS 柵格系統原理這類東西本應該藏在簾子後面，你直接用就可以了，沒必要去了解其背後的工作原理，除非你有了比較爛的設計或者一些比較複雜的東西，
當你無法找出 spacing, margin, padding 等這些補白全都亂的原因，那就真的很苦逼了，尤其是在某些動態改變和變化的 UI 上。
在關於 bootstrap 的柵格系統工作原理上我見過很多人都對它比較困擾、懊惱，每次都需要我解釋很多遍後別人才能理解，
所以我樂意用快速和可視化的方式來解釋爲什麼 bootstrap 柵格系統能玩得動，沒必要解釋很多。讓我們一起找出 Bootstrap 是如何利用巧妙的技巧實現柵格系統的
HTML正確的基本結構：
<div class="container"> <div class="row"> <div class="col-xs-12"></div> </div></div>
Container
Container 這個容器 class 爲 .container 類有 2 個目的
1 、在響應式寬度上提供寬度約束。響應式尺寸的改變其實改變的是 container ，行(rows) 和列 (columns) 都是基於百分比的所以它們不需要做任何改變；
2 、提供 padding 以至於不內容不直爲緊貼於瀏覽器邊緣，兩邊都是 15px ，下圖中粉色的就是了，稍後解釋更多；
在一個container中永遠不需要再嵌一個container，記住永遠不要。
你將會看到爲什麼
Row
行 (Row)Class 爲 .row 的容器
row 爲 col 提供了空間，理想上一行上分了 12 col ，當所有 col 都向左浮時 row 也就扮演了容器角色，另外當浮動有問題時 row 也不會重疊
Rows 的兩側都擁有獨特的負 15px margin 值 , 如下圖中藍色部分 . 被當作爲 row 的div 被約束在 container 內邊界與粉色區域重疊，但沒超過。這負的 15px margin 值把row 的推出了 container 的 15px padding ，並與之重疊，本質上講就是負出去。爲什麼這麼做呢？原因得看列 (col) 的工作原理，下面我們會看到
永遠不要在 container 外用 row, row 在 container 外面使用是無效的
Column
列(col)現在有15px的padding了，如下圖中黃顏色部分。Container的正padding值造成了15px的留空，row用負margin值反的延伸回去，
所以現在col的padding值與container的padding重疊了
永遠不要在row外使用col,在row外使用col是無效的
Content Within a Column
列(col)的padding給內容提供了空白，使內容不會緊貼在瀏覽器邊界上，列之間有了padding纔不會互相緊貼在一起。
container/row/column整這麼些事兒最終要達到的結果就體現在這裏了，就是爲了col的補白啊...
Nesting嵌套
當你設置了container,row,column後，你可以在column內再創建新的柵格系統。你在右側的列(col)內添加新的行(row)時不需再嵌container了
爲什麼嵌套時不需要新的container了？
這個技巧在於列(col)扮演了container一樣的角色，列也有15px的padding值，它一樣允許行(row)的負margin值,它內部的列、內容間的補白等都一樣能很好的工作了
Offsets 偏移
偏移的實現相當簡單，僅僅是在列(col)的左側加上了margin值，
唯一比較怪的地方可能是在最左側的col是從-15px的row的margin值開始偏移的，中間的列的偏移則是直接從前一個列開始偏移，分割分離出補白。
除此之外，偏移就表現的像列(col)一樣
Push and Pull 列的排序
(直譯過來應該是“推和拉”但實際使用過程中更多的表現爲互換位置進行排序)
讓我們先從爲什麼需要對列進行排序說起：基於響應式佈局，對佈局進行翻轉，尤其是對移動設備上對列進行重新排列，
對於 pc 桌面來說 push and pull 允許你打破 HTML 中 div 從上到下從左到右的固定佈局
可能讓人比較困惑的是 push pull 的實現是通過添加 position 而不是通過添加 margin值實現。
Push 添加的是 left 值， pull 添加的是 right 值。當然在添加 left 或者 right 值之前它們的容器已經是相對定位了。
上圖那麼做就有問題，它會導致列重疊，而不像正常的列或者列偏移。
所以如果你 push 了一個列到右側，它就會疊在右側的列上，反之亦然。
所以一般我們總是“互換”，如果你 push 一個列到右側，那麼你得 pull 右側的列到左側，或則也對右側的列進行處理。
The Reasoning Behind It 總結一下背後的原理
Container:
正是由於 container 這樣設計才讓 content 的兩側擁有 15px 的 padding 值的補白，
另外，整個 body 擁有 15px 的 padding 值，這使整體上不會緊貼瀏覽器的邊緣，當然如果對於滿屏設計並帶有背景色的 div 就不好了 ..
Rows:
行(row)擁有負的margin值，並且值等於container的padding值，以至於邊界與container得以重疊（相等）
，負的margin值疊在了padding上，這讓row看起來沒被container的padding所影響.爲啥？自行腦補..
Columns：
列(col)又擁有15px 的padding，所以能真正讓content擁有15px的補白,而又讓列之間擁有了15px+15px的中間補白，
正是因爲如此，這個柵格系統不需要像960排版（blueprint, 等）系統似的對第一列或最生一列進行特殊的處理。
現在不管怎樣在列之間都擁有15px的空白了。
Nested Rows：
嵌套行的原理就像上面一樣，只是它的重疊住了列的padding ，其實就把外面的列當作 container 了，
本質上列扮演了 container 的角色，所以嵌套行時你不再需要 container
Nested Columns:
嵌套列沒什麼好講的了，和上面一樣
Offsets:
偏移的本質就是分割空白間隔，通過增加空白間隔達到你想要的距離，非常的簡單
Push/Pull:
Push 和 pull 用於主要用於變換左右列的位置，當你有一個特別的設計並且 offset 偏移用着不給力的時候，你可以用它們來改變位置
Common Problems
這裏有些普遍會發生的 bug 值得注意，一些 bug 在 HTML 中很容易就能看出來 .
缺少 Container ： 第一個容易產生 bug 的地方是忘記添加 container 。沒有container 意味着沒有 padding 與行 (row) 的負 margin 直相抵消，
意味着行會超出父元素。當元素處於瀏覽器邊緣時，這是最普遍的造成奇怪的橫向滾動的原因
缺少 row:
第二個普遍問題是少了 row, 這與缺少 container 產生的問題相反， content 與瀏覽器/viewport 的邊緣擁有了 30px 的距離，
比正常值多了一倍。而且你的列浮動也會產生問題。由於缺少了外面 row 的包裹，浮動沒有得到正常的清除，所以浮動就可能產生問題。
同樣，當你試圖嵌套柵格系統時，同樣新嵌進去的 content 離左側的邊距達到了45px
Container 內的元素再嵌 container: 在 container 內任意元素內再嵌 container 會導致很多問題，如雙倍的 padding 值，空白間隔，怪異的橫向滾動
偏移/push/pull:
當使用偏移或者排序 (push/pull), 偏移很簡單不會出什麼問題， push/pull 卻不同，如果你 push 太多，列會超出它的 container ，記住只是使用正常的值主不會有問題
這些就是在使用 bootstrap3.0 的基礎柵格系統時時產生的問題，如果你在設計裏有很多的嵌套碰到問題，
或你的響應式佈局沒按照你所希望的方式工作，先看看上面這幾點，是不是這些問題產生的。
如果你修復了上面說的問題，基本上除了你自定義的佈局外 bootstrap3.0 的佈局問題基本上都能搞定了
That ’ s It
這就是 bootstrap3.0 的工作原理。它真的很聰明並提供了極好的解決方案。在這麼多年使用柵格系統的經驗中，
我個人覺得它是實現的最優雅的。雖然看到到這片文章寫了這麼多會可能覺得bootstrap3.0 的柵格系統很複雜，
但如果不從整體詳細的瞭解其內部的實現原理的話，在實際使用中，它確實是使用了簡單的 CSS ，提供了我們一個好用的柵格系統。
========================================================
英文原文： http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
========================================================
轉載處請註明：博客園(王二狗)[email protected]