如何更高效地定製你的bootstrap

時間 2019-11-11

標籤如何高效定製 bootstrap 欄目 Bootstarp 简体版

原文原文鏈接

bootstrap已經做爲前端開發必不可少的框架之一，應用bootstrap使得咱們對佈局、樣式的設定變得很是簡單。

但bootstrap提供的默認樣式每每不能知足咱們的需求，從而定製化bootstrap成爲咱們常常須要作的工做，本文就如何更高效更可維護地定製bootstrap作一下探討。

以下圖，在你的button 中加入bootstrap的class: btn btn-primary,就能夠將默認的button（左邊）變成右邊的樣式。css

可若是咱們想應用本身的樣式呢？好比咱們想要擁有圓角的button。前端

一般，咱們能夠直接覆蓋bootstrap的樣式。

咱們在本身的項目目錄下新建my-custom.css文件，加入以下代碼：git

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

將my-custom.css文件引用放到bootstrap.css文件後面，咱們定義的btn樣式就會覆蓋原有的樣式（注：這裏的‘覆蓋’指的是增量疊加式的覆蓋）。github

<link rel="stylesheet" href="boostrap.css">
<link rel="stylesheet" href="my-custom.css">

但這種方法有它的優缺點，web

優勢：不會改變你的工做流程。你能夠快速直接修改你的樣式，即便是你的網站引用了其餘的相似bootstrap的框架樣式，你均可以在同一個地方進行統一的定製。bootstrap

缺點：可是對於更完全的修改(好比從新設計導航欄)或是非局部的修改(好比修改適用於整個網站的高亮顏色)來講，這樣東一塊，西一塊的覆蓋樣式更像是一種打補丁式的解決方案。並且你的新樣式要添加到Bootstrap的默認樣式表裏，讓本已經100 KB的文件愈加臃腫。若是你不只僅想要作一些覆蓋，那就要考慮一種更具擴展性的方法了。sass

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

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

bootstrap 是基於less定製的，若是你不熟悉less語法，建議到其官網（http://lesscss.org/）學習一下，很簡單，瞭解並學會使用它用不了多長時間。框架

定製好你的變量後點擊download按鈕就會生成一套屬於你的bootstrap框架了。同時，網上還有不少相似定製bootstrap的網站，若是你不習慣官網的能夠去這其它的網站試試，好比Bootswatchr網站使用變量來組織，而StyleBootstrap則使用組件。BootTheme添加了扔骰子特性來隨機設置值。若是幸運女神不站在你這邊，Lavish可以根據你提供的任何圖片來生成一個主題，PaintStrap則是根據已有的配色方案來生成。less

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

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

缺點：首先你很難一開始就肯定網站全部的樣式風格，固然你能夠在肯定好了後再生成一個最終版本。因此這就引入一個問題，若是你還要時不時更換你的樣式，你一樣須要找到bootstrap樣式源文件編輯，你可能還要用到第一種方法，好比我要使用圓角的帶陰影的button，光定製就不能知足個人需求，再者，若是面對bootstrap升級的問題，你還須要從新根據你的樣式構建一個新版本的bootstrap，這樣要真的作起來，會很是的麻煩。

最後一種方法是深度定製bootstrap less

首先得到bootstrap的源碼，

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

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

咱們打開bootstrap.less文件看看裏面寫的是什麼：

View Code

實際上，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版本，咱們也不要擔憂從新構建樣式框架了。