不只會用 Bootstrap, 更要會客製化 Bootstrap.

打造你的 Twitter Bootstrap

佛心的 Twitter Bootstrap  讓你可以快速的建構以功能性為主的網站，在用心看完了官方文件後你很快就可以開始動手作了。若是有些不清楚的話，再把官方網站的 source code 看清楚一下，也就沒有太大的問題了。 Bootstrap 可以說是這幾年最夯的 CSS Framework 。

但是如果要把 Twitter Bootstrap 拿出去見人，你不可能不做任何更改，雖然官網讓你可以做簡單的客製化，但是速度太慢了，還是把 Source Code Download 下來馬上調整，馬上看比較即時。而如果想要對既有的元件做調整的話，在官網上是不可能做到的。因此，本篇文章會介紹如何乾淨地客製化 Bootstrap.

開工前的準備

想要修改 Bootstrap, 你首先要懂的是 LESS, 所有你在 CSS 上的不滿足， LESS 都可以滿足你。若是要把一個網站外觀做有系統管理，LESS 絕對是你不可缺少的工具。 由於 LESS 是 CSS 的超集合，所以你可以先把 LESS 當CSS 來寫，再一點一滴嘗試LESS 的語法，最後就可以無痛地學會 LESS 了。

而為什麼 Bootstrap 要用 LESS呢? 官方的說法是因為編譯的時間比同類的工具短，語法也比較簡單。而且 Bootstrap 的作者群們改得動LESS 的 Compiler，遇到問題可以立刻解決。 所以原因相當的單純，並不是因為 LESS 在語法有什麼厲害的特色。

因此想修改  Bootstrap 的 LESS 程式碼，你必須要裝好 LESS 的 compiler : lessc。 (不是 less 喔，less 是 unix 的 pager, 我有一個好朋友有一次昏頭了一直用 less 來編譯…)

npm install -g less

上面的步驟就可以把 lessc 裝好。 有了lessc你就可以開始改動Bootstrap了 !

第一步: Clone

git clone https://github.com/twitter/bootstrap

clone 下來以後，less 的資料夾就是放著我們需要的程式碼。 而你只要下 lessc less/bootstrap.less 就可以把 bootstrap.css 產生出來了。 而我們就是以這個  bootstrap.less 為基礎開始修改。

第二步: 了解 bootstap.less 的結構

bootstrap.less 裡的內容不少，但分類清楚，每一個檔案都有寶可以挖。以 mixin.less 所提供的 mixin 來說，裡面就有下面這些好物:

• clearfix : 讓你的 float block  的 container 有正常的高度
• center-block: 讓你的元素置中
• text-overflow: 讓過長的文字以 …. 的型式呈現
• border-radius: 讓你有圓角框可以用

bootstrap.less  裡的 variables.less 裡面是把各式顏色，大小，字型都抽出來，讓你可以方便調整。比如說，若你想要有下面這個紅紅的 bootstap navigation bar, 只要找到 navbarInverseBackground 相關的的變數，再把顏色調成紅色就好了。

第三步: 乾淨地修改 Bootstrap 的元件

在 variable.less 內可以修改的東西是有限的，不可能你所有想調整的東西都剛好抽出來放在 variable.less 裡面。這時你可以依照 bootstrap.less 裡面的的檔案去做你想做的調整。 不過不要動到 less 資料夾是比較好的做法，請像是物件導向的繼承 一樣( OOCSS ) 特化出一個新的 component 吧。

想要乾淨地做這件事，那麼不要更改 Bootstap less 裡的程式碼，要另外再把  bootstap.less copy 出來。若是有 component 需要調整，要再增加新的Less  檔，並且為了新的 component 再加上新的 class name.

以下以 dearbnb.com 的手機板為例子:

上面這個 accordion 元件 (三心允諾，民宿記敘那個區塊)就是我們修改過的版本。下面就是修改的過程。

首先，讓你的Project Layout 變成這樣如下圖。把 bootstrap.less copy 出來，然後建立一個 customized_less 的資料夾

再來，因為我們把 bootstrap.less 的位置換了，所以要微調一下 bootstap.less 。

就如上圖，原本 Bootstrap 的程式碼放在 less  資料夾裡面 , 而有我們額外更動的部份，就放在 customized_less 裡。

放在customized less 裡面，你可以清楚的知道你改了什麼。而且如果 Bootstrap 昇級了，你就直接覆寫 less 裡的檔案就好了，你所增加的程式碼不會受影響。

OOCSS

回到剛剛的需求，如果我們想要更動 accordion 這個元件，要先觀察一下 accordion 的組成。來知道該如何特化, 並且以 OOCSS 的方式來做修改:

上圖我們就依照自已的需求，特化了 bnb-accordion 這個 class。以不去更動原本的 Bootstrap 程式碼為原則，這些新加入的程式碼就也當然會放在 customized_less 這個資料夾裡面。

結語

只要知道上述的作法，就可以開始調整你自已的 Bootstrap 了，而除了 lessc 之外，也可以試試 Codekit 這個工具來幫忙開發。 而如果想看到更實際的例子，可以參考 Hitcon 2012 的 source code 相信一定大有幫助。希望大家可以當個快樂的前端工程師，有什麼想法，歡迎留言指教。

tim_hsu

人生本是賤，欠操欠磨練