Bootstrap作品展示站點(diǎn)實(shí)戰(zhàn)項(xiàng)目2

更新時(shí)間：2016年10月14日 10:13:12 作者：葉超Luka

這篇文章主要為大家分享了Bootstrap作品展示站點(diǎn)實(shí)戰(zhàn)項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

假設(shè)我們已經(jīng)想好了要給自己的作品弄一個(gè)在線站點(diǎn)。一如既往，時(shí)間緊迫。我們需要快一點(diǎn)，但作品展示效果又必須專業(yè)。當(dāng)然，站點(diǎn)還得是響應(yīng)式的，能夠在各種設(shè)備上正常瀏覽，因?yàn)檫@是我們向目標(biāo)客戶推銷時(shí)的賣點(diǎn)。這個(gè)項(xiàng)目可以利用Bootstrap的很多內(nèi)置特性，同時(shí)也將根據(jù)需要對(duì)Bootstrap進(jìn)行一些定制。

1.設(shè)計(jì)目標(biāo)

雖然對(duì)大屏幕中的展示效果已經(jīng)胸有成竹，但我們還應(yīng)該從小設(shè)備開(kāi)始，強(qiáng)迫自己聚焦在關(guān)鍵的要素上面。

這個(gè)作品展示站點(diǎn)應(yīng)該具有下列功能：

□ 帶Logo的可折疊的響應(yīng)式導(dǎo)航條；

□ 重點(diǎn)展示四張作品的圖片傳送帶；

□ 單欄布局中包含三塊內(nèi)容，每塊內(nèi)容中都包含標(biāo)題、短段落和吸引人點(diǎn)擊閱讀的大按鈕；

□ 頁(yè)腳包含社交媒體鏈接。

下面的屏幕截圖展示了設(shè)計(jì)方案：

總體來(lái)看，這將是對(duì)我們工作的一個(gè)完美的展示。圖片傳送帶比較高，可以充分展示我們作品的圖片。當(dāng)然，導(dǎo)航到底下的內(nèi)容也不難，用戶可以先了解每一項(xiàng)的大致情況，然后決定深入閱讀那塊內(nèi)容。通過(guò)把重要的練級(jí)做成大按鈕，從視覺(jué)上突出了重要的操作，可以起到吸引用戶點(diǎn)擊的作用，而且就算是手指粗大的用戶都可以輕易點(diǎn)觸。

為了便于維護(hù)，我們只考慮兩個(gè)主要的斷點(diǎn)。在小于768px的小屏幕中使用單欄布局，否則就切換到一個(gè)三欄布局：

在這個(gè)針對(duì)大屏幕的設(shè)計(jì)效果中，可以發(fā)現(xiàn)下列功能：

□ 位于頂部的導(dǎo)航條，而且各導(dǎo)航條都附帶圖標(biāo)；

□ 寬屏版的圖片傳送帶，其中的圖片拉伸至與瀏覽器窗口同寬；

□ 三欄布局分別容納三塊文本內(nèi)容；

□ 頁(yè)腳在布局中水平居中。

這個(gè)設(shè)計(jì)的配色很簡(jiǎn)單，只有灰階以及用于鏈接和突出顯示的金綠色。

明確了設(shè)計(jì)目標(biāo)，接下來(lái)就可以布置內(nèi)容了。

2.基本頁(yè)面搭建

根據(jù)前面文章【Bootstrap】1.初識(shí)Bootstrap的說(shuō)明，我們可以暫時(shí)把項(xiàng)目的基本框架搭建起來(lái)。其html文檔代碼如下：

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>  <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>  <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>作品展示站點(diǎn)</title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width">
 <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
 <!-- Main Style Sheet -->
 <link rel="stylesheet" href="css/main.css">
 <!-- Modernizr -->
 <script src="js/vendor/modernizr-2.6.2.min.js"></script>
 <!-- Respond.js for IE 8 or less only -->
 <!--[if (lt IE 9) & (!IEMobile)]>
  <script src="js/vendor/respond.min.js"></script>
 <![endif]-->
</head>
<body>
 <!--[if lte IE 7]>
  <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a >upgrade your browser</a> or <a >activate Google Chrome Frame</a> to improve your experience.</p>
 <![endif]-->
 <header role="banner">
 <nav role="navigation" class="navbar navbar-default">
  <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">Bootstrappin'</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
   <li class="active"><a href="index.html">Home</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">Team</a></li>
   <li><a href="#">Contact</a></li>
   </ul>
  </div>
  <!--/.nav-collapse -->
  </div>
  <!--/.container -->
 </nav>
 </header>
 <div role="main">
  <img src="img/okwu.jpg" alt="OKWU.edu Homepage">
  <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage">
  <img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation">
  <img src="img/emancipation.jpg" alt="Emancipation Stories">

  <h2>Welcome!</h2>
  <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
  <p><a href="#">See our portfolio</a></p>

  <h2>Recent Updates</h2>
  <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
  <p><a href="#">See what's new!</a></p>

  <h2>Our Team</h2>
  <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p>
  <p><a href="#">Meet the team!</a></p>
 </div>
 <footer role="contentinfo">
 <p><a href="index.html">
  <img src="img/logo.png" width="80" alt="Bootstrappin&#39;"></a></p>
 <ul class="social">
  <li><a href="#" title="Twitter Profile">Twitter</a></li>
  <li><a href="#" title="Facebook Page">Facebook</a></li>
  <li><a href="#" title="LinkedIn Profile">LinkedIn</a></li>
  <li><a href="#" title="Google+ Profile">Google+</a></li>
  <li><a href="#" title="GitHub Profile">GitHub</a></li>
 </ul>
 </footer>
 <script src="js/vendor/jquery-1.10.2.min.js"></script>
 <script src="js/plugins.js"></script>
 <script src="js/main.js"></script>
</body>
</html>

打開(kāi)頁(yè)面后，可以看到導(dǎo)航欄后面就是作品圖片：

作品圖片后面就是文本塊和包含一組社交鏈接的頁(yè)腳：

倒也簡(jiǎn)單。還是開(kāi)始讓它變身吧！

我們從添加Bootstrap類著手，這樣可以利用Bootstrap默認(rèn)的CSS樣式和JavaScript行為，迅速搭建起來(lái)基本的界面元素。

3.搭建傳送帶

下面先來(lái)搭建傳送帶，傳送帶會(huì)循環(huán)展示我們作品的四張?zhí)貙?xiě)圖片。其標(biāo)記結(jié)構(gòu)的官方文檔地址是：http://getbootstrap.com/javascript/ 。

可以按照示例中的結(jié)構(gòu)設(shè)置其中的元素。以下代碼就是傳送帶的所有標(biāo)記，包含各個(gè)部分，首先是進(jìn)度指示器：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 <li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>

