當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【读书笔记《Bootstrap 实战》】2.作品展示站点

發布時間：2024/1/17 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了【读书笔记《Bootstrap 实战》】2.作品展示站点小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

假設我們已經想好了要給自己的作品弄一個在線站點。一如既往，時間緊迫。我們需要快一點，但作品展示效果又必須專業。當然，站點還得是響應式的，能夠在各種設備上正常瀏覽，因為這是我們向目標客戶推銷時的賣點。這個項目可以利用Bootstrap的很多內置特性，同時也將根據需要對Bootstrap進行一些定制。

1.設計目標

雖然對大屏幕中的展示效果已經胸有成竹，但我們還應該從小設備開始，強迫自己聚焦在關鍵的要素上面。

這個作品展示站點應該具有下列功能：

□ 帶Logo的可折疊的響應式導航條；

□ 重點展示四張作品的圖片傳送帶；

□ 單欄布局中包含三塊內容，每塊內容中都包含標題、短段落和吸引人點擊閱讀的大按鈕；

□ 頁腳包含社交媒體鏈接。

?下面的屏幕截圖展示了設計方案：

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

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

在這個針對大屏幕的設計效果中，可以發現下列功能：

□ 位于頂部的導航條，而且各導航條都附帶圖標；

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

□ 三欄布局分別容納三塊文本內容；

□ 頁腳在布局中水平居中。

這個設計的配色很簡單，只有灰階以及用于鏈接和突出顯示的金綠色。

明確了設計目標，接下來就可以布置內容了。

2.基本頁面搭建

根據前面文章【Bootstrap】1.初識Bootstrap?的說明，我們可以暫時把項目的基本框架搭建起來。其html文檔代碼如下：

<!DOCTYPE html>     <html class="no-js">  <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>作品展示站點</title><meta name="description" content=""><meta name="viewport" content="width=device-width"><link href="favicon.ico" type="image/x-icon" rel="shortcut icon" /><link rel="stylesheet" href="css/main.css"><script src="js/vendor/modernizr-2.6.2.min.js"></script> </head> <body><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></div></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'"></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>

打開頁面后，可以看到導航欄后面就是作品圖片：

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

倒也簡單。還是開始讓它變身吧！

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

3.搭建傳送帶

下面先來搭建傳送帶，傳送帶會循環展示我們作品的四張特寫圖片。其標記結構的官方文檔地址是：http://getbootstrap.com/javascript/#carousel 。

可以按照示例中的結構設置其中的元素。以下代碼就是傳送帶的所有標記，包含各個部分，首先是進度指示器：

?整個傳送帶是一個帶ID屬性的div標簽，其 carousel 類用于把Bootstrap 的傳送帶CSS應用到這個元素，為指示器、傳送帶項和前一張及后一張控件添加樣式。

進度指示器的 data-target 屬性必須使用傳送帶的 ID?carousel-example-generic 。有了這個屬性，JavaScript 插件才能為活動的傳送帶項添加 active 類。在此我們預先為第一個指示器添加了active類。然后，類的切換就由JavaScript控制了。它會刪除第一個指示器的這個類，再添加到后續指示器，如此循環。

此外，還要注意 data-slide-to 的值從0開始，與JavaScript和其他編程語言一樣。記住：從0開始，不是從1開始。

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

carousel-inner 元素內部是傳送帶項，是一組div標簽，每個都帶有class="item"。把第一項修改成包含item 和active 兩個類，使其一開始就可見。

此時的標記結構如下所示：

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

傳送帶項之后，還需要添加傳送帶控件，用于在傳送帶左、右兩側顯示前一個和后一個按鈕。你會發現其中有類對應著 Glyphicon字體圖標。在控件后面，我們在用一個結束div標簽關閉整個傳送帶。

<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:每個傳送帶控件的href屬性必須是最外圍傳送帶元素的ID值（這里是?carousel-example-generic?）。

添加以上代碼之后，保存刷新瀏覽器。Bootstrap的樣式和JavaScript都應該生效，頁面中的圖片應該變身成為滾動的傳送帶。現在的顯示效果如下：

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

(1) 打開 js/main.js

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

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

(3) 保存并刷新。

?相關的選項可以參考Bootstrap 傳送帶的官方文檔：http://getbootstrap.com/javascript/#carousel?。

4.創建響應式分欄

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

這里將擁戴Bootstrap 移動優先的響應式網格，其官方文檔地址為：http://getbootstrap.com/css/#grid?（其中文文檔地址為：?http://v3.bootcss.com/css/#grid）。

