最近研究bootstrap ,看到來w3cplus上的一篇文章，感覺有用就收下了，原文連接在這里。

自從一年前Twitter推出Bootstrap以來，它的推廣程度就像火箭發射一樣節節攀升。這個廣受歡迎的CSS框架為眾多網站提供了響應式網格系統，預定義樣式的組件與JavaScript插件。

Bootstrap的設計初衷之一就是實用。當你要新建網站時，Bootstrap絕對是一個節約時間的利器，以至於許多龐大的組織比如NBC，NASA還有白宮都選擇了它。它甚至還可以讓我們之中不懂設計的人也能做出很體面的網站。

舉個例子，要想將下面左邊的默認按鈕變成右面漂亮的按鈕，你只需要增加兩個class：btn與btn-primary。

瀏覽器默認按鈕(左)與Bootstrap按鈕(右)

但如果你公司的logo使用了不一樣的藍色陰影呢？別擔心，你沒有必要堅持使用默認主題。這篇文章將介紹幾種自定義Bootstrap的方法來滿足你的需求，不管你是想微調一個按鈕，還是一個完整的主題。

來自於Bootswatch的三種Bootstrap主題

使用CSS覆蓋

最直接的方式是用CSS覆蓋掉Bootstrap的默認樣式。可以通過針對Bootstrap中使用的class編寫你自己的樣式來實現。比如說，可以通過增加以下代碼來使你的按鈕變得更圓滑：

.btn {
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
}

一個增加了border radius的自定義的Bootstrap按鈕。

為了能夠成功覆蓋，記得在Bootstrap的聲明之后增加你的代碼。

這種方法的優點在於它幾乎不會改變你的工作流程。即便使用了Bootstrap，你還是需要自己的樣式表來使框架適合你的內容。你可能沒有意識到，Bootstrap自己的網站還依賴了除Bootstrap框架外的上千行樣式。

但是對於更徹底的修改(比如重新設計導航欄)或是非局部的修改(比如修改適用於整個網站的高亮顏色)來說，這樣東一塊，西一塊的覆蓋樣式更像是一種打補丁式的解決方案。而且你的新樣式要添加到Bootstrap的默認樣式表里，讓本已經100 KB的文件越發臃腫。如果你不僅僅想要做一些覆蓋，那就要考慮一種更具擴展性的方法了。

生成一個自定義構建

一個替代方案是創建一個徹底的自定義構建。借助官方的生成器，你可以將框架內使用的關鍵變量設置成自己需要的值，比如說 @linkColor，@navbarHeight 和 @baseFontFamily。點擊生成器頁面底部的大按鈕就可以下載最終的樣式表。你甚至還能對框架包含的組件進行挑選，這樣能夠減少文件的體積。

一些能夠在官方生成器中設置的變量。

網上還有一些第三方生成器。與官方版本不同，它們提供了調整變量時的動態預覽效果。Bootswatchr網站使用變量來組織，而StyleBootstrap則使用組件。BootTheme添加了扔骰子特性來隨機設置值。如果幸運女神不站在你這邊，Lavish能夠根據你提供的任何圖片來生成一個主題，PaintStrap則是根據已有的配色方案來生成。

深入挖掘LESS

即便有上百個能定制的變量，你可能還是會發現生成器有諸多限制。或者你不想在瀏覽器中完成這樣的工作，因為這會減少與你的工作流程的集成度。無論處於哪種情況，都是時候深入研究下Bootstrap的源碼了。

獲得源碼

作為一個開源項目，Bootstrap的源碼可以自由(ZIP格式)下載。

打開源碼，你會發現Bootstrap的樣式是用LESS而不是CSS寫的。LESS 是一種動態樣式表語言，相比於CSS，它支持多種優秀特性，包括選擇器嵌套，創建變量(就像在上面生成器中使用的)。一旦寫完，你可以選擇將LESS代碼預先或在運行時編譯成 CSS。如果你喜歡 Sass，可以使用這個適用於Sass的Bootstrap。