整個(gè)傳送帶是一個(gè)帶ID屬性的div標(biāo)簽，其 carousel 類用于把Bootstrap 的傳送帶CSS應(yīng)用到這個(gè)元素，為指示器、傳送帶項(xiàng)和前一張及后一張控件添加樣式。

進(jìn)度指示器的 data-target 屬性必須使用傳送帶的 IDcarousel-example-generic 。有了這個(gè)屬性，JavaScript 插件才能為活動(dòng)的傳送帶項(xiàng)添加 active 類。在此我們預(yù)先為第一個(gè)指示器添加了active類。然后，類的切換就由JavaScript控制了。它會(huì)刪除第一個(gè)指示器的這個(gè)類，再添加到后續(xù)指示器，如此循環(huán)。

此外，還要注意 data-slide-to 的值從0開(kāi)始，與JavaScript和其他編程語(yǔ)言一樣。記?。簭?開(kāi)始，不是從1開(kāi)始。

指示器后面，是類為 carousel-inner 的元素。這個(gè)元素是所有傳送帶項(xiàng)（item），也就是所有圖片。

carousel-inner 元素內(nèi)部是傳送帶項(xiàng)，是一組div標(biāo)簽，每個(gè)都帶有class="item"。把第一項(xiàng)修改成包含item 和active 兩個(gè)類，使其一開(kāi)始就可見(jiàn)。

此時(shí)的標(biāo)記結(jié)構(gòu)如下所示：

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
　　<img src="img/okwu.jpg" alt="OKWU.edu Homepage">
</div>
<div class="item">
　　<img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage">
</div>
<div class="item">
　　<img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation">
</div>
<div class="item">
　　<img src="img/emancipation.jpg" alt="Emancipation Stories">
</div>
</div>

傳送帶項(xiàng)之后，還需要添加傳送帶控件，用于在傳送帶左、右兩側(cè)顯示前一個(gè)和后一個(gè)按鈕。你會(huì)發(fā)現(xiàn)其中有類對(duì)應(yīng)著 Glyphicon字體圖標(biāo)。在控件后面，我們?cè)谟靡粋€(gè)結(jié)束div標(biāo)簽關(guān)閉整個(gè)傳送帶。

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 <span class="sr-only">Next</span>
</a>
</div>

PS:每個(gè)傳送帶控件的href屬性必須是最外圍傳送帶元素的ID值（這里是carousel-example-generic）。

添加以上代碼之后，保存刷新瀏覽器。Bootstrap的樣式和JavaScript都應(yīng)該生效，頁(yè)面中的圖片應(yīng)該變身成為滾動(dòng)的傳送帶?，F(xiàn)在的顯示效果如下：

默認(rèn)情況下，傳送帶的幻燈片每5秒切換一次。為了充分展示我們的作品，可以改成8秒。

(1) 打開(kāi) js/main.js

(2) 添加以下代碼。這里先用jQuery方法檢測(cè)相應(yīng)的頁(yè)面元素是否存在，如果存在則將傳送帶的間隔初始化為8000毫秒。

$(document).ready(function () {
 $(".carousel").carousel({
 interval:8000
 });
});

(3) 保存并刷新。

相關(guān)的選項(xiàng)可以參考Bootstrap 傳送帶的官方文檔：http://getbootstrap.com/javascript/

4.創(chuàng)建響應(yīng)式分欄

頁(yè)面中有三個(gè)文本，每塊都有標(biāo)題、段落和鏈接。在大于平板電腦的屏幕上，我們希望內(nèi)容分為三欄，而在較窄的屏幕上，我們希望內(nèi)容變成一欄全寬。

這里將擁戴Bootstrap 移動(dòng)優(yōu)先的響應(yīng)式網(wǎng)格，其官方文檔地址為：http://getbootstrap.com/css/（其中文文檔地址為：http://v3.bootcss.com/css/）。

簡(jiǎn)單的說(shuō)，Bootstrap 內(nèi)置12欄網(wǎng)格系統(tǒng)，其基本的類結(jié)構(gòu)支持 col-12 表示全寬，col-6表示半寬，col-4表示四分之一寬，以此類推。

在Bootstrap3 中，由于創(chuàng)造性地使用了媒體查詢，網(wǎng)格體統(tǒng)具有極強(qiáng)的適應(yīng)力。如前所述，我們希望歡迎消息在比平板小的屏幕中呈現(xiàn)一欄全寬，而在大約768px 時(shí)變成三分之一欄寬。巧合的是，Bootstrap 內(nèi)置的小屏幕斷點(diǎn)恰好是768px，也就是 @screen-sm-min 變量的默認(rèn)值。而大于 768px 的中屏幕斷點(diǎn)是992px，對(duì)應(yīng)變量是@screen-md-min。然后，大于1200px斷點(diǎn)的算大屏幕。

小斷點(diǎn)有一個(gè)特殊的欄類命名法：col-sm-。因?yàn)槲覀兿蛟谛帱c(diǎn)之上使用三欄，所以這里使用。這樣在小斷點(diǎn)之下，分塊元素會(huì)保持全寬，而在小斷點(diǎn)之上，則會(huì)各站三分之一寬并肩排列。完整的結(jié)構(gòu)如下所示：

<div class="container">
  <div class="row">
  <div class="col-sm-4">
   <h2>Welcome!</h2>
   <p>....</p>
   <p><a href="#">See our portfolio</a></p>
  </div>
  <div class="col-sm-4">
   <h2>Recent Updates</h2>
   <p>....</p>
   <p><a href="#">See what's new!</a></p>
  </div>
  <div class="col-sm-4">
   <h2>Our Team</h2>
   <p>...</p>
   <p><a href="#">Meet the team!</a></p>
  </div>
  </div>
 </div>

下面稍微解釋下 container 和 row 類的作用：

□ container 類用于約束內(nèi)容的寬度，并使其在頁(yè)面內(nèi)居中；

□ row 類用于包裝三個(gè)欄，并未欄間流出左右外邊距；

□ container 類和row 類都設(shè)定了清除，因而它們可以包含浮動(dòng)元素，同時(shí)又清除之前的浮動(dòng)元素。

現(xiàn)在，保存并刷新。可以看到對(duì)應(yīng)的顯示效果如下：

這樣就利用響應(yīng)式網(wǎng)格系統(tǒng)完成了響應(yīng)式分欄，接下來(lái)我們要利用Bootstrap的按鈕樣式，把內(nèi)容分塊中的鏈接做成突出的效果。

5.把鏈接變成按鈕

把重要的內(nèi)容鏈接轉(zhuǎn)換成突出顯示的按鈕很簡(jiǎn)單。為此要用到如下幾個(gè)關(guān)鍵的類。

□ btn 類用于把鏈接變成按鈕的樣式；

