【假一罚四】深入理解Bootstrap徐涛

前言第1章 入门准备 1．1 框架简介 1．2 新手入门 1．3 文件结构 1．4 HTML标准模板 1．5 CSS基本语法 1．5．1 优先级 1．5．2 选择器 1．5．3 伪类 1．5．4 display属性 1．5．5 媒体查询 1．6 JavaScript基本语法 1．6．1 II和&&运算符 1．6．2 立即调用的函数表达式 1．6．3 原型 1．7 jQuery基本用法 1．7．1 事件绑定 1．7．2 事件命名空间 1．7．3 $．data() 1．8 HTML5辅助设计第2章 整体架构 2．1 整体架构 2．2 栅格系统 2．2．1 实现原理 2．2．2 基本用法 2．2．3 响应式栅格 2．2．4 对重复代码的处理 2．3 CSS组件架构的设计思想 2．3．1 基础样式 2．3．2 颜色样式 2．3．3 尺寸样式 2．3．4 状态样式 2．3．5 特殊元素样式 2．3．6 并列元素样式 2．3．7 嵌套子元素样式 2．3．8 动画样式 2．3．9 小结 2．4 JavaScript插件架构 2．4．1 HTML布局规则 2．4．2 JavaScript实现步骤 2．4．3 通用技术 2．4．4 不足 2．5 禁用响应式布局第3章 CSS布局 3．1 概述 3．2 基础排版 3．2．1 标题 3．2．2 页面主题 3．2．3 强调文本 3．2．4 缩略语……第4章 CSS组件第5章 JavaScript插件第6章 实战：扩展现有组件第7章 实战：Win8磁贴组件开发第8章 实战：组合应用开发第9章 第三方扩展附录A 浏览器兼容性支持附录B 第三方插件开发建议附录C 从2.x迁移到3.x附录D Glyphicons图标全集

　　（1） 资深Web技术专家经验结晶，根据Bootstrap**版本撰写，内容系统、分析深入、实战性强，前端工程师必备
　　（2） 授人以鱼，全面讲解各功能组件的使用方法，以及对现有插件和扩展的二次开发；授人以渔，深入分析其架构思想和源码实现，以及如何开发自定义的完整插件和扩展

 　　1.5.5　媒体查询
　　媒体查询是进行响应式设计的核心要素，其功能非常强大。这里我们只列出Bootstrap用到的功能

 　　Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式。示例如下：
　　@media (max-width: 767px) {
　　/*在小于768像素的屏幕里,这里的样式才生效*/
　　}
　　@media (min-width: 768px) and (max-width: 991px) {
　　/*在768和991像素之间的屏幕里,这里的样式才生效*/
　　}
　　@media (min-width: 992px) and (max-width: 1199px) {
　　/*在992和1199像素之间的屏幕里,这里的样式才生效*/
　　}
　　@media (min-width: 1200px) {
　　/*在大于1200像素的屏幕里,这里的样式才生效*/
　　}
　　1.6　JavaScript基本语法
　　本节和上节的CSS语法类似，主要介绍JavaScript的基本用法。理解这些用法以后，就可以按照Bootstrap的开发规范去开发自己的各种插件了。
　　1.6.1　||和&&运算符
　　Java Script中的||和&&两个运算符，与其他语言相比略有不同，其符合如下规则：
　　||表示，如果个元素可以转换为true，则返回个元素的值，否则查询第二个元素的值。如果多个||一起用，则按顺序优先级判断。
　　&&则相反，如果个元素可以转换为false，才返回个元素的值，否则返回第二个元素的值，多个&&一起用时，也是按顺序优先级判断。
　　说得严谨一些就是：
　　a && b&& c&&d：返回个可转换为false的元素值。
　　a||b||c||d：返回个可转换为true的元素值。
　　上述运算符的转换规则如下：
　　对象为true
　　非零数字为true
　　非空字符串为true
　　其他为false
　　1.6.2　立即调用的函数表达式
　　在JS里，function在定义的时候就可以通过在后面加一个小括号的形式立即进行调用。比如：
　　(function () { /* code */ } ()); // 推荐使用这个
　　(function () { /* code */ })(); // 这个也是可以用的
　　(function () { /* code */ } (1)); // 传入参数1
　　(function () { /* code */ })(2); // 传入参数2
　　Bootstrap的所有的JS插件都使用了这个模式。比如在alert.js文件里有以下代码：
　　 function ($) {
　　"use strict";
　　}(jQuery);
　　这个文件的意思是声明一个function，然后立即执行，并且在执行的时候传入jQuery对象作为参数。这么做的好处是，此时function内部的$已经是局部变量了，不会再受外部作用域的影响了。
　　function前面的 号和分号的功能是一样的，主要是防止定义了不符合规定的代码。比如上面的这段代码若没加 号，则代码连接在一起执行就会出错。这样就消除了出错的可能性。不习惯的话，改成这样也行：
　　;function ($) {
　　"use strict";
　　}(jQuery);
　　关于立即执行的函数表达式，请访问笔者的博客“深入理解JavaScript系列”里的第4篇

 　　1.6.3　原型
　　在Bootstrap的JS插件里，所有的插件都是利用了类似下面的代码：
　　Alert.prototype.close = function (e) {
　　/*...*/
　　}
　　上面的代码就是在Alert函数上定义一个名为close的原型方法。至于什么叫原型，原型有什么好处，这里我们不会深入讲解，只是举一个例子，简单理解一下就好。
　　var Calculator = function () {};
　　Calculator.prototype.add = function (a, b) {
　　return a b;
　　}
　　var cal = new Calculator();
　　var sum = cal.add(1, 2);
　　由于这些内容不是本书的重点，所以这里只需要知道Calculator的实例能调用原型上的add方法就可以了（就像Java和C#里定义的普通方法一样）。
　　关于原型和原型链的详细内容，请访问笔者的博客“深入理解JavaScript系列”里的第5篇