簡單的說，Bootstrap 內置12欄網格系統，其基本的類結構支持 col-12 表示全寬，col-6表示半寬，col-4表示四分之一寬，以此類推。

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

小斷點有一個特殊的欄類命名法：col-sm-。因為我們向在小斷點之上使用三欄，所以這里使用 class="col-sm-4"。這樣在小斷點之下，分塊元素會保持全寬，而在小斷點之上，則會各站三分之一寬并肩排列。完整的結構如下所示：

<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 類用于約束內容的寬度，并使其在頁面內居中；

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

□ container 類和row 類都設定了清除，因而它們可以包含浮動元素，同時又清除之前的浮動元素。

現在，保存并刷新。可以看到對應的顯示效果如下：

這樣就利用響應式網格系統完成了響應式分欄，接下來我們要利用Bootstrap的按鈕樣式，把內容分塊中的鏈接做成突出的效果。

5.把鏈接變成按鈕

把重要的內容鏈接轉換成突出顯示的按鈕很簡單。為此要用到如下幾個關鍵的類。

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

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

□ pull-right 類用于把鏈接浮動到右側，使其占據更大的空間，從而便于發現和點擊。

把上述這幾個類添加到三個內容塊末尾的鏈接上：

<p><a href="#" class="btn btn-primary pull-right">See our portfolio</a></p>

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

此處按鈕的標記結構的官方文檔地址為：http://getbootstrap.com/css/#buttons （中文文檔：http://v3.bootcss.com/css/#buttons）。

在基本的標記結構就為的條件下，接下來可以進行微調了。謂詞需要用到自定義的CSS，而我們要借此機會體驗一下Bootstrap的LESS文件的強大威力。

6.理解LESS

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

PS:當前的最新版本是： v4.0.0-alpha.4?

本節會介紹創建創建、編輯、頂置一些LESS文件，以便為我們的設計生成期望的CSS。

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

□ Sitepoint 網站關于 LESS 的完整介紹：https://www.sitepoint.com/a-comprehensive-introduction-to-less/

簡而言之，使用LESS預處理器來生成CSS是一件既令人激動又十分輕松的事。

6.1 嵌套規則

嵌套規則極大提高了組合樣式的效率。比如，CSS中的選擇符可能會多次重復出現：

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

其中這些相同的選擇符用LESS寫會簡潔很多，只要使用一個簡單的嵌套即可：

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

編譯后，這些規則會生成標準的CSS。但 LESS的嵌套規則更容易寫，也更容易維護。

6.2 變量

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

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

在這些變量的值變化后，可以自動將它們更新到整個站點。這是因為我們在LESS文件中使用了這些變量：

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

6.3 混入

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

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

在LESS 中，可以只寫一個供混入的規則，后面則可以通過 @boxmodel 參數來指定期望的盒模型：

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

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

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

編譯后，還會為每個元素生成三行CSS 。

6.4 運算式

通過運算式可以基于變量實現數學計算。比如，可以將一種顏色作為基準，對其進行加亮和減暗處理：

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

還可以計算內邊距的值，以適應導航條的高度。比如，以下Bootstrap 的 navbar.less 文件中的代碼，就將導航項的內邊距值設為導航條高度減去行高之后剩余的高度值。然后，把這個值一分為二，平均應用為頂部和底部內邊距:

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

6.5 導入文件

LESS 編譯器支持導入并組合多個文件，最終生成一個統一的CSS文件。我們可以指定導入的次序，按照需要的層疊關系精確組織結果樣式表。

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

// 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";

而最終得到的是一個統一的CSS文件，其中的樣式經過從一般到特殊的層疊，正是我們想要的。

6.5 模塊化

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

正因為上述原因，LESS及其他 CSS預編譯器才會變得如此流行。

7.根據需要定制Bootstrap的LESS文件

在定制Bootstrap的LESS文件期間，我們會發揮很大的主觀能動性，具體如下：

□ 組織less文件夾，以便靈活、自由地實現我們需要，同時也讓將來的維護者更方便；

□ 自定義Bootstrap提供的幾個LESS文件；

□ 創建幾個新的LESS文件；

□ 為站點整合一套較大的字體圖標，數量翻倍，并將圖標運用于社交媒體鏈接。

換句話說，我們不光要學習Bootstrap的約定，還要發揮自己的創造力。

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

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

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