□ btn-primary 類用于把按鈕變成主品牌顏色；

□ pull-right 類用于把鏈接浮動(dòng)到右側(cè)，使其占據(jù)更大的空間，從而便于發(fā)現(xiàn)和點(diǎn)擊。

把上述這幾個(gè)類添加到三個(gè)內(nèi)容塊末尾的鏈接上：

復(fù)制代碼代碼如下:

<a href="#">See our portfolio</a>

保存并刷新，其顯示效果如下：

此處按鈕的標(biāo)記結(jié)構(gòu)的官方文檔地址為：http://getbootstrap.com/css/ （中文文檔：http://v3.bootcss.com/css/）。

在基本的標(biāo)記結(jié)構(gòu)就為的條件下，接下來(lái)可以進(jìn)行微調(diào)了。謂詞需要用到自定義的CSS，而我們要借此機(jī)會(huì)體驗(yàn)一下Bootstrap的LESS文件的強(qiáng)大威力。

6.理解LESS

PS:本節(jié)基于bootstrap v3.0.2，這個(gè)版本在GitHub上的介紹和下載地址為：https://github.com/twbs/bootstrap/releases/tag/v3.0.2

PS:當(dāng)前的最新版本是： v4.0.0-alpha.4

本節(jié)會(huì)介紹創(chuàng)建創(chuàng)建、編輯、頂置一些LESS文件，以便為我們的設(shè)計(jì)生成期望的CSS。

□ LESS 文檔：http://lesscss.org/

□ Sitepoint 網(wǎng)站關(guān)于 LESS 的完整介紹：https://www.sitepoint.com/a-comprehensive-introduction-to-less/

簡(jiǎn)而言之，使用LESS預(yù)處理器來(lái)生成CSS是一件既令人激動(dòng)又十分輕松的事。

6.1 嵌套規(guī)則

嵌套規(guī)則極大提高了組合樣式的效率。比如，CSS中的選擇符可能會(huì)多次重復(fù)出現(xiàn)：

.navbar-nav {...}
.navbar-nav > li {...}
.navbar-nav > li > a {...}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {...}

其中這些相同的選擇符用LESS寫(xiě)會(huì)簡(jiǎn)潔很多，只要使用一個(gè)簡(jiǎn)單的嵌套即可：

.navbar-nav { ...
 > li { ...
 > a { ...
 &:hover,
 &:focus { ... } 
 }
 }
}

編譯后，這些規(guī)則會(huì)生成標(biāo)準(zhǔn)的CSS。但 LESS的嵌套規(guī)則更容易寫(xiě)，也更容易維護(hù)。

6.2 變量

使用變量可以讓我們只設(shè)定（或修改）一次，就能自動(dòng)影響（更新）整個(gè)樣式表中用到該值的屬性。比如，可以像下面這樣使用顏色變量：

@off-white: #e5e5e5;
@brand-primary: #890000;

在這些變量的值變化后，可以自動(dòng)將它們更新到整個(gè)站點(diǎn)。這是因?yàn)槲覀冊(cè)贚ESS文件中使用了這些變量：

a { color:@brand-primary; }
.navbar {
 background-color:@brand-primary;
 > li > a { color:@off-white;}
}

6.3 混入

混入可以讓生成整套規(guī)則更方便也容易管理。比如，可以利用它簡(jiǎn)化為元素應(yīng)用border-box 屬性的任務(wù)。在CSS中，要涵蓋所有瀏覽器，需要用到每種瀏覽器的供應(yīng)商前綴，為此針對(duì)每個(gè)元素都要寫(xiě)三行相同的聲明，而且還要記住每一種前綴的寫(xiě)法：

.box{
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
  box-sizing:border-box;
}

在LESS 中，可以只寫(xiě)一個(gè)供混入的規(guī)則，后面則可以通過(guò) @boxmodel 參數(shù)來(lái)指定期望的盒模型：

.box-sizing(@boxmodel){
 -webkit-box-sizing:@boxmodel;
 -moz-box-sizing:@boxmodel;
  box-sizing:@boxmodel;
}

然后就可以在需要的地方使用這個(gè)混入了：

.box { 
 .box-sizing(border-box); 
}
.another-element {
 .box-sizing(border-box); 
}

編譯后，還會(huì)為每個(gè)元素生成三行CSS 。

6.4 運(yùn)算式

通過(guò)運(yùn)算式可以基于變量實(shí)現(xiàn)數(shù)學(xué)計(jì)算。比如，可以將一種顏色作為基準(zhǔn)，對(duì)其進(jìn)行加亮和減暗處理：

復(fù)制代碼代碼如下:

a:hover { darken(@link-color, 15%); }

還可以計(jì)算內(nèi)邊距的值，以適應(yīng)導(dǎo)航條的高度。比如，以下Bootstrap 的 navbar.less 文件中的代碼，就將導(dǎo)航項(xiàng)的內(nèi)邊距值設(shè)為導(dǎo)航條高度減去行高之后剩余的高度值。然后，把這個(gè)值一分為二，平均應(yīng)用為頂部和底部?jī)?nèi)邊距:

.navbar > li > a {
 padding-top：((@navbar-height - @line-height-computed) / 2);
 padding-bottom：((@navbar-height - @line-height-computed) / 2);
}

6.5 導(dǎo)入文件

LESS 編譯器支持導(dǎo)入并組合多個(gè)文件，最終生成一個(gè)統(tǒng)一的CSS文件。我們可以指定導(dǎo)入的次序，按照需要的層疊關(guān)系精確組織結(jié)果樣式表。

Bootstrap 的導(dǎo)入文件 bootstrap.less 一開(kāi)始導(dǎo)入了基本的變量和混入。然后，又導(dǎo)入了（代替CSS 重置樣式表的） normalize.css 的LESS 版，之后是針對(duì)打印媒體的基本樣式（print.css）、基本的全局樣式（scaffolding.less）和排版樣式（type.less）。結(jié)果這個(gè)bootstrap.less 文件的開(kāi)頭幾行就是這樣的：

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

// Reset
@import "normalize.less";
@import "print.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";

而最終得到的是一個(gè)統(tǒng)一的CSS文件，其中的樣式經(jīng)過(guò)從一般到特殊的層疊，正是我們想要的。

6.5 模塊化

把多個(gè)文件導(dǎo)入并輸出成一個(gè)文件，可以讓我們更方便地組織樣式，對(duì)它們進(jìn)行分組，并在不同的文件中對(duì)它們進(jìn)行維護(hù)。這也是Bootstrap會(huì)帶有那么多LESS文件的原因，導(dǎo)航條有一個(gè)、按鈕有一個(gè)、警告框有一個(gè)、傳送帶有一個(gè)... ，而所有這些都會(huì)被導(dǎo)入到 bootstrap.less 文件。

