Bootstrap RWD 使用方法及原理

Bootstrap不等於RWD

最近常聽到的就是「請問你對RWD熟悉嗎? 」回應大概就是「我最近有Bootstrap來…」這個現象似乎越來越多,話說使用這個框架大約有一年的時間從v2到現在v3.1,覺得真的進步不少,很大的原因應該是它涵蓋的範圍很廣而且對RWD的適應能力也寫的很全面。但是很大一個關鍵是,我們要學css,不要學css framework,因為當你理解了css你自然就會理解這個css framework同時也能理解其他的css framework,還有很多很有名的css framework例如老字號960.gs,foundation.zurb,blueprintcss已經近期的Pure,uikit等等,都是幾乎很相同的東西,它們全部都有RWD的grid,所以基本上Bootstrap并不是唯一可以做RWD的選擇。

不要變成class/div魔王

不管使用什麼css framework,都有這種情況,不過最常遇到的就是如同以下的div結構

首先我們必須先要看看設計圖(如果有,哈哈)不過這個如何排版的重點我們先不提,不過以上的結果很大可能可以寫成以下這樣:

以下是一些使用經驗:
col-md-*只會對大於992px以上的螢幕有效,992以下的全部會自動設為100%;

如果是外圍要默認爲100%,大可不必使用col和row

每個element都應該有它存在的價值,請給它一個名字,不要單獨使用col
如果你真的想不到這個element什麼名字,那麼得想想是不是可以刪除這個減少一層不必要得機構,另外爲element給一個class也方便定義這個element得css,千萬別用col*來另外加入自己得css屬性

Bootstrap的grid架構特色使用和排版

如果是用fixed layout(固定外圍寬度),就是用.container,如果是fluid則用.container-fluid,最大得差別只是fluid是全屏(max-width:90%; padding: 0 5%),fixed顧名思義則是固定在一個寬度(max-width:XXXpx; margin: 0 auto),至於container之下的grid則是全部用百分比來控制,這樣則是Bootstrap的做法。

另外一個則是@media queries,你可以設計一個break point來判斷,那些瀏覽器之下的css屬性應該是怎樣,不過這裡我們就不細說。大致如下:

默認的framework是12欄,所以最大的col是12,兩者或以上的element全部總數是12即可,但是一定要同一個class,例如:

不同類別的組合不可以放在一起計算,例如col-md,col-sm,col-xs,col-lg,是分別對應不同尺寸的class,可以參考,不過首先先仔細思考你的layout和界面,並不是全部「四方形」都是要用grid來製作,有很多只是重疊出來的四方形,

可以利用重疊來製造一來是節省很多不必要的div,另外也可以把頁面結果考量進去,這樣會節省很多不必要的css。

fixed layout VS fluid layout

fixed layout

fluid layout fixed layout(上圖),固定尺寸,一般上不建議用固定的尺寸。fluid layout(下圖),用百分比來控制寬度是比較靈活的,bootstrap正是用這種。

用row來包圍col,製造橫向的結構,另外row的一個用途是,消除col之間的gap,從前的方法是,只是刪除最後一個col的padding或margin,最經典的莫過於是一些很奇怪的class例如omega之類的。而bootstrap的邏輯則是用row和col的配合來解決這個問題。

好處是,你可以減少寫多一個class來消除最後一個,你可以任意移動任何col,假設你會使用到isotope之類結構,你則可以隨意改變col的寬度(只需要改數字),即可。兩邊的空隙是15px所以兩個div之間的空隙是30px。

有gap的結構如下,不需要特別多加什麼,就直接加入class就好

如果要製作無gap的架構,可以直接-15直接消除,或者利用col來配合一個class,并利用背景屬性來搭配製造無gap的視覺效果。

客制化你的style,只是選擇你要的css下載

如果你會使用less,你可以直接用less來客制化你的Bootstrap css,不過還有更簡單的你可以透過網路版來修改全部屬性 http://getbootstrap.com/customize/

你可以選擇只是要那些css(多數開發者最常用到的只是grid,你可以只是下載grid),不過其實其他的elements也是考量的很全面的,有時間再來和大家分享。你也可以直接編制自己的grid數量,例如改為16欄,gap的寬度,break point等等。

總結

1,Bootstrap並非唯一能製造RWD的framework。
2,css RWD的原理是利用@media queries和百分比(或固定寬度)。
3,你可以客制化你的Bootstrap。