本網格布局系統屬於Scaffolding（框架，布局）部分。在Scaffolding里面有（固定）網格布局（Grid System）和流式網格布局（Fluid Grid System）。本文討論第一種固定網格布局。
Bootstrap采用的是12列布局格式，即在頁面一行之內最多可以布置12列。當然我們通常不會那么變態。我們通常是使用2列，或者3列，最多不會超過4列。那么具體怎么設置這些列呢？ok，慢慢說來。
Bootstrap中規定頁面的總的寬度為940px，這個跟其他的CSS框架不太一樣（其他有的是960px（960grid等），有點是950px（blueprint等））。這個940px是在一個名稱為container的類中規定的，具體如下
.container,
{
width: 940px;
}
還有就是規定了這個container的頁面居中
.container {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
（這里有個技巧，為了讓div在各種瀏覽器下下產生同樣的居中效果將margin-left和margin-right的值為auto是最簡單的方式。*zoom這個css hack是為了兼容ie6和7，但具體為什么要使用zoom=1還不得而知。）
同時，還使用了css偽元素選擇器，在這個類里面還清空了前后的內容，並且在后面還清除了浮動
.container:before,
.container:after {
display: table;
content: "";
}
.container:after {
clear: both;
}
在container里面還不能直接進行多列布局，這個時候還需要使用row作為二級容器，row這個容器的樣式挺有意思
.row {
margin-left: -20px;
*zoom: 1;
}
左邊的margin為-20px，注意是負20.即是說row的寬度會突破外部的container20個像素。為什么呢？待會你就知道了。當然row里面也有設置清空前后內容和浮動的樣式，跟container類似，此處不多敖述。
row里面才是我們要進行的具體多列布局的類span。具體使用布局時，代碼大概這樣
<div class="container"> <div class="row"> <div class="span4"> span4</div> <div class="span8"> span8</div> </div> </div>
為什么不能將span直接放入container中，為什么row要margin-left=-20px？這就要細說一下span，這個也是筆者所講“精巧網格布局”的原因。
確實情形下，Bootstrap共有12個span類，分別為span1,span2,….span12.他們的定義非常簡單
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
。。。
.span4 {
width: 300px;
}
.span3 {
width: 220px;
}
.span2 {
width: 140px;
}
.span1 {
width: 60px;
}
當然還有使用偽類選擇器統一將他們設置為浮動的樣式
[class*="span"] { float: left; }
浮動是另外的理論，我們按下不表。我們仔細看從span1到span12，發現一個規律，就是span每增加一次，就增加80px。只是span1是從60開始計數的，為什么不讓span1從80開始計數，然后每個span都是80的倍數，這樣也容易記憶呢？實際上啊，span還真是從80開始計數的。只不過其可視部分是60，另外的20在樣式里面設置了margin-left=20；如下
[class*="span"] { margin-left: 20px; }
這個20還有另外一個意義，就是其可以在頁面上表示兩個span之間的間隔，即所有的span之間都有20px的間隔，不至於黏在一起，讓終端用戶分不開。以下這個圖，就是剛才那段html代碼在瀏覽器里面的效果
即是80的整數倍便於記憶和使用，又能巧妙的分割多個span，多完美的解決方案啊。但是這樣真的沒有問題嗎？好像不對，你看啊，我們例子中span4的實際寬度為300+20，span8的實際寬度為620+20.那么他們的總和為960. 960突破了container的940了啊？並且如果每個span左側都有20px的空白，那么第一列也會有這個20px的空白，那頁面最左側是不是就難看了啊？
這個就是剛才我們引入row作為二級容器，並將其margin-left設置為-20的原因。你剛才看到的藍色相框就是row容器。
具體如下，整個row的寬度為960，但是其向左偏移20px（margin-left=-20），這20個px純粹是不可見的空白。row內真正可視的部分正好對其了頁面的左邊。同時因為向左偏移了20px，那么可視部分也正好放入了容器container的940px內。
Bootstrap布局理論大略如此。
接下來簡單談一下使用span進行整頁布局的一個技巧：無論是做幾列的布局，那么請一定保證在一個row內的各個span的名字加起來正好是12. 比如可以是前面說的span4+span8；也可以是一個單獨的span12；也可以是span6+ span6；或者span4+ span4+ span4等等。
注：文字中談的數字（比如container的寬度為940px，每個span的寬度都是缺省值，實際開發中我們可以適當重寫。）