正因?yàn)樯鲜鲈?，LESS及其他 CSS預(yù)編譯器才會(huì)變得如此流行。

7.根據(jù)需要定制Bootstrap的LESS文件

在定制Bootstrap的LESS文件期間，我們會(huì)發(fā)揮很大的主觀能動(dòng)性，具體如下：

□ 組織less文件夾，以便靈活、自由地實(shí)現(xiàn)我們需要，同時(shí)也讓將來(lái)的維護(hù)者更方便；

□ 自定義Bootstrap提供的幾個(gè)LESS文件；

□ 創(chuàng)建幾個(gè)新的LESS文件；

□ 為站點(diǎn)整合一套較大的字體圖標(biāo)，數(shù)量翻倍，并將圖標(biāo)運(yùn)用于社交媒體鏈接。

換句話說(shuō)，我們不光要學(xué)習(xí)Bootstrap的約定，還要發(fā)揮自己的創(chuàng)造力。

為了方便起見(jiàn)，我們把原less文件夾下的less文件，即Bootstrap 的LESS文件移到其文件夾bootstrap 下。

然后再less文件夾下新建 __main.less 文件，此文件是bootstrap.less 的重命名版，它導(dǎo)入了其他所有文件，之后就是通過(guò)編譯它基于所有導(dǎo)入的LESS文件生成一個(gè)統(tǒng)一的樣式表。不過(guò)記得修改其導(dǎo)入文件的路徑：

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

為什么要多此一舉呢？因?yàn)槲覀兒芸炀鸵獎(jiǎng)?chuàng)建自己的LESS文件了。這樣一來(lái)，我們創(chuàng)建的文件就不會(huì)與Bootstrap內(nèi)置的文件混淆，便于調(diào)整。

7.1 自定義變量

按照慣例，我們先復(fù)制一份Bootstrap的變量文件，然后對(duì)其進(jìn)行修改。

(1) 找到less/bootstrap 文件夾中的variables.less 文件，在編輯器中打開(kāi)它。

(2) 瀏覽一下這個(gè)文件，會(huì)發(fā)現(xiàn)各種變量，有定義基本顏色值的，有定義頁(yè)面背景顏色的，有定義基本顏色值，有定義頁(yè)面背景顏色的，有定義字體的，還有定義導(dǎo)航條和背景高度的，等等?？雌饋?lái)很好，但改動(dòng)一下更妙。改動(dòng)之前，我們先存一個(gè)副本，以防將來(lái)改壞，好恢復(fù)。

(3) 副本另存為 bootstrap 文件夾外部，在 less 文件夾的 __main.less 文件旁邊。為表示它是自定義文件，命名為_(kāi)variables.less 。

下面我們就來(lái)自定義顏色。

(1) 在新_variables.less 文件的最開(kāi)始，可以看到 Bootstrap 為灰色和品牌色定義的默認(rèn)變量及其值。這里的灰色值是基于黑色按比例計(jì)算的，使用了 LESS 的 lighten 函數(shù)：

...
@gray-darker: lighten(@gray-base, 13.5%); // #222
...

(2) 我們知道自己想要的值，因此直接替換即可（當(dāng)然也可以嘗試使用計(jì)算的值）。然后再增加兩個(gè)變量，以涵蓋我們需要的完整灰度空間。

(3) 代碼如下:

@gray-darker:          #222;
@gray-dark:            #454545;
@gray:                 #777;
@gray-light:           #aeaeae;
@gray-lighter:         #ccc;
@gray-lightest:        #ededed;
@off-white:            #fafafa;

接下來(lái)再修改品牌顏色中的@brand-primary 變量，將其改為金黃色：

復(fù)制代碼代碼如下:

@brand-primary: #c1ba62;

要看結(jié)果，需要導(dǎo)入這些新變量并重新編譯生成CSS。

7.2 導(dǎo)入新變量

修改__main.less文件，把原來(lái)的"bootstrap/variables.less" 替換成"_variables.less"。然后選中 __main.less 進(jìn)行編譯，將輸出路徑設(shè)置為 css/main.css 。編譯后，刷新即可看到顯示效果如下：

可以看到鏈接和類為 btn-primary 的按鈕顏色都會(huì)發(fā)生變換，因?yàn)樗鼈兪褂玫亩际亲兞?@brand-primary 的顏色。

7.3 編輯導(dǎo)航條變量

下面，我們來(lái)編輯設(shè)定導(dǎo)航條高度、顏色和懸停效果的變量。

(1) 在_variables.less 中，搜索到下列變量，并修改為下列值。這樣一來(lái)，就可以增加導(dǎo)航條的高度、把品牌色應(yīng)用給鏈接，同時(shí)利用其他相關(guān)的顏色變量。

@navbar-height:  　　　　 64px;
@navbar-margin-bottom:  　　　　 0;
...
@navbar-default-color:  　　　　 @gray;
@navbar-default-bg:  　　　　 #fff;
@navbar-default-border:  　　　　　 @gray-light;
...
// Navbar links
@navbar-default-link-color:  @navbar-default-color;
@navbar-default-link-hover-color:  @link-hover-color;
@navbar-default-link-hover-bg:  @off-white;
@navbar-default-link-active-color: @link-hover-color;
@navbar-default-link-active-bg:  @gray-lightest;
@navbar-default-link-disabled-color: @gray-lighter;
@navbar-default-link-disabled-bg:  transparent;
...

(2) 保存修改、編譯并刷新。其修改前后的顯示效果如下：

可以看到有關(guān)導(dǎo)航條的新特性：

□ 高度增加了14px;

□ 背景變成了白色；

□ 底部邊框稍微變暗了一些；

□ 導(dǎo)航項(xiàng)的背景在懸停時(shí)稍暗了一點(diǎn)；

□ 導(dǎo)航項(xiàng)的背景在活動(dòng)時(shí)稍暗一些；

□ 鏈接文本的顏色在懸停時(shí)和活動(dòng)時(shí)變成了品牌色。

接下來(lái)，我們把Logo放置到位。

8.添加 Logo 圖片

在 img 文件夾里找到 logo.png 文件。你會(huì)發(fā)現(xiàn)這個(gè)圖片非常大，有900px 寬。在我們最終的設(shè)計(jì)中，這個(gè)Logo只有120px寬。因?yàn)槎喑鰜?lái)的像素將被壓縮到較小的空間內(nèi)，所以這也是讓圖片在所有設(shè)備（包括視網(wǎng)膜屏設(shè)備）中保持清晰的一種簡(jiǎn)便方法。與此同時(shí)，這個(gè)圖片的尺寸也針對(duì)Web進(jìn)行了優(yōu)化，只有19 KB。

下面就把它放置到位并限制其寬度。