為什么要多此一舉呢？因為我們很快就要創建自己的LESS文件了。這樣一來，我們創建的文件就不會與Bootstrap內置的文件混淆，便于調整。

7.1 自定義變量

按照慣例，我們先復制一份Bootstrap的變量文件，然后對其進行修改。

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

(2) 瀏覽一下這個文件，會發現各種變量，有定義基本顏色值的，有定義頁面背景顏色的，有定義基本顏色值，有定義頁面背景顏色的，有定義字體的，還有定義導航條和背景高度的，等等。看起來很好，但改動一下更妙。改動之前，我們先存一個副本，以防將來改壞，好恢復。

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

下面我們就來自定義顏色。

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

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

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

(3) 代碼如下:

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

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

@brand-primary: #c1ba62;

要看結果，需要導入這些新變量并重新編譯生成CSS。

7.2 導入新變量

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

可以看到鏈接和類為 btn-primary 的按鈕顏色都會發生變換，因為它們使用的都是變量 @brand-primary 的顏色。

7.3 編輯導航條變量

下面，我們來編輯設定導航條高度、顏色和懸停效果的變量。

(1) 在?_variables.less 中，搜索到下列變量，并修改為下列值。這樣一來，就可以增加導航條的高度、把品牌色應用給鏈接，同時利用其他相關的顏色變量。

@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) 保存修改、編譯并刷新。其修改前后的顯示效果如下：

可以看到有關導航條的新特性：

□ 高度增加了14px;

□ 背景變成了白色；

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

□ 導航項的背景在懸停時稍暗了一點；

□ 導航項的背景在活動時稍暗一些；

□ 鏈接文本的顏色在懸停時和活動時變成了品牌色。

接下來，我們把Logo放置到位。

8.添加 Logo 圖片

在 img 文件夾里找到 logo.png 文件。你會發現這個圖片非常大，有900px 寬。在我們最終的設計中，這個Logo只有120px寬。因為多出來的像素將被壓縮到較小的空間內，所以這也是讓圖片在所有設備（包括視網膜屏設備）中保持清晰的一種簡便方法。與此同時，這個圖片的尺寸也針對Web進行了優化，只有19 KB。

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

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

<a class="navbar-brand" href="index.html">Bootstrappin'</a>

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

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

9.調整導航項內邊距

現在，我們來調整一下導航項，以便文本與Logo位于同一基線之上。

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

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

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

// 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 指定了一個臨界寬度，大于這個寬度，導航條就會擴展到與屏幕同寬；小于這個寬度，導航條就會折疊起來變成移動應用風格的響應式導航。（這個變量是在?_variables.less 中定義的）。

(4) 現在，padding-top 和 padding-bottom 值都是動態計算的，以確保導航中的文本垂直居中。而我們想增加上內邊距，減少下內邊距。與此同時，我們還要擴大導航項的間隔，再把字體增大一些。把原來的代碼使用單行注釋，把需要的規則寫在下面：

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

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

10.添加圖標

現在輪到為導航項添加圖標了。我們直接使用 Bootstrap 自帶的 Glyphicons，然后嘗試下 Font Awesome 這個大型圖標庫。

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

我們先從 Home 導航項開始。

(1) 要給 Home 導航項添加 Glyphicons Home 圖標，只要在文本之前添加一個 span 標簽，再加上特定的類即可：

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

(3) 如果沒看到字體，請確保：

□ Glyphicon 字體位于 fonts 文件夾；

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

(4) 接著給剩下的導航項添加對應的圖標。以下依此是 ?Portfolio、Team 和 Contact 的導航項代碼：

<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) 對應的折疊后的響應式效果：

還不錯。

不過，這里的圖標與設計方案中的并不完全一致。設計方案中的是這樣的：

Bootstrap 中免費使用的 Glyphicons 不包含計算器顯示器和群組圖標。此外，我們也沒有從 Glyphicons 圖標中找到適合頁腳中社交媒體鏈接的圖標。

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

11.添加 Font Awesome 圖標

目前，Font Awesome 中包含364個圖標，是 Glyphicons 的 Bootstrap 版本的進兩倍。 Font Awesome 圖標是免費、開源的，而且也很方便在 Bootstrap 中使用。其主頁地址為：http://fontawesome.io/

下面我們就來使用Font Awesome 圖標。

(1) 打開Font Awesome的主頁，找到下載地址。當然進入其Github鏈接下載代碼：https://github.com/FortAwesome/Font-Awesome

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

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

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

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

