柵格系統的實現原理非常簡單，僅僅是通過定義容器的大小，平分12份，可類比table。一個數據（row）必須包含在.container中，行（row）在水平方向上創建一組列（column），就如同tr中創建td。具體的內容放在column中，而且只有列（column）可以作為行（row）的子元素。
上圖1號橫條，是12柵格化的定義，每個列（column）都有15px的左右邊距，下面是.container樣式的源碼：
.container { padding-right: 15px;/*由於row的margin設置-15px，需要這個15px進行修補*/ padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; /*小型屏幕時,container樣式的寬度*/ } } @media (min-width: 992px) { .container { width: 970px; /*中型屏幕時,container樣式的寬度,縮小min-width范圍 */} } @media (min-width: 1200px) { .container { width: 1170px; /*大型屏幕時,container樣式的寬度,再次縮小min-width 范圍*/} }
2號橫條是，row容器的定義，在row的CSS的定義中將margin-left和margin-right都定義為-15px
3號橫條是1號橫條放入2號橫條中的效果。
4號橫條表達的12個橫條可以自由組合，可以用完12，也可以只用一部分，只要用符號“col-md-數字”的規則就可以了。
列組合
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap基礎模板</title> <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> </body> </html>
效果：
列組合的實現方式非常簡單，只涉及兩個CSS特性：左浮動和寬度百分比，源碼：
列偏移
有時候，我們不能讓兩個相鄰的列挨在一起，這時候利用柵格系統的列偏移（offset）功能來實現，而不必再定義margin值。使用.col-md-offset-*形式的樣式就可以將列偏移到右側。例如.col-md-offset-4將.col-md-4列向右移動了4個列的寬度。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap基礎模板</title> <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div> </div> </body> </html>
效果：
源碼也非常簡單，只利用了1/12的margin-left而已，有多少offset，就有多少個margin-left。
列嵌套
同樣，柵格系統也支持列嵌套，即在一個列里再聲明一個或多個行(row)。
<div class="row"> <div class="col-md-9"> Level 1: .col-md-9 <div class="row"> <div class="col-md-6">Level 2: .col-md-6</div> <div class="col-md-6">Level 2: .col-md-6 </div> </div> </div> <div class="col-md-3"></div> </div>
</div>
運行的效果：
可以看到，在一個列（col-md-9）里面，嵌套了一個新行（row），然后在新行里，又放置了兩個等寬列的col-md-6，這時兩個col-md-6加起來是12，但是總寬度和外面的col-md-9列的寬度一樣。所以，在任何一個嵌套列里，不管寬度是多少，都可以再進行12等分，並可以進一步組合。
列排列
列排序其實就是改變列的方向，也就是改變左右浮動，並設置浮動的距離。在柵格系統里，可以通過.col-md-push-*和.col-md-pull-*來實現這一目的，下面將圖中的.col-md-9和.col-md-3調換位置。
默認情況下，col-md-9在左邊，col-md-3在右邊，如果要互換位置，需要將col-md-9列向右推3個列的offset，樣式用col-md-push-3;而col-md-3則需要向左移動，也就是拉9個列的offset，樣式用col-md-pull-9。代碼如下：
// 源碼1125行 .col-md-pull-12 { right: 100%;} .col-md-pull-11 { right: 91.66666666666666%;} .col-md-pull-10 { right: 83.33333333333334%;} .col-md-pull-9 { right: 75%;} .col-md-pull-8 { right: 66.66666666666666%;} .col-md-pull-7 { right: 58.333333333333336%;} .col-md-pull-6 { right: 50%;} .col-md-pull-5 { right: 41.66666666666667%;} .col-md-pull-4 { right: 33.33333333333333%;} .col-md-pull-3 { right: 25%;} .col-md-pull-2 { right: 16.666666666666664%;} .col-md-pull-1 { right: 8.333333333333332%;} .col-md-pull-0 { right: 0;} .col-md-push-12 { left: 100%;} // 其他同理,上pull的設置類似,唯一不同的就是right和left的區別 .col-md-push-0 { left: 0;}
響應式設計
頁面的設計與開發應當根據用戶行為以及設備環境（系統平台、屏幕尺寸、屏幕定向等）進行響應的響應和調整。換句話說，頁面應該有能力自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本，這樣就可以不必為不斷到來的新設備做專門的版本設計和開發了。
響應式設計是一個理念，而非功能，Bootstrap的所有內容，都是以響應式設計為設計理念來實現的。
上面說，Bootstrap為不同的屏幕尺寸（4種類型）提供了不同的柵格樣式，前面例子我們使用的一直是中型屏幕(md)，其他3中樣式分別是超小(xs)、小型(sm)、大型(lg)，所以組合起來樣式就很多了，可以是.col-xs-1，也可以是.col-sm-offset-2，還可以是.col-lg-push-1。下面總結了一個表格用於記錄不同類型瀏覽器的各種參數。
屏幕的分界點是通過下面的樣式實現：
// 超小型是默認實現 // 小型 @media (min-width: 768px) { .container { width: 750px; } } // 中型 @media (min-width: 992px) { .container { width: 970px; } } // 大型 @media (min-width: 1200px) { .container { width: 1170px; } }
1.跨設備組合定義
一種樣式（比如col-md-9）在其定義的尺寸范圍以外是不起作用的。比如，在小型或者大型屏幕下，所有帶有md的樣式都不會生效，而且沒有默認值。這就是說，我們可以再一個元素上應用不同類型的樣式，以適配不同尺寸的屏幕。比如下面的實例：
<div class="row"> <div class="col-sm-12 col-md-8">.col-sm-12 .col-md-8</div> <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div> </div> <div class="row"> <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div> <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div> <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div> </div> <div class="row"> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-6">.col-sm-6</div> </div>
上述示例中，每個div元素都應用了兩種樣式，分別是sm類型和md類型，用於適配小型屏幕和中型屏幕。
最后一個col-sm-6，在中型屏幕上和小屏幕上都是各占50%，就是說col-sm-6在中型屏幕上面也起作用了。這是因為針對sm類型的媒體查詢只用了@media(min-width:768px)，而不是@media(mid-width:768)and(max-width:992px)。所以，如果沒有定義md樣式的話，sm樣式默認情況下依然有效。總結一句，如果只用min-width，則表示向大兼容。
2.清除浮動問題
如果我們想在兩種屏幕上實現下面的不同效果:
按照上述響應式柵格的建議，可能覺得應該如下設計：
<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
但是真實內容填到div里進去，下面是超小屏的會出現的一種實際效果:
因為所有的col-樣式都是左浮動，很明顯，這是因為沒有清除浮動導致的。第3個div開始換行的時候，div1的內容高度過高，所以div3就在右邊緊接着顯示了。
要解決這個問題，需要用Bootstrap提供的clearfix樣式。更新代碼如下(因為col-xs-6定義的寬度是百分比，浮動樣式，所以不要想到6*2=12，從源碼上去考慮具體的表現結果)：
<div class="row"> <div class="col-xs-6 col-sm-3">div1: .col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">div2: .col-xs-6 .col-sm-3</div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3">div3: .col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">div4: .col-xs-6 .col-sm-3</div> </div>
利用clearfix樣式清除浮動，但是前提條件是在超小屏幕上顯示才行（因為其實用visible-xs樣式控制的）。