bootstrap已經作為前端開發必不可少的框架之一，應用bootstrap使得我們對布局、樣式的設定變得非常簡單。
但bootstrap提供的默認樣式往往不能滿足我們的需求，從而定制化bootstrap成為我們經常需要做的工作，本文就如何更高效更可維護地定制bootstrap做一下探討。
在你的button 中加入bootstrap的class: btn btn-primary,就可以將默認的button（左邊）變成右邊的樣式。可如果我們想應用自己的樣式呢？比如我們想要擁有圓角的button。
通常，我們可以直接覆蓋bootstrap的樣式。
我們在自己的項目目錄下新建my-custom.css文件，加入如下代碼：
.btn {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
將my-custom.css文件引用放到bootstrap.css文件后面，我們定義的btn樣式就會覆蓋原有的樣式（注：這里的‘覆蓋’指的是增量疊加式的覆蓋）。
<link rel="stylesheet" href="boostrap.css">
<link rel="stylesheet" href="my-custom.css">
但這種方法有它的優缺點，
優點：不會改變你的工作流程。你可以快速直接修改你的樣式，即使是你的網站引用了其他的類似bootstrap的框架樣式，你都可以在同一個地方進行統一的定制。
缺點：但是對于更徹底的修改(比如重新設計導航欄)或是非局部的修改(比如修改適用于整個網站的高亮顏色)來說，這樣東一塊，西一塊的覆蓋樣式更像是一種打補丁式的解決方案。而且你的新樣式要添加到Bootstrap的默認樣式表里，讓本已經100 KB的文件越發臃腫。如果你不僅僅想要做一些覆蓋，那就要考慮一種更具擴展性的方法了。
另一種方法是生成一個自定義構建的bootstrap。
我們可以使用官方的構建器，你可以對bootstrap中樣式變量進行自定義。如下圖所示
bootstrap 是基于less定制的，如果你不熟悉less語法，建議到其官網（http://lesscss.org/）學習一下，很簡單，了解并學會使用它用不了多長時間。
定制好你的變量后點擊download按鈕就會生成一套屬于你的bootstrap框架了。同時，網上還有很多類似定制bootstrap的網站，如果你不習慣官網的可以去這其它的網站試試，比如Bootswatchr網站使用變量來組織，而StyleBootstrap則使用組件。BootTheme添加了扔骰子特性來隨機設置值。如果幸運女神不站在你這邊，Lavish能夠根據你提供的任何圖片來生成一個主題，PaintStrap則是根據已有的配色方案來生成。
當然，這種方法也有它的優缺點，
優點：相比上一種方法，它簡便了你對整體網站的修改。
缺點：首先你很難一開始就確定網站所有的樣式風格，當然你可以在確定好了后再生成一個最終版本。所以這就引入一個問題，如果你還要時不時更換你的樣式，你同樣需要找到bootstrap樣式源文件編輯，你可能還要用到第一種方法，比如我要使用圓角的帶陰影的button，光定制就不能滿足我的需求，再者，如果面對bootstrap升級的問題，你還需要重新根據你的樣式構建一個新版本的bootstrap，這樣要真的做起來，會非常的麻煩。
最后一種方法是深度定制bootstrap less
首先獲得bootstrap的源碼，
打開源碼，你會發現Bootstrap的樣式是用LESS而不是CSS寫的。LESS 是一種動態樣式表語言，相比于CSS，它支持多種優秀特性，包括選擇器嵌套，創建變量(就像在上面生成器中使用的)。一旦寫完，你可以選擇將LESS代碼預先或在運行時編譯成 CSS。如果你喜歡 Sass，可以使用這個適用于Sass的Bootstrap。
在 less 文件夾中，你會看到許多按照組件來劃分的 LESS 文件。
實際上，bootstrap是通過編譯bootstrap.less這一個文件而生成整個bootstrap.css文件的。我們看到bootstrap.less的作用僅僅是引入其他文件。這樣，我們定制化的工作就好辦了。
以下這些文件是你要注意的：
bootstrap.less:
這個是核心文件。它用來引入其他文件，最終由你來編譯它。
reset.less:
始終是最先引入的文件。
variables.less 和 mixins.less:
這兩個文件總是同時出現，因為其他文件都依賴于它們。前一個文件包含了在生成器網站上使用的相同的變量。
utilities.less
這個文件總是最后引入，你可以把想要覆蓋的類寫到這里。
我們定制的思路就是，找到我們需要定制的組件和相對應的變量，對其修改，然后編譯成我們自己的bootstrap.css即可。
下面講講具體實現方法。
確保你已經安裝好Less, 為了不讓我們修改的內容與原始文件重合在一起，我們需要**模塊化的修改。
首先下載bootstrap源碼，下載后就不需要對其做任何的改動了。我們單獨建立一個文件夾（文件目錄只要能引用到bootstrap的less文件就可以），取名為custom-bootstrap，其中包含以下三個文件：
custom-variables.less:
這個文件包含你要定制的變量。
custom-other.less:
這個文件中包含了那些無法通過修改變量完成定制的內容，比如增加或禁用button的text-shandow屬性。
custom-bootstrap.less
這是新的「核心」文件。我們將把它編譯成CSS。與原始的 LESS文件一樣，它使用下面的命令來引入上面那兩個自定義文件（記住要保證文件正確的引用順序）
1 @import "../bootstrap/less/bootstrap.less"; //這個引用到原有的bootstrap文件
2 @import "custom-variables.less";
3 @import "custom-other.less";
4 @import "../bootstrap/less/utilities.less"; //我們同樣要引用原生的utilities.less，因為我們要保證該文件始終最后一個被導入
這時，我們只要編譯custom-bootstrap.less就可以了。
有一些需要注意的是，custom-variables.less 不需要拷貝原有文件的所有內容，只需要拷貝和你要定制的組件相關的變量就可以了，如果你這樣做了，單獨編譯custom-variables.less或custom-other.less會提示缺少變量定義的錯誤，但這沒關系，你只要保證編譯custom-bootstrap.less沒有錯誤就可以了。
這種方法的優點在于，將定制的變化與原有庫代碼很好的隔離，卻又不失可維護性。即使今后升級bootstrap版本，我們也不要擔心重新構建樣式框架了。
