Twitter Bootstrap 到底好在哪裡?

Bootstrap 到 2014 年 6 月為止,是 Github上最火紅(最多人追蹤及clone)的 repo,知名的程度可見一斑。它可以說是身為網頁開發者一定要會的一個 Framework,即使進階的開發者或許並不一定會使用它,因為並不會用到 Framework 裡面所有的功能,但能夠知名到這樣的程度一定有他的原因。所以我們要問:Twitter Bootstrap 到底好在哪裡?

大家都知道 Bootstrap 很棒的是提供了很多UI的樣式(比瀏覽器原生的好看太多),包括單純的 HTML 標籤,以及多層架構所組成的組件(component),而有些組件還會需要搭配 javascript。但對我來說,上列這些是錦上添花的東西,真正選擇 Bootstrap 的原因以及它最需要注意的觀念是下面兩項:

  • 網格系統(Grid System)
  • 響應式設計(Responsive Design)

上面這兩項是你的網頁最根本的部份,這兩個地基打好,你的網頁會給使用者非常安心的感覺。

網格系統 Grid System


如上圖紅色區塊的部份,Bootstrap 中預設是把網頁內容分成12列,在每列的兩邊都有 padding,作為彼此之間的距離。

在建立自己的網格時,首先要決定把多寬的部份劃分成十二列,也就是 .container 。接著放入 .row 代表著一行,然後在 .row 的裡面使用 bootstrap 的語法 .col-螢幕尺寸-列數 來劃分出此行中各區塊的寬度。

<div class="container"> <!-- 定義整個網格的寬度 -->
    <div class="row"> <!-- 這是一行 -->
        <div class="col-md-8"></div> <!-- 這個區塊寬8個網格單位 -->
            <div class="col-md-4"></div> <!-- 這個區塊寬4個網格單位 -->
        </div>
    <div class="row"></div> <!-- 這是第二行 -->
</div>

在區塊定義中的 -md- 就牽扯到接下來要介紹的響應式設計。

響應式設計 Responsive Design

Bootstrap中有定義幾個 breakpoint(使用變數的方式,接下來會提到),把螢幕的尺寸劃分成

  • 極小 xs(479px 以下)
  • 小 sm(480px ~ 767px)
  • 中等 md(768px ~ 1199px)
  • 大型 lg(1200px 以上)

以上面的例子,如果希望區塊在各個大小的螢幕中有相對應的寬度,可以用以下方式:

<div class="col-xs-12 col-sm-10 col-md-8"></div>

這代表著這個區塊在極小的螢幕時佔了12格,小螢幕佔了10格,中型則是8格,而沒有定義的大型則是沿用上一區間的設定,也就是8格。

其實 col-xs-12 是非必要的。因為在極小的螢幕時(只有480px嘛),預設會把每一個區塊都變成佔滿一整行。如果你想挑戰人因極限的話,可以設定這種區塊 col-xs-2 試試。

有了基礎才能夠蓋高樓

把網頁的區塊都架構好,並思考在各種螢幕尺寸的頁面版型後,你的網頁根基就算大功告成了!接下來就可以在各個區塊內加入你想要的細節,盡情的揮灑吧!

另一個重要觀念

還有一個很重要的實作觀念是使用變數(variable),這會讓你的設計更加的有系統性,你只修改變數,就可以讓所有相關的樣式都隨之改變。最明顯的例子就是網站的主色(primary color),這一個顏色會影響整個網頁的調性,它會套用在包括按鈕、連結、邊框甚至是背景色,如果不使用變數,一個一個改是很累人的事啊...

首先定義變數,使用SASS作為範例:

$brand-primary:	#your-brand-primary-color

之後在樣式中引用

.my-div: { color: $brand-primary; }

如果你去看Bootstrap定義變數的原始碼檔案,會發現有個!default的後綴:

$brand-primary:	#428bca !default;

這個代表了,你可以從後方來覆寫它,並影響已經定義好的class。這個的好處是,你可以import了整個bootstrap的樣式後,再自己定義專屬的變數。舉例來說,本來要在不變動bootstrap的情況下覆寫變數定義是這樣:

// 導入核心
@import "bootstrap/variables";
@import "bootstrap/mixins";
    
// 導入自定義的變數
@import "_my_variables";

// Boostrap 原生的 class
@import "bootstrap/variables";
@import "bootstrap/mixins";
.
.

!default的情況,這樣寫就可以:

// 導入樣式
@import "bootstrap"; // 所有的bootstrap 樣式
@import "_my_variable"; // 我的自定義變數

以上就是Bootstrap好用的地方,網格系統和響應式設計也是它要告訴我們的很重要觀念。摸熟了之後,相信你一定可以架構出專業又有質感的網站!