Bootstrap 研究 ---自定義Bootstrap


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


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

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

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

bootstrap

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

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

bootstrap

來自於Bootswatch的三種Bootstrap主題

使用CSS覆蓋

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

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

bootstrap

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

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

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

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

生成一個自定義構建

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

bootstrap

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

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

深入挖掘LESS

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

獲得源碼

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

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

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

bootstrap

組成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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com