Bootstrap 2.x 與 3 的重要差異(二):grid系統的變革

上一篇 提到了 Bootstrap 2.x 到 3 整體來說有那些變動,本文把焦點放在新的 grid system。

grid系統的變革

移除了 .container-fluid 和 .row-fluid,全部都是 fluid 容器

v3 沒有分 fluid 和 non-fluid ,所以移除了 .container-fluid.row-fluid 兩個大框架容器,所有都是 fluid。

例如做 nesting column 時,大的 grid 裡面某一塊要包小 grid ,v2.x 裡面一層得寫 .row-fluid,才能在小區塊內使用12欄 grid;但 v3 只要 .row > .row > .row…… 一層層包下去就行了。

各種裝置可以有不同的佈局

v2.x 和 v3 的 grid 都是12欄。不同之處在於,v2.x 裡,grid 系統的 .span* 固定了各欄在頁面上的比例,跨裝置也一樣,比如說某一頁中間欄佔2/3,右邊側欄1/3,就這樣佈局:

 <div class="row">  
    <div class="span8"></div>  
    <div class="span4"></div>  
 </div>  

desktop (v2.x)

3-2-1

mobile (v2.x)

3-2-1-phone

這樣雖然簡單易懂,但如此一來在桌面或平板,中欄和右欄的比例都維持一定,在手機又全部展開成單欄 (Stacking) ,佈局上的彈性少一點。

實做上我遇過的問題,就是縮小到tablet 版面的狀況下,右側欄的內容太擠。舉例來說,v3 之後有機會改成:桌面版中欄與側欄是 3 : 1,到了平板,中欄與側欄改為 2 : 1 。

v3 裝置間有四個切換階段:

  • mobile – xs ( <768px )
  • tablet – sm ( 768~991px )
  • desktop – md ( 992~1170px )
  • large desktop – lg ( >1170px )

所有和 responsive 相關的 class 都以 xs, sm, md, lg 為後綴,如 .col-md-6 .hidden-xs,命名模式一致比較好辨認。

四個階段中,你可以設定混合的佈局,例如同一頁的桌面版有三欄,每欄占1/3;但到手機版時每欄各占版面的1/2,就可以這樣設定:

 <div class="row">  
    <div class="col-xs-6 col-md-4"></div>  
    <div class="col-xs-6 col-md-4"></div>  
    <div class="col-xs-6 col-md-4"></div>  
 </div>  

desktop (v3)

3-1-1-1

mobile (v3)

2-1-1-phone

.col-xs-*  是專為手機版面分兩欄以上而準備的,這樣就手機也能使用 grid,不限於單欄。

如果要 desktop, tablet, mobile 佈局都不同也沒問題,例如我要做 desktop 和 tablet 都三欄均分,mobile 變成兩欄

 <div class="row">  
     <div class="col-xs-6 col-sm-4 col-md-4"></div>  
     <div class="col-xs-6 col-sm-4 col-md-4"></div>  
     <div class="col-xs-6 col-sm-4 col-md-4"></div>  
 </div>  

desktop, tablet (v3)

3-1-1-1-mix

mobile (v3)

2-1-1-mix-phone

這樣就是『desktop 和 tablet 都三欄均分,mobile 變成兩欄』的意思。

平移用的 offset 依然存在,只是不再是分開的 class  .offset*,而是嵌在 class name 中間像 .col-md-offset-4 這樣。

如果不想這麼複雜,而想沿用 v2.x 的 grid 行為,只要單獨設 .col-md-* 就行了,到手機版時也會順利變成單欄。

下面這張表應該好好看一下,這是 Bootstrap 3 官方文件 grid system 新行為的大整理

  • Horizontal at all times: 不管在任何裝置上,欄都是並排
  • Collapsed to start, horizontal above breakpoints: 最小裝置是單欄,到了切換點以上欄就並排

Grid options

grid-table

新舊 class 名稱的完整對照,網路上已經有很多文章刊登,如 Bootstrap 3 Migration Guide ,就不重覆貼了。

非 responsive的做法

有時候還是需要不跨裝置的版面,要關掉預設的 responsive 機制,有幾個手動的步驟要做:

原文連結 Disable Responsvie

  1. 拿掉<meta>裡的 viewport 設定。
  2. 改掉 .container 的 max-width 並確保它不作用,改成 max-width: none !important;。再設定一個固定寬度,如 width: 970px。這些設定順序要在後,才能蓋掉 Bootstrap 的預設。
  3. 如果用了 navbar,要關掉所有讓 navbar 在不同裝置收合的 css 和 javascript  (太多要改!! )。
  4. 只用 .col-xs-* 來設定欄,因為它從手機到桌面各欄都能並排,不會 stacking 成單欄,而且會照比例放大。
  5. IE8 還是要用 respond.js,以讀取 media queries。

實例 Non-responsive Grid Demo

其實挺麻煩的,畢竟 Bootstrap 天性是個 responsive framework 呀。

《資料來源》

http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
http://bootply.com/bootstrap-3-migration-guide
以下這篇是 Bootstrap 3 釋出後google到的第一篇中文心得,感謝這位前輩的引導
http://indreamhk.blogspot.tw/2013/06/bootstrap-3.html

廣告

