bootstrap实战-读书笔记

bootstrap框架是以移动设备优先的设计理念，配合媒介查询实现各个屏幕的设计。

*less文件可实现按需加载，variables.less内定义了基础变量,mixins文件内定义了混合函数

*小技巧get,html标签结束注释
<code>
<div class="container">
...
</div>
</code>

*ie8下使用response.js实现媒介查询（本地端无效，请在客户端查看）
<code>

</code>

<div class="clearfix visible-sm"></div> 针对性地清除
<code>
<div class="col-sm-4 col-md-2">
...
<div class="col-sm-4 col-md-2">
...
<div class="col-sm-4 col-md-2">
...
<div class="about col-sm-12 col-md-6">
</code>
以前都需要row包裹清除浮动，现在可以包裹块内可以存放各类子元素，根据visible-*实现不同屏幕显示列数量。

*优化站点资源
文件大小（图片，css和JavaScript文件）,主要方法都是采用压缩。
图片：可采用响应式图片。
css：去掉不必要的文件，使用less工具按需加载（bootstrap.less加载了很多不没必要的样式）。
js：同上。

*响应式图片
本书主要介绍使用Picturefil实现响应式图片，小屏幕使用xx-sm图片，大屏幕显示正常图片。
代码示例如下：
<code>
<span data-picture data-alt="OKWU Homepage">
<span data-src="img/okwu-sm.jpg"></span>
<span data-src="img/okwu.jpg" data-media="(min-width: 640px)"></span>

<noscript>
img(img/okwu.jpg)
</noscript>
</span>
</code>
缺点： html层级要求太高，建议还是由服务器端处理响应式图片加载。

*Carousel支持手势
本书使用TouchSwipe插件实现。
相似插件还有hammer,Swipe等。

扩展推荐bootstrap实例网站
http://www8.hp.com/cn/zh/home.html（惠普中国）
http://www.adobe.com/cn/（adobe）