Twitter Bootstrap 到底好在哪裡？

by jcc

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好用的地方，網格系統和響應式設計也是它要告訴我們的很重要觀念。摸熟了之後，相信你一定可以架構出專業又有質感的網站！