(1) 在html文檔中找到導(dǎo)航條標(biāo)記中的這一行代碼：

復(fù)制代碼代碼如下:

<a href="index.html">Bootstrappin'</a>

(2) 把其文本 Bootstrap' 替換成 img 標(biāo)簽，并添加 alt 和 width 屬性。其修改后的代碼為：

復(fù)制代碼代碼如下:

(3) 保持后并刷新瀏覽器，可以看到Logo已經(jīng)出現(xiàn)在了相應(yīng)的位置上。

9.調(diào)整導(dǎo)航項(xiàng)內(nèi)邊距

現(xiàn)在，我們來(lái)調(diào)整一下導(dǎo)航項(xiàng)，以便文本與Logo位于同一基線之上。

(1) 在 less 文件夾下，新建文件_navbar.less，并把其Bootstrap的navbar.less 文件內(nèi)容拷貝進(jìn)去。

(2) 在 _navbar.less 中，找到選擇符.navbar-nav，這是導(dǎo)航項(xiàng)的父元素 ul。在相應(yīng)的規(guī)則里，可以看到嵌套的媒體查詢。（關(guān)于媒體查詢，可以參考LESS文檔：http://lesscss.org/）。

(3) 相關(guān)的行如下所示：

// Uncollapse the nav
 @media (min-width: @grid-float-breakpoint) {
 float: left;
 margin: 0;

 > li {
 float: left;
 > a {
 padding-top: @navbar-padding-vertical;
 padding-bottom: @navbar-padding-vertical;
 }
 }
 }

這里的變量@grid-float-breakpoint 指定了一個(gè)臨界寬度，大于這個(gè)寬度，導(dǎo)航條就會(huì)擴(kuò)展到與屏幕同寬；小于這個(gè)寬度，導(dǎo)航條就會(huì)折疊起來(lái)變成移動(dòng)應(yīng)用風(fēng)格的響應(yīng)式導(dǎo)航。（這個(gè)變量是在_variables.less 中定義的）。

(4) 現(xiàn)在，padding-top 和 padding-bottom 值都是動(dòng)態(tài)計(jì)算的，以確保導(dǎo)航中的文本垂直居中。而我們想增加上內(nèi)邊距，減少下內(nèi)邊距。與此同時(shí)，我們還要擴(kuò)大導(dǎo)航項(xiàng)的間隔，再把字體增大一些。把原來(lái)的代碼使用單行注釋，把需要的規(guī)則寫(xiě)在下面：

> a {
 //padding-top:@navbar-padding-vertical;
 //padding-bottom: @navbar-padding-vertical;
 padding:30px 30px 14px;
 font-size:18px;
}

(5) 保存、編譯并刷新瀏覽器，可以看到顯示效果如下：

10.添加圖標(biāo)

現(xiàn)在輪到為導(dǎo)航項(xiàng)添加圖標(biāo)了。我們直接使用 Bootstrap 自帶的 Glyphicons，然后嘗試下 Font Awesome 這個(gè)大型圖標(biāo)庫(kù)。

PS:此組件的官方文檔地址：http://getbootstrap.com/components/（中文文檔：http://v3.bootcss.com/components/）

我們先從 Home 導(dǎo)航項(xiàng)開(kāi)始。

(1) 要給 Home 導(dǎo)航項(xiàng)添加 Glyphicons Home 圖標(biāo)，只要在文本之前添加一個(gè) span 標(biāo)簽，再加上特定的類即可：

復(fù)制代碼代碼如下:

(2) 保存并刷新瀏覽器，可以看到圖標(biāo)。

(3) 如果沒(méi)看到字體，請(qǐng)確保：

□ Glyphicon 字體位于 fonts 文件夾；

□ 變量文件 _variables.less 中的 @icon-font-path 值正確。本例的是@icon-font-path:"../fonts/"：

(4) 接著給剩下的導(dǎo)航項(xiàng)添加對(duì)應(yīng)的圖標(biāo)。以下依此是 Portfolio、Team 和 Contact 的導(dǎo)航項(xiàng)代碼：

<li><a href="#"><span class="glyphicon glyphicon-picture"></span> Portfolio</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Team</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>

(5) 保存并刷新，可以看到效果：

(6) 對(duì)應(yīng)的折疊后的響應(yīng)式效果：

還不錯(cuò)。

不過(guò)，這里的圖標(biāo)與設(shè)計(jì)方案中的并不完全一致。設(shè)計(jì)方案中的是這樣的：

Bootstrap 中免費(fèi)使用的 Glyphicons 不包含計(jì)算器顯示器和群組圖標(biāo)。此外，我們也沒(méi)有從 Glyphicons 圖標(biāo)中找到適合頁(yè)腳中社交媒體鏈接的圖標(biāo)。

好在，我們還有別的選擇。

11.添加 Font Awesome 圖標(biāo)

目前，F(xiàn)ont Awesome 中包含364個(gè)圖標(biāo)，是 Glyphicons 的 Bootstrap 版本的進(jìn)兩倍。 Font Awesome 圖標(biāo)是免費(fèi)、開(kāi)源的，而且也很方便在 Bootstrap 中使用。其主頁(yè)地址為：http://fontawesome.io/

下面我們就來(lái)使用Font Awesome 圖標(biāo)。

(1) 打開(kāi)Font Awesome的主頁(yè)，找到下載地址。當(dāng)然進(jìn)入其Github鏈接下載代碼：https://github.com/FortAwesome/Font-Awesome

(2) 解壓縮下載到的文件，然后把其font 文件夾下的所有字體文件復(fù)制到我們的 font 文件夾下。

(3) 然后把其 less 文件夾下的所有文件輔助到我們的 less 文件夾下新建的 font-awesome文件夾下。

(4) 接著，在 __main.less 文件中導(dǎo)入 font-awesome.less 文件，以便文件規(guī)則編譯到樣式表中。

@import "bootstrap/glyphicons.less";

@import "font-awesome/font-awesome.less";

(5) Font Awesome 的 less 文件中的包含一個(gè)變量，指定了 Font Awesome 字體的路徑。我們要確保該路徑與項(xiàng)目文件夾結(jié)構(gòu)一致。打開(kāi) Font Awesome 變量文件

font-awesome/variables.less ，確保@fa-font-path 變量的值是：../fonts；如下所示：

復(fù)制代碼代碼如下:

@fa-font-path: "../fonts";

PS: 這里的路徑是相對(duì)于編譯得到的CSS文件而言的，它位于 css 文件夾中。

(6) 保存并編譯 CSS。然后更新 Team 導(dǎo)航項(xiàng)的代碼。

復(fù)制代碼代碼如下:

(7) 保存并刷新瀏覽器，可以看到結(jié)果：

