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

廣告

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

  1. 引用通告: Bootstrap 2.x 與 3 的重要差異(一):Overview | 烏托比亞

  2. bootstrap 3 仍然有.container-fluid與.container兩種選擇。若要非 responsive的做法,可以應用bootstrap2,因為bootstrap 3設計本身就是以行動裝置為優先,bootstrap2則可以選擇是否載入RWD。

發表迴響

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

WordPress.com Logo

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

Twitter picture

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

Facebook照片

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

Google+ photo

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

連結到 %s