Bootstrap響應式柵格系統的設計原理

一、歷史背景

　　Bootstrap是Twitter的工程師Mark Otto和Jacob Thornton開發的一套供內部使用的UI框架，於2011年開源。2012年發佈的第二版中新增了12列柵格系統和響應式組件，2013年發佈的第三版進一步改造爲扁平化視覺風格和優先支持移動設備。把握潮流，與時俱進是全部優秀框架的共同品質。

二、基本結構

　　Bootstrap採起12列的柵格體系，根據主流設備的尺寸進行分段，每段寬度固定，經過百分比和媒體查詢實現響應式佈局。

　　Bootstrap劃分了四種尺寸：超小屏（手機）、小屏（平板豎屏）、中屏（平板橫屏）和大屏（PC），每一類中頂層包含塊container的寬度都是固定的。還可使用.container-fluid將固定寬度轉換爲連續的寬度（width=100%）。

　　這裏有個疑問：爲何對於大屏設備，container的寬度要設計爲1170px。既然是12列柵格，設計成1200px不是顯得更規整、也更容易向產品和UI解釋嗎？

　　原來bootstrap爲了不內容佔滿屏幕，確保在1200px寬的設備兩邊留出必定的邊距，所以將container的最大寬度設爲1170px，並使用margin-left:auto和margin-right:auto將container居中，從而確保兩邊各留出15px的邊距。全部列寬均設置爲百分比，根本不考慮具體數值。因此if(你有整數情結){不要受整數情結的影響}。

　　Bootstrap的柵格系統是一個三層結構，除了外圍的container和內部的column，中間還有一個夾層row，而且Bootstrap要求全部的column必須包含在row裏面，這是爲何呢？

　　原來Bootstrap將全部元素的盒模型設置爲了border-box：

　　所以container寬度爲1170px，減去左右共30px的padding，因而container的內容寬度就只剩1140px，這下全部col柵格的百分比乘的都是1140而不是1170，爲解決此問題，Bootstrap在container中新增了一個夾層row，經過使用負的margin增長row的寬度至1170px。這裏用到了盒模型尺寸的計算原理：塊元素左右外邊距、左右border、左右內邊距和width這七個值之和必須等於包含塊的content width。row的包含塊container的content width爲1140px，所以對於row而言，就存在以下等量關係：

　　-15px+0+0+width+0+0+（-15px）= 1140

　　因而row的width就自動擴展到1170px了。

　　這樣是否是顯得有點畫蛇添足呢？既然container左右兩邊都有15px的外邊距了，爲何還要設計15px的內邊距？若是沒有這個內邊距，不就不須要額外添一個夾層row了嗎？

　　這裏就是Bootstrap設計的精巧之處：由於柵格之間須要間隔，所以每一個column柵格都設置了15px的padding：

　　這意味着每一個column實際上也能夠當作一個container！咱們能夠在任意一個column內再嵌套一個柵格系統，而無需再添加container，只需添加一個row便可，不要將row理解成「行」，它就是一個包含塊而已。這樣的三層結構使得Bootstrap成爲了一個能夠無限嵌套的響應式系統，每個柵格均可以看作一個獨立的系統，container只不過是那個最大的柵格而已。

　　另外，Bootstrap柵格系統預設的數值，如列數、槽寬以及媒體查詢閾值都是能夠修改的。可定製化是全部優秀框架的另外一個共同品質。

 三、列排序與列偏移

　　Bootstrap將全部列的position都設成了relative，就在於可對列進行定位或排序，好比要將某一個列定位到12分之3處（即從第3、四列交界處開始），能夠設置left:25%或者right:75%。Bootstrap已經預設好了相應的類名：

　　列偏移的不一樣之處在於使用margin，而被margin擠佔的區域沒辦法安放其它的列。

　　以上就是Bootstrap柵格系統的全部內容。我把Bootstrap源碼中與柵格系統無關的代碼所有刪除，作了一個潔版Bootstrap，方便研究和使用：

　　http://files.cnblogs.com/files/kidney/bootstrap.simplified.css