PS:如果你看到的是一個(gè)奇怪的符號(hào)，或者什么都沒(méi)有看到，那說(shuō)明 Web 字體并沒(méi)有應(yīng)用。這時(shí)，要檢查圖標(biāo)類是否正確（包括 fa 類），確保 Font Awesome 字體都在 fonts 文件夾中，而且 font-awesome/variables.less 中的路徑也沒(méi)有問(wèn)題。

此刻，我們可以同時(shí)使用 Glyphicons ，也可以完全棄用它。為了減少代碼冗余，咱們還是棄用它，只使用 Font Awesome字體。為此只需要兩步：

(1) 把 __main.less 中導(dǎo)入 Glyphicons 字體的代碼注釋掉。

復(fù)制代碼代碼如下:

//@import "bootstrap/glyphicons.less";@import "font-awesome/font-awesome.less";

(2) 然后把 html文檔中的圖標(biāo)標(biāo)記的類，改為 Font Awesome 圖標(biāo)對(duì)應(yīng)的類名。

查看 Font Awesome 圖標(biāo)的頁(yè)面http://fontawesome.io/icons/，可以看到圖標(biāo)對(duì)應(yīng)的類名。修改對(duì)應(yīng)的導(dǎo)航項(xiàng)代碼如下：

<li class="active"><a href="index.html"><span class="icon fa fa-home"></span> Home</a></li>
<li><a href="#"><span class="icon fa fa-desktop"></span> Portfolio</a></li>
<li><a href="#"><span class="icon fa fa-group"></span> Team</a></li>
<li><a href="#"><span class="icon fa fa-envelope"></span> Contact</a></li>

顯示效果如下：

12.調(diào)整傳送帶

關(guān)于傳送帶，我們主要還是使用 Bootstrap 默認(rèn)的樣式，同時(shí)對(duì)幾個(gè)比較重要的地方進(jìn)行定制。為此，和前面一樣，我們復(fù)制一份 Bootstrap 的carousel.less 文件到less文件夾下，重命名為 _carousel.less，然后在 __main.less 更新其導(dǎo)入信息。下面我們就可以開(kāi)始定制了。

12.1 把控件改成使用 Font Awesome 圖標(biāo)

如果你在前面就把 Glyphicons 字體刪除了，那就會(huì)發(fā)現(xiàn)傳送帶左右兩側(cè)的“上一個(gè)”和“下一個(gè)”控件不見(jiàn)了。因?yàn)檫@兩個(gè)圖標(biāo)就來(lái)自 Glyphicons 。我們可以讓 Font Awesome 圖標(biāo)取而代之。

(1) 首先，更新 html 文檔中的圖標(biāo)標(biāo)記。找到帶有 carousel-control 和 left、right 類的鏈接。

復(fù)制代碼代碼如下:

<a class="left carousel-control" ...

(2) 將 span 標(biāo)簽中的類修改為通用的 icon 類，再加上Font Awesome 圖標(biāo)類，如下所示：

...

(3) 接下來(lái)，在 _carousel.less 中添加新類選擇符。先找到注釋// Toggles ，然后添加我們的 .icon 類和注釋：

// Toggles
 .icon-prev,
 .icon-next,
 .glyphicon-chevron-left,
 .glyphicon-chevron-right,
 .icon { //added
 ...
 }
 .icon-prev,
 .glyphicon-chevron-left,
 &.left .icon { //added
 left: 20%; //edited was 50%
 }
 .icon-next,
 .glyphicon-chevron-right,
 &.right .icon {//added
 right: 20%;//edited was 50%
 }

關(guān)于以上修改說(shuō)明如下：

□通過(guò)添加基本的icon類，我們可以使用任意圖標(biāo)，樣式都不會(huì)出問(wèn)題；

□&.left 和 &.right 的寫(xiě)法是在嵌套層次中回溯一層，編譯之后分別是 .carousel-control .left 和 .carousel-control .right；

□修改left: 和 right: 定位的值之后，讓圖標(biāo)更靠近傳送帶兩側(cè)的邊界。

保存，編輯，刷新。新的 Font Awesome 圖標(biāo)應(yīng)該粉墨登場(chǎng)了。

下面，我們對(duì)傳送帶進(jìn)行一番修飾。

12.2 添加上、下內(nèi)邊距

先給.carousel 元素添加一點(diǎn)上、下內(nèi)邊距，并將背景色設(shè)置為 @gray-lighter。

.carousel {
 position: relative;
 padding-top:4px; //added
 padding-bottom:28px;//added
 background-color:@gray-lighter; //added
}

保存編譯后，透過(guò)新添加的內(nèi)邊距，可以看到傳送帶中圖片上、下方的亮灰色背景。這樣就似乎有了一個(gè)框，將圖片與其上、下的元素隔離開(kāi)來(lái)。

此外，我們還要利用多出來(lái)的下邊距重新定位傳送帶指示器，讓它更顯眼一些。

不過(guò)，我們得先讓圖片在所有情況下都能自動(dòng)拉伸填充所有空間。

12.3 強(qiáng)制圖片全寬

無(wú)論屏幕多寬，我們都想讓圖片保持與屏幕同寬。因?yàn)閭魉蛶е械膱D片寬度為1600px，基本可以涵蓋大多數(shù)屏幕。如果屏幕寬度超過(guò)1600px，那右側(cè)就會(huì)出現(xiàn)間隙。

強(qiáng)制讓圖片在1600px 以上的屏幕中也保持全寬，可能導(dǎo)致輕微的像素失真；但如果圖片足夠大，變形也不至于太明顯。

PS:如果時(shí)間允許，我們可以采用響應(yīng)式圖片方案，即在小屏幕上加載小圖片，給大屏幕使用大圖片。

現(xiàn)在我們只要在文件中新增兩行代碼即可：