(5) Font Awesome 的 less 文件中的包含一個變量，指定了 Font Awesome 字體的路徑。我們要確保該路徑與項目文件夾結構一致。打開 Font Awesome 變量文件

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

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

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

(6) 保存并編譯 CSS。然后更新 Team 導航項的代碼。

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

PS:如果你看到的是一個奇怪的符號，或者什么都沒有看到，那說明 Web 字體并沒有應用。這時，要檢查圖標類是否正確（包括 fa 類），確保 Font Awesome 字體都在 fonts 文件夾中，而且 font-awesome/variables.less 中的路徑也沒有問題

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

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

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

(2) 然后把 html文檔中的圖標標記的類，改為 Font Awesome 圖標對應的類名。

查看 Font Awesome 圖標的頁面?http://fontawesome.io/icons/，可以看到圖標對應的類名。修改對應的導航項代碼如下：

<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.調整傳送帶

?關于傳送帶，我們主要還是使用 Bootstrap 默認的樣式，同時對幾個比較重要的地方進行定制。為此，和前面一樣，我們復制一份 Bootstrap 的?carousel.less 文件到less文件夾下，重命名為 _carousel.less，然后在 __main.less 更新其導入信息。下面我們就可以開始定制了。

12.1 把控件改成使用 Font Awesome 圖標

如果你在前面就把 Glyphicons 字體刪除了，那就會發現傳送帶左右兩側的“上一個”和“下一個”控件不見了。因為這兩個圖標就來自 Glyphicons 。我們可以讓 Font Awesome 圖標取而代之。

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

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

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

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

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

關于以上修改說明如下：

□?通過添加基本的icon類，我們可以使用任意圖標，樣式都不會出問題；

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

□?修改left: 和 right: 定位的值之后，讓圖標更靠近傳送帶兩側的邊界。

保存，編輯，刷新。新的 Font Awesome 圖標應該粉墨登場了。

下面，我們對傳送帶進行一番修飾。

12.2 添加上、下內邊距

先給.carousel 元素添加一點上、下內邊距，并將背景色設置為 @gray-lighter。

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

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

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

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

12.3 強制圖片全寬

無論屏幕多寬，我們都想讓圖片保持與屏幕同寬。因為傳送帶中的圖片寬度為1600px，基本可以涵蓋大多數屏幕。如果屏幕寬度超過1600px，那右側就會出現間隙。

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

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

現在我們只要在文件中新增兩行代碼即可：

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

做出這個調整后，無論把瀏覽器窗口拉的多寬，圖片都會跟著變寬。

接下來，需要限定傳送帶的最大高度。

12.4 約束傳送帶的最大高度

我們發現，在中大型屏幕中，傳送帶變得太高了。根據設計方案，傳送帶的高度應該大致在440px。簡單，我們只要在圖片的父元素 .carousel-inner > .item 上添加這個限制即可：

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

因為 .carousel-inner 元素有一條規則是 overflow:hidden，而 .item 元素又被限定了高度，所以圖片高度超過最高限制后，其下面的部分會被隱藏起來。

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

// 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;}

保存、編譯并刷新。你會發現這時候的傳送帶已經基本形成，無論寬屏還是窄屏，都有模有樣了。

12.5 重定位指示器

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

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

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

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

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

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

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

這是把指示器向上調的，現在我們用不著了。只需要把它注釋掉，就不會被編譯到CSS中了。

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

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

接下來，我們調整指示器的外觀，讓它們更大，更顯眼一些。

12.6 調整指示器外觀

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

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

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

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

@carousel-indicator-bg: @gray-light; //新增默認的背景色,作為默認狀態下指示器的填充色 @carousel-indicator-active-bg: @gray-lightest; //活動狀態下的背景色 @carousel-indicator-border-color: transparent; //設置為透明

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

?至此，除了讓活動狀態下的指示器不可見，其他樣式都就緒了。

下面再打開?_carousel.less 。

(1) 找到下面的規則：?

