2015/4/13

Bootstrap Grid System

Bootstrap 以 grid system 提供網頁畫面版面切割的功能,官方手冊上 Grid system 這個段落,將此功能定義為 a responsive, mobile first fluid grid system,這表示 grid 是符合 Responsive Web Design 的系統,而且在行動版畫面是以比例的方式 fluid 為主,如果是一個設計良好的 fluid 頁面,那麼在手機瀏覽該頁面時,就不會看到水平方向有產生 scroll bar,該說明內容也明確地提供了使用 grid 要注意的設定。

要注意的是,bootstrap 的 grid system 在 v2 與 v3 有一些不同的地方,以下我們只討論 v3 的 grid system。

fixed/fluid/elastic layout

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

fixed layout 是以固定的寬度 px 設定元件的寬度,而 fluid layout 是以總寬度的百分比例,設定元件的寬度。elastic 則是認為,要混合使用 fixed 與 fluid layout。

elastic layout 認為除了考慮螢幕寬度之外,還要考慮 resolution,低解析度的螢幕就該要配置較大尺寸的文字與圖片。

以 bootstrap grid system 來說,是使用 fluid layout 來設計頁面 layout。因為它只考慮了寬度,沒有考慮解析度。

grid system

以 Grid 的方式設計網頁,並不只有 bootstrap 才提供這樣的功能,目前在討論 Responsive Web Design 時,都已經習慣以 grid 的方式進行網頁設計,所以有很多 web framework 都支援 grid system,例如 960gssusyblueprint

當 web designer 與 programmer 都能以 grid 的方式,進行網頁設計,這樣就能對網頁 layout 能有共同的認知,而不會在 web desinger 切割的 layout 圖片在實際上放入網頁時,發生偏移無法對齊的問題。

不過同樣都是在使用 grid system,必須要注意的是,共用的 grid 規則為何,因為每個 framework 使用的 gutter 與 padding 不一樣。

  1. 頁寬共分為幾欄,bootstrap 為 12 欄
  2. 欄和欄之間的間距 gutter,bootstrap 的 column 前後的 padding 為 15 px,所以 gutter 就是 15+15 = 30 px
  3. 主要文本和邊緣的間距 grid padding

ref:
使用 grid system 來設計你的網頁
Grid 的運用:PS外掛
Using the 960 Grid System as a Design Framework

bootstrap grid system

grid system 是以 rows 與 columns 的組合,建立頁面的 layout。

  1. 假設每一頁可切割為 12 個 columns
  2. row (行) 必須放在一個有 .container (fixed-width) 或是 .container-fluid (full-width,滿版,以比例方式設定欄寬) 的 div 中

  3. 類似 col-xs-6 的 css class,用來定義 column寬度,並放在 row 裡面,網頁內容放在 column 裡面

  4. grid columns 總共有 12 個,可以指定 3個 .col-xs-4 用來填滿 12 個 columns
  5. 如果一個 .row 有超過 12個 columns,則超過的部份就會自動折行

Grid Options

-- Extra Small devices (Phones) (<768px) SMall devices (Tablets) (>=768px) Medium devices (Desktops) (>= 992px) LarGe devices (Desktops) (>=1200px)
Grid Behavior 永遠都是 horizontal 一開始是收合的,如果超過寬度的設定值,就會顯示出來 同左 同左
Container width none(auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12 同左 同左 同左
Column width auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column) 同左 同左 同左
Nestable Yes 同左 同左 同左
Offset Yes 同左 同左 同左
Column ordering Yes 同左 同左 同左

Nestable 就是在 row, column 裡面,可再加入一層 rows, columns,就像是在一個 table 的 column 裡面再放進一個 table
Offset 就是位移,當設定了 .col-md-offset-4 ,這個區塊就會向右位移 4 格 columns,兩個 columns 中間多了一塊空白區域
Column ordering 就是可以改變 column 的前後順序,當設定了 .col-md-push-3 ,則會在 .col-md 有作用時,將該區塊往右邊 push 3 格

grid system 的範例

有關 grid system 的範例可查閱這兩個網址
bootstrap grid
bootstrap grid examples

接下來,列出一些簡短的範例紀錄使用方法

當 md 有作用時,分為 8:4 兩塊

<div class="container">
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
</div>

同時支援 Mobile, Desktop 的樣式,Mobile 時為 12:6,Desktop 時為 8:4

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

同時支援 Mobile, Tablet, Desktop 的樣式,Mobile 時為 12:6,也就是兩行,Tablet 時為 6:6,Desktop 時為 8:4

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

同時支援 Mobile, Tablet 的樣式,Mobile 時為 6:6,因為加上了 clearfix 與 visible-xs-block,所以 xs 的部份重設了,就不會折行,Tablet 時為 4:4:4

<div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

支援 Tablet,第二區塊,會往右位移 4 格

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

Nesting columns,把 row 放入 col 裡面

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Column Ordering: 利用 .col-md-push- 與 .col-md-pull- 改變區塊的順序,第一塊大小為 9,往右 push 3 格,第二塊大小為 3 ,往左 pull 9 格

<div class="row">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Responsive utilities: visible hidden

Responsive utilities 為了快速建立 mobile-friendly 的網頁,div 元件還可以根據 device 的狀態,來決定要 顯示 或是 隱藏。

css class devices
.visible-xs-* Extra small (less than 768px) visible
.visible-sm-* Small (up to 768 px) visible
.visible-md-* Medium (768 px to 991 px) visible
.visible-lg-* Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden
.visible-print-* Visible when print
.hidden-print Visible only to browser not to print

所有 .visible-device- 後面都可以加上 css 的 display property value: inline, block, inline-block,換句話說,.visible-xs-* 的設定就可以是 .visible-xs-inline 或是 .visible-xs-block 或是 .visible-xs-inline-block

References

Bootstrap Grid System in w3schools
Bootstrap 2.x 與 3 的重要差異(二):grid系統的變革
15 款相當不錯的 Twitter Bootstrap 開發工具

使用 Bootstrap 建置雛型網站
簡單的Bootstrap效果(v 3.0.0 / v 3.2.0版)與入門教學 (#2 範例修正與下載)

淺談CSS Grid system
《LayoutIt!》視覺化Bootstrap線上編輯器

Twitter Bootstrap 框架簡化網頁開發、兼容不同裝置,讓網頁工程師兼設計師!