1、歷史背景
Bootstrap是Twitter的工程師Mark Otto和Jacob Thornton開發的一套供內部使用的UI框架，於2011年開源。2012年發布的第二版中新增了12列柵格系統和響應式組件，2013年發布的第三版進一步改造為扁平化視覺風格和優先支持移動設備。把握潮流，與時俱進是所有優秀框架的共同品質。
2、基本結構
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柵格系統預設的數值，如列數、槽寬以及媒體查詢閾值都是可以修改的。可定制化是所有優秀框架的另一個共同品質。
3、列排序與列偏移
Bootstrap將所有列的position都設成了relative，就在於可對列進行定位或排序，比如要將某一個列定位到12分之3處（即從第三、四列交界處開始），可以設置left:25%或者right:75%。Bootstrap已經預設好了相應的類名：
列偏移的不同之處在於使用margin，而被margin擠占的區域沒辦法安放其它的列。
以上就是Bootstrap柵格系統的所有內容。我把Bootstrap源碼中與柵格系統無關的代碼全部刪除，做了一個潔版Bootstrap，方便研究和使用：
http://files.cnblogs.com/files/kidney/bootstrap.simplified.css