在 less 文件夾中，你會看到許多按照組件來划分的 LESS 文件。

組成Bootstrap源碼的 LESS 文件

留意以下這些文件：

bootstrap.less:

這個是核心文件。它用來引入其他文件，最終由你來編譯它。

reset.less:

始終是最先引入的文件。

variables.less 和 mixins.less:

這兩個文件總是同時出現，因為其他文件都依賴於它們。前一個文件包含了在生成器網站上使用的相同的變量。

utilities.less

這個文件總是最后引入，你可以把想要覆蓋的類寫到這里。

打開 LESS 文件，看看Bootstrap是如何為每個組件設置樣式的。舉例來說，在buttons.less中，.btn-large類的規則是這樣的：

.btn-large {
  padding: 9px 14px;
  font-size: @baseFontSize + 2px;
  line-height: normal;
  .border-radius(5px);
}

如你所見，代碼看起來和 CSS 非常像。但它也確實有一些 LESS 獨有的功能。在font-size聲明中，變量@baseFontSize——在variables.less中聲明——與一個加法操作組合起來計算得到結果。在mixins.less中定義的.border-radius混合能夠自動幫你處理瀏覽器前綴。

你可以通過修改這些 LESS 文件來實現自定義。先從variables.less中的值開始，然后再嘗試下其余源碼中的樣式。好好享受吧！

安裝LESS

在你做完修改並准備查看效果時，你需要把文件編譯成 CSS。要完成這個工作，你需要先安裝 LESS。關於安裝有許多方式；對於初學者來說，我建議使用一個叫做LESS.app的客戶端程序。如果你喜歡命令行，可以選擇安裝包含Node Package Manager(NPM)的Node.js。然后執行如下命令：

npm install less

當安裝結束后，你可以這樣來編譯bootstrap.less：

lessc bootstrap.less > bootstrap.css

如果想編譯壓縮版本，使用這個命令：

lessc --compress bootstrap.less > bootstrap.min.css

無論你使用哪種方式編譯，編譯的目標只能是bootstrap.less，而並非其他任何文件。

模塊化你的修改

你可能注意到了上面方法的缺陷。那就是你修改的內容與原始文件糾纏在了一起。結果當Bootstrap不可避免的因為修復bug或增加新功能而進行升級時，你根本不可能將自定義的內容更新到新的版本上。

為了避免出現這個問題，你需要模塊化你的修改。這是我為Bootswatch制作主題時的采取的方法。

首先，我下載了Bootstrap的源代碼，把它的名字修改為bootstrap后原封不動的放好。我並沒有對它包含的文件進行任何修改，而是新創建了一個單獨的文件夾，取名為custom，含有如下三個文件：

custom-variables.less:

我從Bootstrap源碼中復制了一份variables.less並在這份拷貝中修改變量。

custom-other.less:

這個文件中包含了那些無法定義成變量的自定義內容。

custom-bootstrap.less

這是新的「核心」文件。我們將把它編譯成CSS。與原始的 LESS文件一樣，它使用下面的命令來引入上面那兩個自定義文件：

@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";

修改內容被分隔開后，你可以很輕松的升級到Bootstrap的新版本。只需要將舊bootstrap文件夾替換，再重新編譯即可。

我為這種方法創建了一個叫做swatchmaker的樣板文件。它還包含了其他內容，例如測試頁面和更新Bootstrap到最新版的命令，當修改被保存時執行自動編譯，還可以重置你自定義的內容。

技巧與技術

下面介紹一些在你自定義Bootstrap時可能會用到的技巧與技術。

了解Bootstrap。

閱讀官方文檔，熟悉所有組件，深入學習源碼。如果你經常需要自定義Bootstrap，在這些內容上的投入所帶來的回報將會物超所值。

先從變量開始

