第5章 深入了解：自定義Bootstrap
想象一下，一個網(wǎng)站，所有的網(wǎng)站都是用Bootstrap構(gòu)建的，看起來和感覺都一樣。無聊,對吧?幸運的是，我們有能力改變我們使用的任何框架的默認(rèn)樣式。
許多Bootstrap的組件和插件都有自己的默認(rèn)樣式。為了給他們一個特別的體驗，你需要替換他們的CSS規(guī)則并定義你的自己的。
在第一章，我和大家分享了一些建立在Bootstrap上的流行網(wǎng)站。它們都有自定義的Bootstrap的CSS，以使它們的模板看起來獨一無二且美觀。
在本章中，我們將討論可以完全自定義Bootstrap默認(rèn)樣式的各種方法，并分析哪種方法更可取，為什么。最后，我們將嘗試?yán)斫釨ootstrap的CSS是如何編寫的，使它成為一個高度響應(yīng)的框架。
自定義Bootstrap樣式
您可以通過各種方式自定義引導(dǎo)程序。在本節(jié)中，我們將通過靜態(tài)CSS文件和較少的文件進(jìn)行自定義。
什么是Less？
Less是一個CSS預(yù)處理器，它擴(kuò)展了CSS功能，添加了諸如變量、混合、函數(shù)等編程特性。
它保持CSS模塊化、可維護(hù)和可擴(kuò)展。
更少的文件被編譯來生成CSS文件，然后你可以在你的項目中使用。
如果你使用Ruby,Sass是一個替代選擇。
它也是一個CSS預(yù)處理器，Bootstrap支持;然而，我們不會在本書中涵蓋Sass的定制。
帶有Bootstrap默認(rèn)包的樣式表是普通的CSS文件。如果您使用文本編輯器打開靜態(tài)CSS文件，您將發(fā)現(xiàn)許多選擇器及其相關(guān)的CSS屬性。您可能會傾向于在這些文件中直接更改CSS屬性及其值，以節(jié)省時間，但我強(qiáng)烈建議您不要使用它!
直接修改CSS文件有很多缺點。尤其是下列一些:
1、這些變化是不可逆的。您將不記得最初出現(xiàn)的CSS屬性和它們的值，因此您將無法還原回原來的引導(dǎo)樣式。
2、您對一個選擇器所做的任何更改可能會破壞Bootstrap的響應(yīng)性。
3、調(diào)試變得非常困難;您需要了解CSS繼承鏈來到達(dá)父選擇器。
在我們進(jìn)入定制階段之前，讓我們首先來建立本章中將要使用的項目。和往常一樣，我們將使用在第1章中創(chuàng)建的項目Bootstrap_demos。將所有內(nèi)容復(fù)制到一個名為Chapter_5的新文件夾中。并更改index.html頁面標(biāo)題為“Customizing Bootstrap”。現(xiàn)在將<h1>標(biāo)記從<body>中刪除。
使用CSS自定義Bootstrap
這種類型的定制通常被稱為覆蓋默認(rèn)的CSS。我們實際上用我們自己的自定義值覆蓋了一些Bootstrap的CSS屬性。
首先，我們在/css文件夾中創(chuàng)建一個名為app.css(或任何你想要的)的新文件。然后我們打開index.html并鏈接到新的CSS文件。這個新CSS文件的鏈接應(yīng)該包含在Bootstrap的CSS文件的鏈接下面:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
讓我們添加一個Bootstrap按鈕，如圖5.1所示。
<div class="container">
<a href="#" class="btn btn-primary btn-lg">Big Fat Button</a>
</div>
Figure
我們將使用它展示如何對其默認(rèn)設(shè)計進(jìn)行一些更改:
1、從這個按鈕上刪除圓角
2、改變填充量
3、調(diào)整字體大小
4、改變背景顏色
讓我們使用開發(fā)工具來檢查這個按鈕。我們將使用Chrome，如圖5.2所示，但是您可以使用任何類似的工具，比如Firefox中的Firebug。填充、字體大小和邊界半徑等屬性來自btn類，而屬性背景則應(yīng)用于類btn-primary。要修改它們，我們需要在CSS文件app.css中使用相同的選擇器重寫屬性。
打開app.css加入下列CSS代碼:
.btn{
border-radius: 0;
padding: 5px 10px;
font-size: 16px;
}
.btn-primary{
background: #63AEF0;
}
如果我們刷新頁面，我們的按鈕應(yīng)該看起來像圖5.3。
注意，我們使用了Bootstrap類btn和btn - primary來覆蓋CSS樣式。從此以后，每當(dāng)您使用Bootstrap的按鈕組件時，它將會有一個類似于圖5.3的更改樣式。要還原回原來的樣式，我們只需從app. CSS文件中刪除CSS樣式。
如果您想要更改web頁面中僅一個特定按鈕的樣式，而不是針對Bootstrap的選擇器，請使用ID來應(yīng)用CSS更改。
使用Less自定義Bootstrap
如果您是一個Less的開發(fā)人員，您將喜歡這個部分，因為有很多選擇，可以使用Less的自定義Bootstrap。每個Bootstrap組件都可以輕松地更改它們的屬性。要訪問所有Less文件，您需要下載一個特定版本的Bootstrap。請登錄http://getbootstrap.com/docs/3.3/getting-started/#download并點擊[Download source]按鈕(選擇下載源代碼)。這個源代碼包包含編譯后的和原始的Less文件?！咀ⅲ涸诜g這本書的時候，Bootstrap已經(jīng)推出了v4.0.0-beta版本，但建議在推出穩(wěn)定版本后再去用于實際項目】
Less文件位于Less文件夾內(nèi)。在這里，你會發(fā)現(xiàn)很多根據(jù)Bootstrap的組件命名的.less文件。所有與特定組件相關(guān)的CSS屬性和值都存在于相應(yīng)的.less文件中。您還將找到一個bootstrap.less，這是.less主文件。它包含了該文件夾中的所有的less文件。您只需要編譯此文件就可以生成定制的Bootstrap樣式。讓我們把這個文件夾里的所有文件分類。
Bootstrap的Variables和Mixins
所有Bootstrap中使用到的變量和混入分別放在兩個文件中：
1、variables.less 包含了Bootstrap中使用的全部標(biāo)準(zhǔn)顏色，默認(rèn)的響應(yīng)寬度值、默認(rèn)填充值和邊界值。如果你想做任何這樣的改變，你需要處理這個文件。
2、mixins.less 包含用于生成前綴的混入，并動態(tài)計算網(wǎng)格的寬度、占位符、按鈕大小等。
復(fù)位文件
這里有兩個復(fù)位文件去清除瀏覽器的默認(rèn)值:
- normalize.less清除了許多瀏覽器默認(rèn)設(shè)置如字體，字體大小，填充和邊距，標(biāo)題標(biāo)簽設(shè)置，表單元素的樣式，等等。
2、print.less包含打印支持媒體查詢。
核心文件
這里有七個核心文件
1、scaffolding.less包含所有輔助類的圖像（如img響應(yīng)。IMG圈），對各種狀態(tài)的鏈接元素，風(fēng)格水平規(guī)則，屏幕閱讀方式，等等。
2、type.less是一個排版文件，它包含了標(biāo)題標(biāo)簽、段落標(biāo)記和其他與內(nèi)容相關(guān)的助手類的樣式，例如.lead、.text-muted等等。
3、code.less包含CSS屬性，用于樣式化web頁面上的任何代碼。
4、grid.less涉及到在Bootstrap網(wǎng)格系統(tǒng)上應(yīng)用的所有CSS值。
5、tables.less用于裝飾<table>元素的樣式。它還為諸如此類的表定義各種助手類，例如：table-condensed。table-bordered等等。
6、forms.less美化窗體元素，如文本框、復(fù)選框、單選按鈕等等。
7、buttons.less包含各類Bootstrap按鈕風(fēng)格造型。這里定義了所有與按鈕相關(guān)的類。
組件文件
這里有Bootstrap的21個組件文件；前一章所涵蓋的每個組件都有自己的文件。與組件相關(guān)的所有CSS定義都可以在其對應(yīng)的less文件中找到。
■ component-animations.less
■ glyphicons.less
■ dropdowns.less
■ button-groups.less
■ input-groups.less
■ navs.less
■ navbar.less
■ breadcrumbs.less
■ pagination.less
■ pager.less
■ labels.less
■ badges.less
■ jumbotron.less
■ thumbnails.less
■ alerts.less
■ progress-bars.less
■ media.less
■ list-group.less
■ panels.less
■ wells.less
■ close.less
這個列表中還有一個文件，實際上它本身不是一個組件，close.less。它包含了將用于模式按鈕的CSS規(guī)則，警報，以及關(guān)閉此特定組件的其他元素。
插件文件
這里有四個.less文件定義了通過引導(dǎo)標(biāo)記觸發(fā)或創(chuàng)建的JavaScript插件的CSS樣式：
■ modals.less
■ tooltip.less
■ popovers.less
■ carousel.less
實用程序文件
最后，我們在Bootstrap中有兩個實用程序文件
■ utilities.less
■ responsive-utilities.less
這些文件定義了幫助我們更好地組織Bootstrap組件的類。它們幫助其他類，比如.clearfix從它周圍的所有元素中清除一個組件。.hide和 .show用來切換組件可見性。例如，responsive-utilities.less包含visible-lg .hidden-sm這樣的可見性實用工具。
使用Less覆蓋樣式
讓我們使用Less覆蓋模式對話框的樣式。我們將自定義modals.less，提供一個扁平化設(shè)計，去掉圓角，減少陰影。我們也將改變模式對話框的背景顏色和字體顏色,讓我們打開modals.less并做這些改變。
模式對話框的圓角是通過類modal-content提供的。讓我們在modals.less找到這個選擇器。應(yīng)該是這樣的：
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color;
?//old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
}
從這代碼中，我們可以看見圓角由屬性border-radius設(shè)定，它的值是作為一個Less變量在variables.less中初始化的。讓我們注釋這一行來去除圓角。
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color;
?//old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
// border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
}
現(xiàn)在，我們來減少陰影。分析代碼，我們可以看到.box-shdow()混入是在CSS中產(chǎn)生陰影屬性的原因。這個混入只定義在mixins.less文件中的，陰影的參數(shù)被傳給這個混入。讓我們根據(jù)我們的要求改變這個值。陰影效果是由參數(shù)的第三項設(shè)定的，當(dāng)前值是9px。讓我們把這個值減少到2px。因此，我們的選擇器現(xiàn)在應(yīng)該如下所示：
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color;
?//old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 2px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
}
我們還需要更改媒體查詢屬性(media queries)中的box-shadow值，該查詢覆蓋了前面的更改。我們很快將學(xué)習(xí)媒體查詢。不過現(xiàn)在，你需要理解的是Bootstrap 對于不同大小的設(shè)備有不同的CSS規(guī)則。讓我們繼續(xù)，并在modals.less中找到媒體查詢屬性（@media）：
// Scale up the modal
@media (min-width: @screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: @modal-md;
margin: 30px auto;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
}
// Modal sizes
.modal-sm { width: @modal-sm; }
}
讓我們在媒體查詢中給box-shadow定義一個新的值傳遞給.box-shadow()混入：
// Scale up the modal
@media (min-width: @screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: @modal-md;
margin: 30px auto;
}
.modal-content {
.box-shadow(0 5px 2px rgba(0,0,0,.5));
}
// Modal sizes
.modal-sm { width: @modal-sm; }
}
讓我們改變模式對話框的背景顏色。我們將使用一個在variables.less中預(yù)定義的變量@brand-info設(shè)置模式對話框的背景顏色。這個變量初始化為#5bc0de，是淡藍(lán)色的。文字顏色，讓我們在同一文件中使用設(shè)置為#fff的@body-bg參數(shù)。現(xiàn)在，修改后的modal-content選項卡將如下所示：
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color;
?//old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
background: @brand-info;
color: @body-bg;
}
我們已經(jīng)完成了所有定制的計劃，但我們最后還需要修改modal-backdrop選擇器。modal-backdrop是一個透明層，當(dāng)模式對話框組件被觸發(fā)時，它將出現(xiàn)在modal-content后面。
讓我們把modal-background的背景色從黑變成白：
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: @body-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(@modal-backdrop-opacity); }
}
最后，我們完成了全部的自定義，是時候去編譯bootstrap.less導(dǎo)入modals.less了。一旦這個.less文件被編譯去生成Bootstrap.css,你可以在你的項目中替換舊的Bootstrap.css(我們將在下節(jié)討論如何編譯Less文件)。從此，無論何時你使用模式對話框，它都將使用自定義樣式。圖5.4是顯示定制模式組件的屏幕截圖。
編譯Less
編譯Less是相對簡單的。在這里，我將向你們展示一些標(biāo)準(zhǔn)的方法。
使用Node
如果你已經(jīng)安裝了Node，你可以用Node的包管理工具(npm)來安裝less編譯器.
一旦less編譯器安裝完畢，使用下面的命令去把bootstrap.less編譯成bootstrap.css.你需要在命令行工具中切換到/less目錄，然后輸入命令：
$ lessc bootstrap.less > bootstrap.css
使用第三方軟件
這里有一些可視化的第三方軟件用于編寫和編譯Less代碼。比較流行的有Crunch!, SimpLESS,Mixture。【注：在window下可以使用WinLess】
在下載前自定義Bootstrap
是的，你沒有聽錯，Bootstrap允許你編輯和旋轉(zhuǎn)這些你希望出現(xiàn)在你自己的自定義Bootstrap包中的功能。
這是每一個Less變量邊上都有一個字段，所以如果你不知道如何去使用Less，你可以使用這個表單去編輯默認(rèn)值。每一個Bootstrap組件和插件也都有一個多選框。如圖5.5所示，你可以不選擇你不需要使用的。
不選擇特定的組件可能也會關(guān)聯(lián)取消選擇有依賴關(guān)系的組件。例如，在自定義頁面上不選擇Forms(表單)也將自動不選擇Input groups(輸入組件)和Navbar(導(dǎo)航條)。因此，選擇時要小心。
【注：Bootstrap 3.3版本的自定義頁面的鏈接是http://getbootstrap.com/docs/3.3/customize/】
媒體查詢(Media Queries)和Bootstrap
媒體查詢被作為CSS3的一部分引入，用來根據(jù)屏幕分辨率動態(tài)控制網(wǎng)站內(nèi)容。它是今天可用的每一個響應(yīng)框架下的關(guān)鍵技術(shù)之一。Bootstrap使用媒體查詢來正確定義許多CSS規(guī)則，使之成為響應(yīng)框架。
如果想自定義Bootstrap的響應(yīng)網(wǎng)格系統(tǒng)，理解媒體查詢是很重要的。讓我們來看一個簡單的媒體查詢：
@media all and (min-width: 699px){
h1{
display: none;
}
}
每個媒體查詢都應(yīng)該有一個媒體類型和一個表達(dá)式。媒體類型指定鏈接文檔將顯示在什么類型的設(shè)備上。在這里，媒體類型是全部。該表達(dá)式使用媒體特性進(jìn)一步限制樣式表的范圍，如寬度、高度和顏色。在這里，表達(dá)式的最小寬度是：699px。如果瀏覽器寬度大于699px，這個媒體查詢將應(yīng)用它所包含的CSS屬性。因此，在大于699px的屏幕上h1元素將被隱藏。
有許多媒體類型和媒體功能可供我們使用。媒體類型的例子包括all(所有的)、print(打印的)、screen(屏幕的)和projection(投影的)。媒體特征的例子包括height(高度)，max-height(最大高度)，和max-width(最大寬度)。
Bootstrap已經(jīng)為各種設(shè)備大小定義了許多媒體查詢，以創(chuàng)建一個高度響應(yīng)的框架。這里是Bootstrap的CSS文件中的一個片段:
@media (min-width: 768px) {
.container {
width: 750px;
}
}
要了解更多關(guān)于媒體查詢的信息，請參考《Mozilla Developer Network documentation》鏈接是https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
小結(jié)
在本章中，我們討論了自定義Bootstrap的各種方法，并看到了如何用CSS和Less自定義Bootstrap。正如我們所看到的，Bootstrap提供了許多改變默認(rèn)樣式的選項，賦予您創(chuàng)建自己獨特而漂亮的設(shè)計的能力。
