優(yōu)化Bootstrap站點(diǎn)資源、完成Bootstrap響應(yīng)式圖片、讓傳送帶支持手勢(shì)，具體內(nèi)容如下

A.優(yōu)化站點(diǎn)資源

速度很重要。用戶很關(guān)心。我們的站點(diǎn)必須加載夠快，否則用戶就會(huì)走人。SEO 也很重要。我們的站點(diǎn)必須加載夠快，否者搜索排名就會(huì)下降。

明白了這樣，我們就來(lái)清點(diǎn)一下 【Bootstrap】2.作品展示站點(diǎn) 中的資源。特別的，來(lái)看一看我們能控制的、影響頁(yè)面速度的重要因素 —— 文件大小，包括圖片、CSS和 JavaScript 文件。只要簡(jiǎn)單幾步，我們就可以給這些文件“瘦身”，縮短加載時(shí)間。

A.1 優(yōu)化圖片

這些圖片都通過(guò) Photoshop 的 “保存為 Web 格式” 進(jìn)行了一定程度的優(yōu)化。但是，所有圖片加載一塊，也有719 KB。

這些作品很重要。（比較是個(gè)人作品站點(diǎn)。）可是，這些個(gè)體也確實(shí)大了一些。通過(guò)更有效的壓縮，能減少文件大小。

要減少文件大小，同時(shí)又不會(huì)損害圖片質(zhì)量，可以使用一些工具，比如 Yahoo! 的 Smushit:http://www.smushit.com/（國(guó)內(nèi)貌似不能訪問(wèn)）

對(duì)于 Mac 用戶，免費(fèi)的 ImageOptim 應(yīng)用（https://imageoptim.com/mac）也能達(dá)到類似的目的。筆者使用該應(yīng)用，把整體大小減少了50.2 KB 。

A.2 優(yōu)化CSS

先看看為優(yōu)化的樣式表 main.css 的文件多大：

134 KB! 任何負(fù)責(zé)的開發(fā)者都不會(huì)讓這么一個(gè)小網(wǎng)站帶那么大的樣式表。

好消息時(shí)，我們可以輕易把這個(gè)大小減半。利用 Bootstrap 的模塊化 LESS 方案，可以立即縮小 CSS，步驟如下：

(1) 開發(fā) less/__main.less;

(2) 注釋掉不需要的 LESS 文件，比如這些：

//@import "bootstrap/glyphicons.less";
...
//@import "bootstrap/dropdowns.less";
//@import "bootstrap/button-groups.less";
//@import "bootstrap/input-groups.less";
...
//@import "bootstrap/breadcrumbs.less";
//@import "bootstrap/pagination.less";
//@import "bootstrap/pager.less";
//@import "bootstrap/labels.less";
//@import "bootstrap/badges.less";
//@import "bootstrap/jumbotron.less";
//@import "bootstrap/thumbnails.less";
//@import "bootstrap/alerts.less";
//@import "bootstrap/progress-bars.less";
//@import "bootstrap/media.less";
//@import "bootstrap/list-group.less";
//@import "bootstrap/panels.less";
//@import "bootstrap/responsive-embed.less";
//@import "bootstrap/wells.less";
//@import "bootstrap/close.less";
...
//@import "bootstrap/modals.less";
//@import "bootstrap/tooltip.less";
//@import "bootstrap/popovers.less";

(3) 當(dāng)然得小心一點(diǎn)，否則一不留神就可能注釋掉必要的文件。因?yàn)闀r(shí)候要花點(diǎn)時(shí)間重編譯，全面測(cè)試一下。

(4) 注釋掉不必要的文件后，選擇編譯器中的最小化（或者壓縮輸出）選項(xiàng)，最后重編譯以便，保存問(wèn) css/main.css 。

(5) 再看看文件有多大。我這里的結(jié)果是 91KB。減少了43KB。

當(dāng)然，你還可以優(yōu)化得再細(xì)一些。比如，可以打開每個(gè)保留的LESS文件，再把其中沒(méi)有必要的代碼一行一行注釋掉。

最后，我們來(lái)看看如何優(yōu)化 JavaScript。

A.3 優(yōu)化JavaScript

為優(yōu)化JavaScript，我們要把 plugins.js 文件中的 Bootstrap 插件，替換成只剩我們用到的幾個(gè)。然后再重新壓縮文件。

(1) 打開 js/plugins.js

(2) 刪除屬于 bootstrap.min.js 的代碼塊

(3) 打開 js/bootstrap 文件夾，這里保存著 Bootstrap 插件的獨(dú)立文件。組個(gè)打開系列文件，將他們的代碼復(fù)制到 plugins.js 文件里，這三個(gè)插件是我網(wǎng)站中用到的：

□ carousel.js

□ collapse.js

□ transition.js

(4) 保存"瘦身"版的 plugins.js 文件，刷新瀏覽器試試

□ 確保響應(yīng)式導(dǎo)航條在窄視口中能夠折疊，并且單擊按鈕可以展開下拉列表；