當你使用生成器或者直接編輯源碼時，先從它們支持的變量開始修改。你會發現它們就已經能夠滿足你的需求了。改變導航欄與基本顏色就是一個重大起步。

選擇調色板

考慮網站的配色方案，特別是主要與次要顏色。這里有些優秀資源 能夠提供幫助。你在調色板上選擇好后，可以將這些顏色設置為變量。這樣就不會看到散落在代碼中的十六進制顏色值了。

增加一些資源

紋理背景與自定義字體能讓世界變得大不相同。對於Web字體，你可以在代碼中的任何位置加入@import語句，LESS會自動將生成的CSS代碼提升到頂部。我比較喜歡將這些內容放到custom-other.less文件的頂部。

使用alpha透明

當增加box-shadow和text-shadow這樣的效果時，顏色使用RGBa來定義，為舊的瀏覽器做好降級處理，始終使用這樣的值。這會為你的組件增加內聚性。

匹配選擇器

當要覆蓋一個類時，試着采用Bootstrap中使用的選擇器。這會保證你的類與原始類保持同步，還避免了不斷升級的特異性戰爭。記住一點，特異性相同的情況下，后寫的選擇器生效。經過上面的模塊化處理，你的自定義內容將始終覆蓋掉原始內容。

封裝你的代碼

記住 LESS 允許嵌套選擇器。利用這個特性來封裝每個組件。我發現這對於保持代碼的整潔與可讀性有很大幫助。兩段效果相同的代碼里，不要這么使用...

.navbar .brand {
 color: @white;
}

.navbar .nav > li > a {
 color: @grayLighter;
}

試試這個：

.navbar {
  .brand {
  color: @white;
  }

  .nav > li > a {
   color: @grayLighter;
  }
}

善用混合(mixin)

LESS提供了便利的混合，比如說lighten()與darken()。Bootstrap在mixins.less中定義的內容也歸你支配。並且不要忘記，你可以隨時創建自己的混合。

配合實例學習

看看其他人是如何自定義Bootstrap的。例如，我所有的主題代碼都能從GitHub獲取到。

你想添加自己的技巧嗎？請分享在下面的留言中吧。

總結

如果你注重性能——通常來說應該如此——那么你最好在一個更輕量級的基礎上實現自己的解決方案。

但如果你的首要目標是盡快上線你的網站，或者前端開發並非你的強項，那么Twitter Bootstrap可能正適合你。許多人就是因為Bootstrap的人氣而紛紛轉向這個陣營。

鑒於Bootstrap在Web上的大量應用，你要學習它的所有優點並讓其為你所用。

擴展閱讀

1. How to Build a Website Using Twitter Bootstrap and SASS – Part 1
2. How to Build a Website Using Twitter Bootstrap and SASS – Part 2
3. GETTING STARTED WITH BOOTSTRAP: PART 1 OF SERIES
4. GETTING STARTED WITH BOOTSTRAP: PART 2 OF SERIES
5. GETTING STARTED WITH BOOTSTRAP: PART 3 OF SERIES
6. How to Customize Twitter Bootstrap’s Design in a Rails app
7. How to use Twitter Bootstrap to Create a Responsive Website Design
8. Twitter BootStrap:前端框架利器
9. CSS——Bootstrap From Twitter
10. Mark Otto（馬克奧托）的BootStrap.less
11. Preboot
12. Twitter Bootstrap Tutorials
13. The Best BootStrap Resources

——大漠

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

關於Sunnylost

08年開始自學java，09年加入北漂行列，從事Java Web工作，出於對JavaScript的喜愛，在2011年以外包身份進入新浪微博從事JS開發，目前就職於一淘。由於工作關系，逐步接觸CSS，開始完善自身的前端技能。歡迎隨時關注我：新浪微博

如需轉載煩請注明出處：

英文原文：http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/

中文譯文：http://www.w3cplus.com/css/customizing-bootstrap.html