Bootstrap研究2 布局系統雜記

除了固定網格布局外，bootstrap還提供一種流式布局fluid grid system，其就是計算當前頁面的寬度，給每個span乘以乙個百分比。使用的時候，跟固定布局類似，所不同的是兩級容器的類分別為container-fluid和row-fluid，別無其他。

<
divclass
="container-fluid"
>
<
divclass
="row-fluid"
>
<
divclass
="span4"
>span 4
div>
<
divclass
="span8"
>span 8
div>
div>
div>

因為實際工業開發中，這種布局方式會使用比較少，至少筆者目前沒有接觸移動開發，所以流式布局不是筆者研究的重點。基於相同原因，響應式設計（responsive design）部分，筆者也暫時不考慮。還有grid定製部分，裡面包含了less的知識和重寫的知識，後面會有專門的文字介紹。

下面還是談一下固定grid中剩下的幾個小事項：

1.布局的偏移（offset）

如圖這種效果，兩邊有span，中間是空的

**也非常簡單

<
divclass
="row"
>
<
divclass
="span4"
>
span4
div>
<
divclass
="span4 offset4"
>
偏移4後的span4
div>
div>

正如你看到的那樣，第二個div內多了乙個名稱為offset4的類，其實你也肯定猜到了，它是通過bootstrap經典margin-left來實現的

.offset4

其偏移的畫素正好是80*4 + 20.同時bootstrap裡面還提供了從offset1到offset12在內共計12個偏移類。每兩個類之間相差80px。（只是不明白為什麼會有offset12出現，因為其後加入的任何span都會突破940px這個寬度。）

2.布局的巢狀

bootstrap中，對於進行span巢狀提供了尤其簡單的實現方式。即，在需要巢狀的span內部，新加入乙個容器row，在row內繼續使用前面理論提到的span。如下：

<
divclass
="row"
>
<
divclass
="span12"
>
巢狀的頂級
<
divclass
="row"
>
<
divclass
="span6"
>
巢狀的2級
div>
<
divclass
="span6"
>
巢狀的2級
div>
div>
div>
div>

（注意：因為是巢狀，所以是在span內加入了row，row內再繼續進行span。如此而已，別無其他。）

關於布局系統，基本上就這麼多了。接下來的文字會談base css。

spacebuilder,構建您的空間...