如何更高效地定制你的bootstrap

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/）或者中文網（http://less.bootcss.com/  http://www.bootcss.com/p/lesscss/）學習一下，很簡單，了解並學會使用它用不了多長時間。

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

當然，這種方法也有它的優缺點，

優點：相比上一種方法，它簡便了你對整體網站的修改。

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

 

 

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

首先獲得bootstrap的源碼，

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

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

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

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";

// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

// Utility classes
@import "utilities.less";
@import "responsive-utilities.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文件一樣，它使用下面的命令來引入上面那兩個自定義文件（記住要保證文件正確的引用順序）

@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沒有錯誤就可以了。

 

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

 

---

 

寫於最后：

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