RWD 實戰篇

前一段時間有介紹過 RWD 的概念，基本上就是網站排版依據視窗大小有所調整的設計。這一次主要介紹其中一種實作方式，利用 Grid 的概念。 是 CSS Framework 因應 RWD 而產生的一種慣例，將網站寬度默認為 欄位，根據不同的尺寸調整使用欄位的寬度。Bootstrap 是一個相當熱門的 CSS Framework，其中也有簡單好上手的 Grid。

原理與概念

Bootstrap 中，Grid 默認為 12 格，如下圖所顯示：

Bootstrap Grid system

使用方法是這樣綁定在 CSS 中： col-_{screen}_-_{size}_ ，表示為在螢幕大小為 {screen} 的情況下，將顯示 12 格中的 {size} 格寬。

  • {screen} 有四種大小

    • xs: Extra small devices Phones (<768px)
    • sm: Small devices Tablets (≥768px)
    • md: Medium devices Desktops (≥992px)
    • lg: Large devices Desktops (≥1200px)

  • {size} 為小於等於 12 的整數，當累計為 12 剛好為一整個寬，超過則自動換行。

基本佈局

所以根據上面的規則，Bootstrap 的 html 寫法長這樣。 Bootstrap 的慣例會將最外層的 div 視為 container ，裡面放 row 表示為一行，下一層再使用 col 去分配 Grid 寬度。

1
2
3
4
5
6
7
8
9
<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>      
  </div>
  <div class="row">
    
  </div>
</div>

其他用法

  • offset:
    • 左邊空幾格
1
2
3
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>

offset

  • push/pull
    • push 是往右邊推
    • pull 是往左邊推
1
2
3
4
<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>

push/pull

Example

See the Pen RWD by Bootstrap by weiyuan (@v123582) on CodePen.

Reference

[1] Bootstrap
[2] Bootstrap RWD 使用方法及原理

License


本著作由 Chang, Wei-Yaun (v123582) 製作，
以創用CC 姓名標示-相同方式分享 3.0 Unported授權條款釋出。