□ 確保傳送帶一切如常。

如果都沒(méi)有問(wèn)題，說(shuō)明已經(jīng)寶航了所需要的 JavaScript 。

(5) 下一步可以縮小(minify)或"丑化"(uglify) plugins.js 文件了。建議使用下列在線工具。

□ Uglify JS:https://marijnhaverbeke.nl/uglifyjs

□ YUI Compressor:http://refresh-sf.com/yui/

□ 谷歌的 Closure Compiler: http://closure-compiler.appspot.com

打開這些在線工具，把 plugins.js 的代碼復(fù)制過(guò)去，運(yùn)行，再把得到的代碼復(fù)制回 plugins.js。

這里選擇的是 Uglify JS。

(6) 保存后壓縮后的文件。

(7) 比較大小。

為了對(duì)比方便，這里為所有文件保存了備份：

□ plugins-all 包含完整的 bootstrap.min.js 代碼;

□ plugins-uncompressed.js 包含我們需要的三個(gè)插件，未壓縮;

□ plugins.js 是最終文件，縮小并去掉空格串聯(lián)的版本。

最終文件只相當(dāng)于原來(lái)的四分之一。

A.4 優(yōu)化結(jié)果

總體來(lái)看，我們的優(yōu)化工作取得了成效。把圖片、CSS 和 JavaScript 都算一塊，原來(lái)的大小是885 KB。

優(yōu)化之后，變成了 769 KB，節(jié)省了116 KB，超過(guò)了 10%，

事實(shí)上，我們還能夠繼續(xù)優(yōu)化，尤其是針對(duì)小屏設(shè)備，方法就是實(shí)現(xiàn)響應(yīng)式圖片。

B.實(shí)現(xiàn)響應(yīng)式圖片

如果我們秉承移動(dòng)友好的開發(fā)宗旨，那么就需要選擇一種響應(yīng)式圖片技術(shù)。

B.1 分析作品傳送帶

在【Bootstrap】2.作品展示站點(diǎn)的個(gè)人作品網(wǎng)站中，傳送帶中圖片是為全寬布局設(shè)計(jì)的，寬度時(shí) 1600px，大小為 135~189 KB。把這么大的圖片發(fā)送到手機(jī)和非視網(wǎng)膜屏的平板中就過(guò)分了。在移動(dòng)優(yōu)先響應(yīng)式設(shè)計(jì)的時(shí)代，這樣做又是不負(fù)責(zé)任的。

而且，如果再看一看小屏幕中的顯示效果，你可能會(huì)發(fā)現(xiàn)傳送帶中的圖片應(yīng)該更高點(diǎn)、窄點(diǎn)才好，因?yàn)檎聊淮怪狈较蛳蛏峡臻g相對(duì)富余一些。

在手機(jī)屏幕那么寬的視口中，我們的圖片，為大屏幕準(zhǔn)備的圖片，是可以顯示，但如果能夠更多利用垂直空間，效果會(huì)更好。這一點(diǎn)通過(guò)下面的屏幕截圖可以看出來(lái)：

好的響應(yīng)式圖片技術(shù)，應(yīng)該能讓我們?yōu)樾∑聊惶峁┻m當(dāng)?shù)膱D片，滿足小文件、快速加載，以及改進(jìn)設(shè)計(jì)的要求。

B.2 選擇方案

本書作者推薦的是 Picturefill 技術(shù)。Picturefill 方案較好地平衡了性能和設(shè)計(jì)問(wèn)題，而且方案也相當(dāng)簡(jiǎn)單。

PS:相關(guān)文章：https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/（這篇文章比較早了，建議還是直接看官方文檔）

Picturefill 實(shí)現(xiàn)想飲食圖片只需簡(jiǎn)單幾步：

(1) 準(zhǔn)備好針對(duì)目標(biāo)視口的理想圖片；

(2)下載并包含 Picturefill 的 JavaScript 文件；

(3) 用 Picturefill 的標(biāo)記模式來(lái)引入圖片。

一如往常，實(shí)際開發(fā)過(guò)程還有兩個(gè)步驟：

□ 測(cè)試；

□ 按需調(diào)整。

下面我們就一步一步來(lái)做。

B.2.1 準(zhǔn)備響應(yīng)式圖片

此書的源碼中已經(jīng)準(zhǔn)備好了特殊尺寸和經(jīng)過(guò)優(yōu)化的圖片，方便起見，我們把它們直接拷貝到我們的 img文件夾下：

打開這個(gè)圖片，會(huì)發(fā)現(xiàn)它們更窄一些，長(zhǎng)寬比更小。這是為了像下面這樣在窄視口中更多利用垂直空間：

當(dāng)然，圖片也小一些，900px × 600px，保證在視網(wǎng)膜屏中也能有足夠的像素，但比起初的1600px × 800px 就小多了.。這些小圖片平均都比原來(lái)的大圖片小50%以上。

圖片準(zhǔn)備好以后，接下來(lái)該 JavaScript 上場(chǎng)了。

