优化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:
□ 谷歌的 Closure Compiler:
打开这些在线工具，把 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 分析作品传送带