優化Bootstrap站點資源、完成Bootstrap響應式圖片、讓傳送帶支持手勢，具體內容如下

A.優化站點資源

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

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

A.1 優化圖片

這些圖片都通過 Photoshop 的 “保存為 Web 格式” 進行了一定程度的優化。但是，所有圖片加載一塊，也有719 KB。

這些作品很重要。（比較是個人作品站點。）可是，這些個體也確實大了一些。通過更有效的壓縮，能減少文件大小。

要減少文件大小，同時又不會損害圖片質量，可以使用一些工具，比如 Yahoo! 的 Smushit:http://www.smushit.com/（國內貌似不能訪問）

對于 Mac 用戶，免費的 ImageOptim 應用（https://imageoptim.com/mac）也能達到類似的目的。筆者使用該應用，把整體大小減少了50.2 KB 。

A.2 優化CSS

先看看為優化的樣式表 main.css 的文件多大：

134 KB! 任何負責的開發者都不會讓這么一個小網站帶那么大的樣式表。

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

(1) 開發 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) 當然得小心一點，否則一不留神就可能注釋掉必要的文件。因為時候要花點時間重編譯，全面測試一下。

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

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

當然，你還可以優化得再細一些。比如，可以打開每個保留的LESS文件，再把其中沒有必要的代碼一行一行注釋掉。

最后，我們來看看如何優化 JavaScript。

A.3 優化JavaScript

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

(1) 打開 js/plugins.js

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

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

□ carousel.js

□ collapse.js

□ transition.js

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

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

□ 確保傳送帶一切如常。

如果都沒有問題，說明已經寶航了所需要的 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 的代碼復制過去，運行，再把得到的代碼復制回 plugins.js。

這里選擇的是 Uglify JS。

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

(7) 比較大小。

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

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

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

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

最終文件只相當于原來的四分之一。

A.4 優化結果

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

優化之后，變成了 769 KB，節省了116 KB，超過了 10%，

事實上，我們還能夠繼續優化，尤其是針對小屏設備，方法就是實現響應式圖片。

B.實現響應式圖片

如果我們秉承移動友好的開發宗旨，那么就需要選擇一種響應式圖片技術。

B.1 分析作品傳送帶

在【Bootstrap】2.作品展示站點的個人作品網站中，傳送帶中圖片是為全寬布局設計的，寬度時 1600px，大小為 135~189 KB。把這么大的圖片發送到手機和非視網膜屏的平板中就過分了。在移動優先響應式設計的時代，這樣做又是不負責任的。

而且，如果再看一看小屏幕中的顯示效果，你可能會發現傳送帶中的圖片應該更高點、窄點才好，因為窄屏幕垂直方向向上空間相對富余一些。

在手機屏幕那么寬的視口中，我們的圖片，為大屏幕準備的圖片，是可以顯示，但如果能夠更多利用垂直空間，效果會更好。這一點通過下面的屏幕截圖可以看出來：

好的響應式圖片技術，應該能讓我們為小屏幕提供適當的圖片，滿足小文件、快速加載，以及改進設計的要求。

B.2 選擇方案

本書作者推薦的是 Picturefill 技術。Picturefill 方案較好地平衡了性能和設計問題，而且方案也相當簡單。

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

Picturefill 實現想飲食圖片只需簡單幾步：

(1) 準備好針對目標視口的理想圖片；

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

(3) 用 Picturefill 的標記模式來引入圖片。

一如往常，實際開發過程還有兩個步驟：

□ 測試；

□ 按需調整。

下面我們就一步一步來做。

B.2.1 準備響應式圖片

此書的源碼中已經準備好了特殊尺寸和經過優化的圖片，方便起見，我們把它們直接拷貝到我們的 img文件夾下：

打開這個圖片，會發現它們更窄一些，長寬比更小。這是為了像下面這樣在窄視口中更多利用垂直空間：

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

圖片準備好以后，接下來該 JavaScript 上場了。

B.2.2 使用 JavaScript

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

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

接下來，按照 Picturefill的約定準備標記。

B.2.3 修改標記結構

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

一下就是修改后第一張圖片的標記。

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

然后依次修改剩余的圖片標記就可以了。

B.2.4 測試與調整

保存并測試，你會發現這一次傳送帶的圖片不會調整適應屏幕寬度了。這是因為 Picturefill的標記沒有使用 Bootstrap 傳送帶樣式中的選擇符。

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

(1) 打開 _carousel.less

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

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

問題就這樣解決了。

B.3 最終的結果

在視口小于640ps時，傳送帶應該使用較小但相對較高的圖片。

以此為起點，大家可以參考 Picturefill 的文檔，根據需要再調整和適配自己需要的版本。

C.讓傳送帶支持手勢

在觸摸屏設備中，支持手勢輕掃來切換傳送帶圖片是一個非常實用的功能。

C1.有什么選擇

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

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

使用這個插件，可以通過下列步驟讓傳送帶支持輕掃手勢：

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

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

C.2 取得并包含 TouchSwipe 插件

下載后解壓縮，找到jquery.touchSwipe.min.js 文件，把其中的代碼復制到 plugins.js 中。這樣，插件就位了。接下來需要調用它。

C.3 調用 TouchSwipe

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

接下來的事很簡單，只需下列幾步：

(1) 打開項目中的 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) 保存后刷新，就可以通過左、右輕掃來切換圖片了。效果圖如下：

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

《Bootstrap 實戰》的PDF文檔和源碼鏈接：http://xiazai.VeVB.COm/201610/yuanma/BootstrapSite(VeVB.COm).rar

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。