B.2.2 使用 JavaScript

Picturefill 的文件及文檔位于 GitHub，地址是：https://github.com/scottjehl/picturefill

大家可以花點(diǎn)時(shí)間看看文檔。我們一會(huì)就要用到文檔中推薦的元素。我們要先下載該文件，解壓縮后，找到 picturefill.min.js，然后把它復(fù)制到 plugins.js 文件中。

接下來(lái)，按照 Picturefill的約定準(zhǔn)備標(biāo)記。

B.2.3 修改標(biāo)記結(jié)構(gòu)

在 html 文檔中，修改每張圖片的標(biāo)記，使用 Picturefill 的 picture 元素的模式。這里的標(biāo)記默認(rèn)采用小圖片，但視口在 640px 及以上的瀏覽器和IE8例外。

一下就是修改后第一張圖片的標(biāo)記。

<picture>
 <source srcset="img/okwu.jpg" media="(min-width:640px)" />
 <img srcset="img/okwu-sm.jpg" alt="OKWU.edu Homepage" />
</picture> 

然后依次修改剩余的圖片標(biāo)記就可以了。

B.2.4 測(cè)試與調(diào)整

保存并測(cè)試，你會(huì)發(fā)現(xiàn)這一次傳送帶的圖片不會(huì)調(diào)整適應(yīng)屏幕寬度了。這是因?yàn)?Picturefill的標(biāo)記沒(méi)有使用 Bootstrap 傳送帶樣式中的選擇符。

我們的修改 _carousel.less 文件中相應(yīng)的選擇符，好讓圖片撐滿可用空間，步驟如下：

(1) 打開 _carousel.less

(2) 搜索到注釋// Account for jankitude on images ，把 > img 和 >a >img 子選擇符，替換成簡(jiǎn)單點(diǎn)的后代 img 選擇符，以便選中現(xiàn)在在Picturefill 標(biāo)記中嵌套較深的圖片：

// Account for jankitude on images
//> img,
//> a > img,
img { //added to apply to Picturefill responsive image solution
 &:extend(.img-responsive);
 line-height: 1;
 min-width:100%; //added
 height:auto; //added
 ...

問(wèn)題就這樣解決了。

B.3 最終的結(jié)果

在視口小于640ps時(shí)，傳送帶應(yīng)該使用較小但相對(duì)較高的圖片。

以此為起點(diǎn)，大家可以參考 Picturefill 的文檔，根據(jù)需要再調(diào)整和適配自己需要的版本。

C.讓傳送帶支持手勢(shì)

在觸摸屏設(shè)備中，支持手勢(shì)輕掃來(lái)切換傳送帶圖片是一個(gè)非常實(shí)用的功能。

C1.有什么選擇

如果只是要讓傳送帶之處輕掃手勢(shì)，只要一個(gè) JavaScript 插件和幾行代碼就可以了。Justin Lazanowski 專門為實(shí)現(xiàn) Bootstrap 3 傳送帶的手勢(shì)交互寫過(guò)一篇文章，提到三種選擇。文章地址為：http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

這里將使用 jQuery插件 TouchSwipe，其GitHub 地址為：https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

使用這個(gè)插件，可以通過(guò)下列步驟讓傳送帶支持輕掃手勢(shì)：

(1) 把 TouchSwipe 插件包含到我們的插件文件中；

(2) 在 main.js 文件中寫幾行調(diào)用代碼。

C.2 取得并包含 TouchSwipe 插件

下載后解壓縮，找到j(luò)query.touchSwipe.min.js 文件，把其中的代碼復(fù)制到 plugins.js 中。這樣，插件就位了。接下來(lái)需要調(diào)用它。

C.3 調(diào)用 TouchSwipe

需要寫一行代碼，命令 TouchSwipe 監(jiān)聽傳送帶上的輕掃事件，然后將其轉(zhuǎn)換成 Bootstrap 的方法調(diào)用：.carousel('prev') 和 .carousel('next')。關(guān)于這些方法，可以參考 Bootstrap 的文檔：http://getbootstrap.com/javascript/。

接下來(lái)的事很簡(jiǎn)單，只需下列幾步：

(1) 打開項(xiàng)目中的 main.js 文件。

(2) 在其中添加如下代碼：

//Enable swiping...
 $(".carousel-inner").swipe({
 swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
 if (direction == "right") {//向右劃
 //Cycles to the next item.
 $(this).parent().carousel("prev");
 } else if (direction == "left") {//向左劃
 //Cycles to the previous item.
 $(this).parent().carousel("next");
 }
 }
 });

(3) 保存后刷新，就可以通過(guò)左、右輕掃來(lái)切換圖片了。效果圖如下：

顯示效果地址：http://ycdoit.com/show/bootstrap-code-02.html

《Bootstrap 實(shí)戰(zhàn)》的PDF文檔和源碼鏈接：http://xiazai.jb51.net/201610/yuanma/BootstrapSite(jb51.net).rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論