Bootstrap 2.x 與 3 的重要差異(一):Overview

Bootstrap 從 v2.x 版更新到 v3,感覺像是全新的另一套 framework,主要是核心部分的 grid 系統完全翻修,提供各個裝置佈局上更多彈性。另外,以 mobile 為先,預設值都以mobile為基礎來考量。官方部落格 提到 v3 有14項嶄新特色,本文就影響較大的幾項做個整理,如果有精通 Bootstrap 的前輩路過,還請不吝指正。

grid系統的變革

v3 移除了 .container-fluid.row-fluid 兩個大框架容器,因為全部都是 fluid 容器 。最大的躍進是,各種裝置可以有不同的佈局,在 v2.x 裡 grid 的欄在頁面上的比例是固定的,比如說某一頁中間欄佔2/3,右邊側欄1/3,手機又全部展開成單欄 (Stacking)。

實做上我遇過的問題,就是縮小到 tablet 版面的狀況下,側欄的內容太擠;手機全部展開成單欄,內容又太寬鬆,尤其在大尺寸手機上看起來相當怪 。這樣雖然簡單易懂,但佈局上的彈性少一點。

到了 v3,我們可以設定混合的佈局,例如同一頁的桌面版有三欄,每欄占1/3;但到手機版時每欄各占版面的1/2。

desktop (v3)

3-1-1-1

mobile (v3)

2-1-1-phone

若不需要跨裝置的版面,要關掉預設的 responsive 機制是可行的,有幾個手動的步驟要做。其實挺麻煩的,畢竟 Bootstrap 天性是個 responsive framework 呀。

Grid system 的變化細節很多,這留到 下一篇 去講。

跨瀏覽器支援

瀏覽器方面,v3 不再支援 IE7 和 Firefox 3.6,而 IE8 因為無法讀取 media queries,仍然需要 respond.js 使其正常運作。

在實做期間發現 respond.js 有個地雷,就是如果以 @import 方式從一個 css 讀入另一個 css,respond.js 無法運作於 @import 進來的 css 。

外觀因應潮流

佈景主題

Bootstrap 3 有新的 theme,但不是整套 framework 有主題可供選擇,而是部分元件可依使用情境,藉由抽換 class 來顯示不同的色系。例如 panel 就有各種顏色,以下這頁是 Theme 的大閱兵:

Bootstrap Theme Example

整體來說,Bootstrap 3 的設計風格因應業界趨勢,朝向扁平化發展。就像 iOS 7 一樣,有大陸開發者戲稱『霧濛濛看起來就像北京的天氣』,是有抓到幾分這種感覺啦。然而,對需要重度客製化的網站而言,輕量的預設樣式是一大福音,Bootstrap 2.x 就因為許多漸層、濾鏡、圓角設定,必須自寫大量 css 才能 override 它。

icon字型 (iconfont)

Bootstrap 2.x 用 png 圖片製作,現在進步到先將 icon 製作成字型檔 (eot, svg, ttf, woff),然後在 bootstrap.css 以內碼方式引入,像這樣:

 .glyphicon-asterisk:before {  
   content: "\2a";  
 }  

字型轉 class, Bootstrap全幫我們做好了,使用時 html 要組合兩個 class,例如

 <span class="glyphicon glyphicon-thumbs-up"></span>  

CSS元件的變動

navigation 翻修

navigation 不需要再以 .navbar-inner 包覆,少了一層免除操作困擾。有個蠻好用的新東西叫 .nav-justified,可以做寬度均分的橫向選單。還有相當流行的 fix-to-topfix-to-bottom navigation,也就是網頁捲動時,選單可以黏在視窗上方或下方,這樣就不用自己找套件或多寫 css 和 javascript 了。

新增 panel、list-group、移除 accordion

  • panel 的用途,主要是把其他物件整包放進框框裡,表單、選單、說明框都可以丟進去。
  • list-group 取代原來的 nav-list ,選單內有更多變化,可裝進計數器、內容簡述等等,很顯然是為 mobile 介面準備的。
  • accordion 被移除了,合併到 collapsible panel 裡,結構上變成以 collapse.js 去操作 panel。

另有幾項小的預設值變動,像是 image 不再自動 responsive,除非加上 .img-responsive 才自動伸縮;又如 button 要加上 <button class="btn btn-default“> 才有預設 button 樣式。

javascript元件的變動

  • 原來做輸入框自動完成的 Typeahead 拿掉了,直接用 Twitter Typeahead
  • modal 對話框,有時當 lightbox 來用,在 v2.x  內容高度是固定的,現在改為內容可捲動,且適應 viewport 的高度。
  • Tab 不用再寫 data-toggle 屬性。
  • 所有的 javascript event 都加上了 namespace ,以避免衝突。

其他

v3 提供超強的客製原始碼工具,可自己取捨一些元件,連 LESS 的變數都可以先設,然後輸出成 .less 檔。目前還沒有 SASS 版本釋出,真令人望穿秋水啊。

《資料來源》

http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
http://bootply.com/bootstrap-3-migration-guide
以下這篇是 Bootstrap 3 釋出後google到的第一篇中文心得,感謝這位前輩的引導
http://indreamhk.blogspot.tw/2013/06/bootstrap-3.html