如何高效地定制你的bootstrap

bootstrap 已經(jīng)作為前端開發(fā)必不可少的框架之一，應用bootstrap使得我們對布局、樣式的設定變得非常簡單。

但bootstrap提供的默認樣式往往不能滿足我們的需求，從而定制化bootstrap成為我們經(jīng)常需要做的工作，本文就如何更高效更可維護地定制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">

但這種方法有它的優(yōu)缺點，

優(yōu)點：不會改變你的工作流程。你可以快速直接修改你的樣式，即使是你的網(wǎng)站引用了其他的類似bootstrap的框架樣式，你都可以在同一個地方進行統(tǒng)一的定制。

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

另一種方法是生成一個自定義構建的bootstrap。

我們可以使用官方的 構建器 ，你可以對bootstrap中樣式變量進行自定義。如下圖所示：

bootstrap 是基于less定制的，如果你不熟悉less語法，建議到其官網(wǎng)（ http://lesscss.org/ ）或者中文網(wǎng)（ http://less.bootcss.com/ http://www.bootcss.com/p/lesscss/ ）學習一下，很簡單，了解并學會使用它用不了多長時間。

定制好你的變量后點擊download按鈕就會生成一套屬于你的bootstrap框架了。

當然，這種方法也有它的優(yōu)缺點，

優(yōu)點：相比上一種方法，它簡便了你對整體網(wǎng)站的修改。

缺點：首先你很難一開始就確定網(wǎng)站所有的樣式風格，當然你可以在確定好了后再生成一個最終版本。所以這就引入一個問題，如果你還要時不時更換你的樣式，你同樣需要找到bootstrap樣式源文件編輯，你可能還要用到第一種方法，比如我要使用圓角的帶陰影的button，光定制就不能滿足我的需求，再者，如果面對bootstrap升級的問題，你還需要重新根據(jù)你的樣式構建一個新版本的bootstrap，這樣要真的做起來，會非常的麻煩。

最后一種方法是深度定制bootstrap less

首先獲得bootstrap的 源碼 ，

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

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

我們打開bootstrap.less文件看看里面寫的是什么：

 1 // Core variables and mixins
 2 @import "variables.less";
 3 @import "mixins.less";
 4 
 5 // Reset and dependencies
 6 @import "normalize.less";
 7 @import "print.less";
 8 @import "glyphicons.less";
 9 
10 // Core CSS
11 @import "scaffolding.less";
12 @import "type.less";
13 @import "code.less";
14 @import "grid.less";
15 @import "tables.less";
16 @import "forms.less";
17 @import "buttons.less";
18 
19 // Components
20 @import "component-animations.less";
21 @import "dropdowns.less";
22 @import "button-groups.less";
23 @import "input-groups.less";
24 @import "navs.less";
25 @import "navbar.less";
26 @import "breadcrumbs.less";
27 @import "pagination.less";
28 @import "pager.less";
29 @import "labels.less";
30 @import "badges.less";
31 @import "jumbotron.less";
32 @import "thumbnails.less";
33 @import "alerts.less";
34 @import "progress-bars.less";
35 @import "media.less";
36 @import "list-group.less";
37 @import "panels.less";
38 @import "responsive-embed.less";
39 @import "wells.less";
40 @import "close.less";
41 
42 // Components w/ JavaScript
43 @import "modals.less";
44 @import "tooltip.less";
45 @import "popovers.less";
46 @import "carousel.less";
47 
48 // Utility classes
49 @import "utilities.less";
50 @import "responsive-utilities.less";


View Code

實際上，bootstrap是通過編譯bootstrap.less這一個文件而生成整個bootstrap.css文件的。我們看到bootstrap.less的作用僅僅是引入其他文件。這樣，我們定制化的工作就好辦了。

以下這些文件是你要注意的：

bootstrap.less:

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

reset.less:

始終是最先引入的文件。

variables.less 和 mixins.less:

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

utilities.less:
這個文件總是最后引入，你可以把想要覆蓋的類寫到這里。
我們定制的思路就是，找到我們需要定制的組件和相對應的變量，對其修改，然后編譯成我們自己的bootstrap.css即可。

下面講講具體實現(xiàn)方法。

確保你已經(jīng) 安裝好Less , 為了不讓我們修改的內容與原始文件重合在一起，我們需要模塊化的修改。

首先下載bootstrap源碼，下載后就不需要對其做任何的改動了。我們單獨建立一個文件夾（文件目錄只要能引用到bootstrap的less文件就可以），取名為custom-bootstrap，其中包含以下三個文件：

custom-variables.less:

這個文件包含你要定制的變量。

custom-other.less:

這個文件中包含了那些無法通過修改變量完成定制的內容，比如增加或禁用button的text-shandow屬性。

custom-bootstrap.less

這是新的「核心」文件。我們將把它編譯成CSS。與原始的 LESS文件一樣，它使用下面的命令來引入上面那兩個自定義文件（記住要保證文件正確的引用順序）

@import "../bootstrap/less/bootstrap.less"; //這個引用到原有的bootstrap文件
@import "custom-variables.less"; 
@import "custom-other.less";   
@import "../bootstrap/less/utilities.less"; //我們同樣要引用原生的utilities.less，因為我們要保證該文件始終最后一個被導入

這時，我們只要編譯custom-bootstrap.less就可以了。

有一些需要注意的是，custom-variables.less 不需要拷貝原有文件的所有內容，只需要拷貝和你要定制的組件相關的變量就可以了，如果你這樣做了，單獨編譯custom-variables.less或custom-other.less會提示缺少變量定義的錯誤，但這沒關系，你只要保證編譯 custom-bootstrap.less 沒有錯誤就可以了。

這種方法的優(yōu)點在于，將定制的變化與原有庫代碼很好的隔離，卻又不失可維護性。即使今后升級bootstrap版本，我們也不要擔心重新構建樣式框架了。


如何更高效的定制bootstrap還有一點需要注意的就是，你要理解bootstrap組織代碼的方式以及如果更高效的書寫Less。