.carousel-inner { ...
 > .item { ...
 > img,
 > a > img {
 &:extend(.img-responsive);
 line-height: 1;
 min-width:100%; //added
 }

做出這個(gè)調(diào)整后，無(wú)論把瀏覽器窗口拉的多寬，圖片都會(huì)跟著變寬。

接下來(lái)，需要限定傳送帶的最大高度。

12.4 約束傳送帶的最大高度

我們發(fā)現(xiàn)，在中大型屏幕中，傳送帶變得太高了。根據(jù)設(shè)計(jì)方案，傳送帶的高度應(yīng)該大致在440px。簡(jiǎn)單，我們只要在圖片的父元素 .carousel-inner > .item 上添加這個(gè)限制即可：

.carousel-inner { ...
> .item {
...
max-height:640px; //added

因?yàn)?.carousel-inner 元素有一條規(guī)則是 overflow:hidden，而 .item 元素又被限定了高度，所以圖片高度超過(guò)最高限制后，其下面的部分會(huì)被隱藏起來(lái)。

在這一步的基礎(chǔ)上，我們可以繼續(xù)使用嵌套媒體查詢（LESS 的另一個(gè)方便特性），再利用 Bootstrap 的中、大斷點(diǎn)變量，分別調(diào)整一下屏幕寬度過(guò)寬時(shí)圖片的垂直定位，從而保證我們的作品處于焦點(diǎn)位置。為此要用到以下代碼：

// Account for jankitude on images
 > img,
 > a > img { ...
 // adding media queries to position images
 @media (min-width:@screen-md-min){
 margin-top:-40px;
 }
 @media (min-width:@screen-lg-min){
 margin-top:-60px;
 }

保存、編譯并刷新。你會(huì)發(fā)現(xiàn)這時(shí)候的傳送帶已經(jīng)基本形成，無(wú)論寬屏還是窄屏，都有模有樣了。

12.5 重定位指示器

傳送帶指示器的作用是向用戶顯示一共有幾張幻燈片，當(dāng)前幻燈片是第幾張。現(xiàn)在，指示器不是很明顯。下面我們把指示器放到它應(yīng)該在的位置上：圖片下方。

(1) 在_carousel.less 中，搜索到注釋 // Optional indicator pips，看看這個(gè)元素垂直方向的定位距離：

.carousel-indicators {
 position: absolute;
 bottom: 10px;
 ...

(2) 我們打算把它們挪到幾乎靠近底邊的位置，進(jìn)入前面添加內(nèi)邊距制造出來(lái)的陰影區(qū)。調(diào)整底部定位的值可以做到。此外，還需要同時(shí)把下外邊距重置為0。

.carousel-indicators {
 position: absolute;
 bottom: 0; //edited
 margin-bottom:0; //added
 ...

(3) 找到文件末尾的代碼，在針對(duì)平板及以上屏幕的代碼處：

// Move up the indicators
 .carousel-indicators {
 bottom: 20px;
 }

這是把指示器向上調(diào)的，現(xiàn)在我們用不著了。只需要把它注釋掉，就不會(huì)被編譯到CSS中了。

//.carousel-indicators {
 // bottom: 20px;
 //}

這樣就達(dá)到我們目的了。現(xiàn)在，指示器在各種屏幕上的位置都始終如一了。

接下來(lái)，我們調(diào)整指示器的外觀，讓它們更大，更顯眼一些。

12.6 調(diào)整指示器外觀

我們要使用灰色相關(guān)的變量，把傳送帶指示器調(diào)整得更顯眼一些。除了調(diào)整顏色，也要把它們調(diào)大點(diǎn)。先從 _variables.less 文件開(kāi)始：

(1) 在 variables.less 中，可以找到以下兩個(gè)變量。這兩個(gè)顏色用于默認(rèn)狀態(tài)下指示器的邊框，還有活動(dòng)狀態(tài)下指示器的填充。

@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;

(2) 修改代碼后，如下：

[@carousel-indicator-bg:  @gray-light; //新增默認(rèn)的背景色,作為默認(rèn)狀態(tài)下指示器的填充色
@carousel-indicator-active-bg: @gray-lightest; //活動(dòng)狀態(tài)下的背景色
@carousel-indicator-border-color: transparent; //設(shè)置為透明

(3) 保存、編譯并刷新。

至此，除了讓活動(dòng)狀態(tài)下的指示器不可見(jiàn)，其他樣式都就緒了。

下面再打開(kāi)_carousel.less 。

(1) 找到下面的規(guī)則：

.carousel-indicators {

position: absolute;

...

(2) 找到嵌套其中的 li 選擇符。在這里需要修改幾個(gè)值:

□ 把 width 和 height 增大到 18px；

□ 刪除外邊距

□ 添加background-color 聲明，值設(shè)置為新變量 @carousel-indicator-bg；

□ 刪除邊框線（前面把邊框變量設(shè)置為透明，就是為了這里安全）；

□ 為所有修改和新增添加注釋，如下所示：

li {
 display: inline-block;
 width: 18px; //edited
 height: 18px; //edited
 //margin: 1px; //edited
 text-indent: -999px;
 background-color:@carousel-indicator-bg; //added
 //border: 1px solid @carousel-indicator-border-color; //edited
 border-radius: 10px;

(3) 注意下面這兩個(gè)針對(duì)IE8-9 的手法，它們?cè)谶@兩個(gè)瀏覽器中為指示器提供背景顏色。因?yàn)槲覀円呀?jīng)給所有指示器都提供了背景色，所以這幾行就沒(méi)有必要了。這里把它們都注釋掉，以免干擾前面聲明的背景色。

//background-color: #000 \9; // IE8

//background-color: rgba(0,0,0,0); // IE9

(4) 接下來(lái)，再注釋掉 .active 選擇符下面的 margin、width、height，因?yàn)槲覀儾幌Ｍ顒?dòng)狀態(tài)下的指示器變小，如下圖所示：

修改后的代碼如下：

.active {
 //margin: 0; //edited
 //width: 12px; //edited
 //height: 12px; //edited
 background-color: @carousel-indicator-active-bg;
 }

(5) 最后，與 .active 選擇符并列添加一個(gè) :hover 選擇符，增加懸停效果：

復(fù)制代碼代碼如下:

li:hover, //added .active { ...

(6) 保存，并編譯，可以看到顯示效果如下：

這樣，傳送帶的調(diào)整工作就做完了。

13.調(diào)整分欄及其內(nèi)容

下面我們來(lái)調(diào)整下位于標(biāo)題 Welcome!、Recent Updates、Our Team 下面的三個(gè)內(nèi)容塊。

首先，為每個(gè)塊中的按鈕添加圓圈箭頭圖標(biāo)。這里還是使用 Font Awesome 圖標(biāo)。

(1) 查看其文檔：http://fontawesome.io/icons/

(2) 找到想要使用的圖標(biāo)：

(3) 在 html文檔中，為每個(gè)鏈接添加帶有適當(dāng)類的 span 標(biāo)簽。下面是第一個(gè)鏈接添加代碼后的結(jié)果：

<a href="#" class="btn btn-primary pull-right">See our portfolio
<span class="icon fa fa-arrow-circle-right"></span>
</a>

(4) 每個(gè)鏈接都如此。這樣，每個(gè)按鈕上就都有了相同的圖標(biāo)了。

再給文本塊與傳送帶直接增加一些垂直內(nèi)邊距，現(xiàn)在太緊了。

(1) 在 less 文件夾下新建文件_page-content.less，用以保存這些修改及其他改動(dòng)。

//
//Page Contents
// ----------------------------

.page-contents {
 padding-top:20px; //上邊距
 padding-bottom:40px; //下邊距
}

(2) 在 __main.less 文件中導(dǎo)入該文件：

//Other custom files
@import "_page-content.less";

(3) 下面再在標(biāo)記中添加必要的類。打開(kāi)html文檔，給帶有 container 類的 div 元素添加 page-contents 類，就在傳送帶的結(jié)束標(biāo)簽處。

<div class="container page-contents">
<div class="row">

接下來(lái)，我們?cè)賹?duì)窄屏幕下這些塊的效果進(jìn)行調(diào)整。如下圖所示，在一欄布局時(shí)，標(biāo)題并沒(méi)有清除相鄰的按鈕。

※本書(shū)上有說(shuō)如果只是給每個(gè)包含塊 div 添加一個(gè) clearfix 類，用以清除浮動(dòng)是不行的。因?yàn)樵谝暱?768px 以上寬度時(shí)，需要讓這些快都浮動(dòng)起來(lái)，誰(shuí)也不能清除誰(shuí)。但是，筆者在測(cè)試的時(shí)候發(fā)現(xiàn)是可以實(shí)現(xiàn)同樣效果的。（估計(jì)是版本不同的問(wèn)題，筆者這里是當(dāng)前最新的正式版本 v3.3.7）這是因?yàn)?CSS 存在：