.carousel-indicators {position: absolute;...

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

□ 把 width 和 height 增大到 18px；

□ 刪除外邊距

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

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

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

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

(3) 注意下面這兩個針對IE8-9 的手法，它們在這兩個瀏覽器中為指示器提供背景顏色。因為我們已經給所有指示器都提供了背景色，所以這幾行就沒有必要了。這里把它們都注釋掉，以免干擾前面聲明的背景色。

//background-color: #000 \9; // IE8//background-color: rgba(0,0,0,0); // IE9

(4) 接下來，再注釋掉 .active 選擇符下面的 margin、width、height，因為我們不希望活動狀態下的指示器變小，如下圖所示：

?修改后的代碼如下：

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

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

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

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

這樣，傳送帶的調整工作就做完了。

13.調整分欄及其內容

下面我們來調整下位于標題 Welcome!、Recent Updates、Our Team 下面的三個內容塊。

?首先，為每個塊中的按鈕添加圓圈箭頭圖標。這里還是使用 Font Awesome 圖標。

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

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

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

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

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

再給文本塊與傳送帶直接增加一些垂直內邊距，現在太緊了。

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

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

(2) 在 __main.less 文件中導入該文件：?

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

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

接下來，我們再對窄屏幕下這些塊的效果進行調整。如下圖所示，在一欄布局時，標題并沒有清除相鄰的按鈕。

※?本書上有說如果只是給每個包含塊 div 添加一個 clearfix 類，用以清除浮動是不行的。因為在視口 768px 以上寬度時，需要讓這些快都浮動起來，誰也不能清除誰。但是，筆者在測試的時候發現是可以實現同樣效果的。（估計是版本不同的問題，筆者這里是當前最新的正式版本 v3.3.7）這是因為 CSS 存在：

.clearfix::after { clear:both;}

但不存在：

.clearfix { clear:both；}

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

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

<div class="col-sm-4 clearfix"> ...

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

下面該來修飾頁腳了。

14.修飾頁腳

頁腳最主要的功能是羅列社交圖標。就用 Font Awesome ！

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

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

替換之后的標記讓原來的社交鏈接變成了圖標鏈接：

為了讓這些圖標水平居中，執行下路操作：

(1) 創建一個新的文件 less/_foot.less 來保存相關樣式。

(2) 在 __main.less 導入這個文件

@import "_foot.less";

(3) 調整頁腳的樣式如下：

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.lessborder-radius:36px;background-color:@gray-light;margin: 0 3px 3px 0;> a {color:#fff;}&:hover {text-decoration: none;background-color: @link-hover-color;}} }

□ 去掉 ul 中默認的內、外邊距；

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

□ 內容居中；

□ 列表項顯示為行內塊，因此可以像文本一樣居中；

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

□ 增大字號和行高；

□ 使用 Bootstrap 的混入，將寬度和高度設計為 30px 見方；

□ 要查看這個混入，打開 bootstrap/mixins/size.less ，搜到 .square，可以看到下列代碼：

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

□ border-radius 屬性的值設置得足夠大，以便圖標及其背景呈現圓形；

□ 設置背景色、前景色和外邊距；

□ 去掉懸停狀態默認出來的下劃線，同時把背景色改為淺灰色。

設置以上樣式后，我們再給頁腳添加一些上、下內邊距，然后將內容居中，以便 Logo 居中顯示在社交圖標上。

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

結果，如下所示：

15.接下來做什么

在實際做一個類似的項目之前，本身的作者強烈建議大家至少再做一件事。那就是花點時間優化你的圖片、CSS 和 JavaScript。這些優化并不難。

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

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

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

做完以上三項優化，整個網站的體量大致將縮小一半。在速度就是生命的年代，既要考慮用戶體驗，又得考慮 SEO 排名，這么大幅度的優化可不得了。

此外，還有兩個非常重要的可能性，或許i也應該考慮到。

第一，我們可以通過實現響應式來進一步優化傳送帶圖片。那些圖片太大了，特別是對小屏幕而言，實在沒有必要那么大。相反，如果是像視網膜屏這樣的高密度屏，為保證顯示效果清晰銳利，我們也應該提供高分辨率的圖片。

第二，我們知道，觸摸屏設備的用戶喜歡用手指來回掃屏切換傳送帶圖片。可以利用出色的 Hammer.js 插件，只幾步就為傳送帶添加掃屏交互支持。

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

顯示效果地址：http://yexiaochao.github.io/show/bootstrap-code-02.html （附《Bootstrap 實戰》的PDF文檔和源碼鏈接：http://pan.baidu.com/s/1slPDoux）

本例源碼下載：bootstrap-code-02.zip

總結

以上是生活随笔為你收集整理的【读书笔记《Bootstrap 实战》】2.作品展示站点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 20145240 《信息安全系统设计基础
下一篇： Stackoverflow上人气最旺的十