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

廣告

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

  1. 引用通告: Bootstrap 2.x 與 3 的重要差異(二):grid系統的變革 | 烏托比亞

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s