復(fù)制代碼代碼如下:

.clearfix::after { clear:both;}

但不存在：

復(fù)制代碼代碼如下:

.clearfix { clear:both；}

如果存在的話，就會(huì)造成視口 768px 以上寬度時(shí)，還是一欄顯示：

所以，實(shí)際情況，這里只需要在每個(gè)包含塊 div 添加一個(gè) clearfix 類就可以了。

復(fù)制代碼代碼如下:

<div>...

保存，編譯，刷新瀏覽器后顯示效果如下：

下面該來(lái)修飾頁(yè)腳了。

14.修飾頁(yè)腳

頁(yè)腳最主要的功能是羅列社交圖標(biāo)。就用 Font Awesome ！

查詢 Font Awesome 文檔，可以在 Brand Icons 部分找到我們想要的圖標(biāo)：http://fontawesome.io/icons/#brand

那么，只要把頁(yè)腳中的社交鏈接替換成帶有相應(yīng)類的 span 元素即可。

<ul class="social">
<li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
 <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
<li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
<li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
<li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
</ul>

替換之后的標(biāo)記讓原來(lái)的社交鏈接變成了圖標(biāo)鏈接：

為了讓這些圖標(biāo)水平居中，執(zhí)行下路操作：

(1) 創(chuàng)建一個(gè)新的文件 less/_foot.less 來(lái)保存相關(guān)樣式。

(2) 在 __main.less 導(dǎo)入這個(gè)文件

復(fù)制代碼代碼如下:

@import "_foot.less";

(3) 調(diào)整頁(yè)腳的樣式如下：

ul.social {
 margin: 0;
 padding: 0;
 width: 100%;
 text-align: center;
 > li {
 display: inline-block;
 font-size:18px;
 line-height:30px;
 .square(30px); //see bootstrap/mixins.less
 border-radius:36px;
 background-color:@gray-light;
 margin: 0 3px 3px 0;
 > a {
 color:#fff;
 }
 &:hover {
 text-decoration: none;
 background-color: @link-hover-color;
 }
 }
}

□ 去掉 ul 中默認(rèn)的內(nèi)、外邊距；

□ 將容器寬度拉伸到百分之百；

□ 內(nèi)容居中；

□ 列表項(xiàng)顯示為行內(nèi)塊，因此可以像文本一樣居中；

□ 鏈接也顯示為行內(nèi)塊，從而可以填滿有效空間；

□ 增大字號(hào)和行高；

□ 使用 Bootstrap 的混入，將寬度和高度設(shè)計(jì)為 30px 見(jiàn)方；

□ 要查看這個(gè)混入，打開(kāi) bootstrap/mixins/size.less ，搜到 .square，可以看到下列代碼：

復(fù)制代碼代碼如下:

.square(@size) { .size(@size; @size);}

□ border-radius 屬性的值設(shè)置得足夠大，以便圖標(biāo)及其背景呈現(xiàn)圓形；

□ 設(shè)置背景色、前景色和外邊距；

□ 去掉懸停狀態(tài)默認(rèn)出來(lái)的下劃線，同時(shí)把背景色改為淺灰色。

設(shè)置以上樣式后，我們?cè)俳o頁(yè)腳添加一些上、下內(nèi)邊距，然后將內(nèi)容居中，以便 Logo 居中顯示在社交圖標(biāo)上。

footer[role="contentinfo"] {
 padding-top: 24px;
 padding-bottom: 36px;
 text-align: center;
}

結(jié)果，如下所示：

15.接下來(lái)做什么

在實(shí)際做一個(gè)類似的項(xiàng)目之前，本身的作者強(qiáng)烈建議大家至少再做一件事。那就是花點(diǎn)時(shí)間優(yōu)化你的圖片、CSS 和 JavaScript。這些優(yōu)化并不難。

□ 壓縮圖片花不了多少時(shí)間，但卻能解決導(dǎo)致圖片臃腫的最大問(wèn)題。此章的圖片都在 Photoshop 中使用了 “保存為 Web 格式”，但或許你還是能夠再把它們壓縮一些。

□ 此外，應(yīng)該馬上從 __main.less 中刪除那些不需要的 Bootstrap 的 LESS 文件，然后最小化 main.css 。

□ 最后，還有對(duì) plugins.js 進(jìn)行“瘦身”，把 Bootstrap 原來(lái)大而全的 bootstrap.min.js 替換成只包含我們用到的 carousel.js、collapse.js 和 transition.js 的壓縮版。然后再壓縮最終的 plugins.js 。

做完以上三項(xiàng)優(yōu)化，整個(gè)網(wǎng)站的體量大致將縮小一半。在速度就是生命的年代，既要考慮用戶體驗(yàn)，又得考慮 SEO 排名，這么大幅度的優(yōu)化可不得了。

此外，還有兩個(gè)非常重要的可能性，或許i也應(yīng)該考慮到。

第一，我們可以通過(guò)實(shí)現(xiàn)響應(yīng)式來(lái)進(jìn)一步優(yōu)化傳送帶圖片。那些圖片太大了，特別是對(duì)小屏幕而言，實(shí)在沒(méi)有必要那么大。相反，如果是像視網(wǎng)膜屏這樣的高密度屏，為保證顯示效果清晰銳利，我們也應(yīng)該提供高分辨率的圖片。

第二，我們知道，觸摸屏設(shè)備的用戶喜歡用手指來(lái)回掃屏切換傳送帶圖片?？梢岳贸錾?Hammer.js 插件，只幾步就為傳送帶添加掃屏交互支持。

最終，此例的顯示效果如下：、