作者：徐涛
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
深入理解Bootstrap试读：
前言
为什么要写这本书Bootstrap是一个非常受欢迎的前端开发框架，笔者在其1.0版本刚刚发布时就开始使用了。该框架极大地提高了我们团队的开发效率，同时也规范了团队成员在使用CSS和JavaScript方面的编写规范。
Bootstrap的强大之处在于它对常见的CSS布局小组件和JavaScript插件都进行了完整且完善的封装，使得开发人员（不仅是前端开发人员）信手拈来，轻松使用。它解决了广大后端开发人员的难题，学完以后，即使是那些只会.NET和Java的高手，也可以在没有前端开发人员的情况下独立开发一个比较精美的Web系统。当然，专业的前端还是很重要的，因为只有专业的前端才可解决更为专业的前端问题，比如封装库和框架等。
编写本书的初衷是培训公司内部所有的Web开发人员，以便所有的人都能够快速制作出精美的Web页面。在经历了两个比较大型的项目后（基于最新版Bootstrap 3），笔者对各种现实环境中曾经遇到过的问题和解决方法进行了整理，并融入了这本原本是公司内部培训教材的图书中。笔者希望以这种方式，把自己掌握的知识和在实战中总结的经验分享给大家，以便提高大家的学习效率。本书的主要内容和特色
本书是基于最新的Bootstrap 3进行编写的，以实例讲解和源码分析为主要的讲解方式，所以在本书里列举了大量的示例以及与之相对应的源码，以便读者能够彻底了解每个小组件（以及各种用法）背后的原理。
在对CSS组件和JavaScript插件进行分析之后，本书提供了3章的实战内容，首先是对现有组件和插件进行了二次扩展，然后是根据Bootstrap架构思想开发了自己的完整插件，最后是一个组合应用的实例。
另外，本书还添加了很多Bootstrap的潜在用法，以及每个组件在日常使用时的注意事项。
关于本书的内容，这里再多说几句。首先，组件（或插件）是用来使用的，而架构思想是用来理解和创建组件（或插件）、解决疑难杂症的，所以读完本书以后，你可能得到两种结果。
结果1 组件和插件都会使用了，但是没有很好的架构思想。那就做一个制作网页的熟手吧。不是因为Bootstrap很难，而是因为你对相关知识（CSS3、jQuery、JavaScript代码）的掌握还不牢靠。如果你想完全理解它的思想，这就需要把第1章用于理解源码分析的必备知识完全吸收以后（从别的书上再多学一点会更好），再回过头来阅读第2章，然后随便找个组件（或插件）研究一下，相信就没有问题了。
结果2 架构思想都完全理解了。那么你下一步的工作，除了指导你的小伙伴们使用Bootstrap以外，还要帮他们解决疑难杂症。若有机会，可尽量尝试创建具有自己风格的组件或插件。目标读者
本书没有对目标读者做任何限制，初中高级读者均适合阅读。因为书中的内容由浅入深，涉及了各个层面的读者，相信各个层面的读者都能从本书中获益。
❑如果你是初级开发人员，本书丰富的示例会让你很快上手Bootstrap框架，并由此晋级到中高端的水平。
❑如果你是对CSS、JavaScript比较熟悉的中级开发人员，本书的源码分析部分将为你提供详细的分析步骤，包括设计思想、实现方式、弊端等，为你晋级高级水平提供详细的指导。
❑如果你已经是专业的前端开发人员，相信本书的源码分析、组件（插件）扩展、全新插件开发，以及实战部分会为你提供一些更开阔的思路。
想要学习如何编写出优雅而又结构化良好的代码吗？相信这本书就是为你准备的。如何阅读本书
读者在阅读本书的过程中，需要注意以下几个事项：
❑如果你不太熟悉CSS和JavaScript（或jQuery），却想学习如何使用Bootstrap，建议你忽略1.5节～1.7节，这些小节是源码分析的基础。
❑如果你在阅读第2章Bootstrap架构思想时有点迷茫，请不要烦躁，可以在阅读完第3章～第5章以后，回过头来再次阅读第2章，相信那时你对于框架思想的理解就会有不同的效果了。
❑希望读者不要急于学习后面的实战章节，在完全熟悉现有Bootstrap组件的使用方法并理解了架构思想后，再进行实战部分的学习，效果比刚开始就学习实战会好得多。本书约定
本书使用下列约定：
❑Bootstrap文件：一般默认是指普通的CSS文件或JS文件，而非压缩后的*.min.css或*.min.js文件，因为本书有大量的章节要进行源码分析。
❑Bootstrap CSS：一般情况下表示Bootstrap的CSS文件（bootstrap.css），特殊情况下指CSS框架集合。
❑Bootstrap JS：一般情况下表示Bootstrap的JS文件（bootstrap.js），特殊情况下是指与单个插件对应的JS文件（比如，实现Dropdown插件的dropdown.js文件）。
❑代码运行浏览器：用火狐浏览器20.0.1版本运行示例代码，特殊情况会使用IE，届时会做说明。代码示例
本书的源码分析采用如下形式（第一行注释里的行号是该段代码在Bootstrap.css文件里的行号）：// 源码307行img {vertical-align: middle; /*垂直居中*/}资源和勘误
第6~8章为实战部分，笔者将实战过程中的源代码进行了打包整理，读者可到笔者的博客上下载，下载地址是：http://files.cnblogs.com/TomXu/BootstrapInDepth.rar。当然，也可到华章网站上下载：http://www.hzbook.com。
读者在阅读的过程中，发现任何错误和表述不准确的地方，欢迎在笔者的博客上留言，以便再版时进行修订，在此多谢了。
另外，在阅读的过程中，有任何不够明白或者觉得难以理解的内容，可以随时留言给我，我们可以线上讨论。
Bootstrap是一个非常简单的框架，相信经过几周的学习，大家就会完全掌握它。如果你在学习的过程中有任何问题，都可以发邮件给笔者（或者直接在博客上留言），笔者会尽最大努力帮你们解决问题。
电子邮件：tomxu@outlook.com
博客地址：http://www.cnblogs.com/tomxu致谢
首先要感谢机械工业出版社的杨福川先生，没有他的支持和鼓励，就不会有本书。在写本书的过程中，杨先生为我提供了很多重要的想法和灵感。同时还要感谢本书的编辑，正是因为他们的辛苦工作才使得本书能迅速推出。
最后，要感谢我的妻子韩梅，她非常支持我的写书工作，每天无怨无悔地照顾儿子，为我腾出了很多写作时间。第1章入门准备
本章简单介绍了Bootstrap的框架，以及各种入门的基本操作。另外还介绍了CSS、jQuery、JavaScript的一些基本用法，作为在后续的章节里对源码进行分析的基础。1.1 框架简介
Bootstrap是目前最流行的前端开发框架，由Twitter的两位前员工Mark Otto和Jacob Thornton在2010年8月份创建。它是一套基于Less的前端开发库（最新版也包含了Sass源码），提供了很多常见并常用的各种CSS和JavaScript合集，以便开发人员随时上手。目前最新版本是3.1.0。
Bootstrap内置了非常多的漂亮样式，即便是非专业的前端开发人员也能轻易使用。它秉承了一切从简的风格，使得开发人员能够毫无顾虑，放心使用，而无须担心这个div的高度、那个span的宽度等细枝末节的问题。即使没有设计师的团队，也能够使用这套框架迅速构建一个网站原型，甚至是构建一个生产环境的网站。
截止到目前，Bootstrap在Github上已经有5142个Watch、64207个Star、23019个fork，在经受了千万用户的考验之后，如今的Bootstrap已经非常强大了，其如此受欢迎的原因是：首先，Bootstrap系出名门（Twitter），代码开源，久经考验，可减少测试的工作量（站在巨人的肩膀上，我们不需要再重复“造轮子”）；其次，Bootstrap的代码有着非常良好的代码规范（本书会用相当一部分章节来分析其源码），从中可以学到很多知识。所以使用Bootstrap作为前端框架创建项目，其日后代码的维护自然也会变得非常容易。
Bootstrap提供了如下重要的特性：
❑一套完整的基础CSS插件。
❑丰富的预定义样式表。
❑一组基于jQuery的JS插件集。
❑一个非常灵活的响应式（Responsive）栅格系统，并且崇尚移动先行（Mobile First）的思想。
Bootstrap默认提供了大量的插件和合集，代码非常简洁，并且易于修改，你完全可以在其基础之上修改成任何自己想要的样子。同时这也是Bootstrap真正强大的地方，这些非常不错的插件，包括对话框、下拉导航等，使得Bootstrap不但功能完善，而且十分精致，正在成为众多jQuery项目默认的设计标准。这使得工作效率得到了极大的提升。
从V3.1.0开始，Bootstrap的License授权改成了MIT协议。MIT是目前最为宽松的协议，大家可以放心地在各种商业环境中使用它。
另外，由于Bootstrap的火暴，很多贡献者围绕Bootstrap也开发了大量优秀的插件，其中最有名的就是Font Awesome。它是一套icon字体，提供了丰富的icon供你选择，最新的3.0版包含了多达369个icon图标（第9章中讲解Font Awesome）。
由于框架的发展，该框架的开发团队也逐步扩大，其中Core Team已经从2人扩展到4人了。另外，随着Sass的不断强大，Sass Team也成立了。表1-1和表1-2所示是相关成员的基本信息。
注意
Mark Otto目前加盟了GitHub，而Jacob Thornton则加入了由Twitter的联合创始人Biz Stone和Evan Williams创立的Obvious孵化器公司。
Less是一种CSS预处理技术，它是一种动态样式语言，属于CSS预处理语言中的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。它可以在多种语言环境中使用，包括浏览器端、桌面客户端、服务端。由于本书不是专门讲解Less的书，所以在此不做过多的介绍，详情请访问Less中国官网（http://www.lesscss.net）。1.2 新手入门
在下载Bootstrap框架文件之前，首先确保要安装一个好用并适合自己的代码编辑器。如果你已经是某个方面的开发人员，应该已经安装了相应的IDE开发工具了，比如.NET开发人员常用的Visual Studio、Java开发人员常用的Eclipse等。这些IDE开发工具都能够对HTML、CSS、JavaScript代码进行很好的编辑。
除此之外，如果非要推荐一些编辑器的话，我推荐大家使用EditPlus或者Sublime Text，这两个编辑器都有非常不错的高亮着色和智能提示功能。
Bootstrap框架的文件和源码可以在其官方网站（www.getbootstrap.com）下载。打开网站的首页，单击Download Bootstrap按钮，跳转到下载页面，可以看到3个下载链接，如图1-1所示。图1-1 Bootstrap下载页面
❑Download Bootstrap。从该链接下载的内容是编译后可以直接使用的文件。默认情况下，下载后的文件分两种：一种是未经压缩的文件bootstrap.css，一种是经过压缩处理的文件bootstrap.min.css。一般网站正式运行的时候使用压缩过的min文件，以节约网站传输流量；而我们进行开发调试的时候往往使用原始的、未经压缩的文件，以便进行debug跟踪，就像jQuery的使用方式一样。
❑Download source。从该链接下载的是用于编译CSS的Less源码，以及各个插件的JS源码文件。默认情况下，本书将基于未压缩的bootstrap.css和bootstrap.js文件进行源码讲解，不会涉及与Less相关的内容，比如nav功能模板就单独建立一个navs.less文件，或者具有弹窗功能插件的modal.js文件。
❑Download Sass。从该链接下载的是用于编译CSS的Sass源码，以及各个插件的JS源码文件。默认情况下，本书也不会涉及与Sass相关的内容。
本书所有涉及源码的讲解和分析均基于Bootstrap V3.1.0版本的CSS和JS文件。
在CSS源码分析方面，会涉及CSS代码、Less源码、Sass源码，但不会针对Less源码和Sass源码进行过多的解释，读者大概能看懂就行了，主要还是阅读生成后的CSS源码。所以建议大家阅读完本书提及的bootstrap.css文件后，再进行Less源码和Sass源码的延伸阅读。
但是，有一点要记住：经常使用IDE的源码搜索功能，因为源码分析的时候不会处处提及行号。
在JavaScript插件方面，将以单一插件的功能源码为准进行讲解，读者可以下载第二个（或第三个）链接的源码进行阅读，或者可以直接在GitHub网站上在线阅读这些源码，目录分别是js和less：https://github.com/twbs/bootstrap1.3 文件结构
解压下载的压缩包（编译版），可以看到如下结构的文件夹和文件。这些文件按照类别放到了不同的文件夹内，并且提供了压缩与未压缩两种版本。dist/├── css/│ ├── bootstrap.css│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
由上述文件结构可以看出，Bootstrap3.x版和2.x系列版本有一个很大的区别，就是2.x系列版本用于展示icon小图标的.png图片不见了，取而代之的是fonts目录的4种类型的字体文件。我们称这种方式为@font-face版本的icon实现，该字体来自glyphicons.com网站，并得到免费授权。
所谓@font-face，其实是通过CSS里的@font-face语法，将安全的Web字体（Web Font）即时下载到客户端，从而进行引用显示。通过这种技术显示图标的好处是，图标可以被任意缩放、改变颜色，你需要做的只是像修改文字样式那样修改图标样式即可（关于@font-face的详细解释和用法，请阅读4.1节）。
其他文件结构和之前的2.x系列版本一样，bootstrap.min.css和bootstrap.min.js是压缩后的文件，用于生产环境使用，而普通的bootstrap.css和bootstrap.js是用于开发环境进行调试、分析的。可以将该目录结构拖拽到任何Web项目直接使用。
你也可以根据自己的程序结构，对上述的css、js文件夹名称进行随意重命名，但是不能对fonts文件夹进行重命名，因为CSS文件里的源码使用了相对路径（../fonts/），如果重命名了，那就读取不到这些字体文件了。
建议大家在阅读本书的过程中，使用未经压缩的文件，以便进行分析、阅读、学习。
注意
❑Bootstrap所有的JavaScript插件都依赖于jQuery库，要确保在使用这些功能的时候引用相应的jQuery文件。
❑字体文件是使用Mac下的应用软件ImageOptim（http://imageoptim.com）对.png图片进行压缩得到的。1.4 HTML标准模板
如下代码是使用Bootstrap框架的最基本HTML代码，可以在此基础上进行自己的扩展，只需要确保文件引用顺序一致即可。HTML标准模板如下：
Hello, world!
由上述模板代码可以看出，3.x和2.x版本相比，有一个很大的区别，就是多了以下一行代码：
这就是我们前面提到的，Bootstrap从3.0版本开始全面支持移动平台了，并将贯彻移动先行（Mobile First）的宗旨。上述代码的意思是，默认情况下，UI布局的宽度和移动设备的宽度一致，缩放大小为原始大小。对于移动代码的处理，还有另外一种形式，代码如下：
上述代码表示：强制让文档的宽度与设备的宽度保持1∶1，文档最大的宽度比例是1，且不允许用户单击屏幕放大浏览。尤其要注意的是，content里多个属性的设置一定要用分号和空格来隔开，如果不规范将不会起作用。
官方网站还提供了各种布局的基本模板供大家使用，大家可以到如下地址进行访问查看：http://getbootstrap.com/getting-started/
通过对这些模板的模仿和练习，你将会发现Bootstrap的强大。1.5 CSS基本语法
本节主要介绍Bootstrap里用到的CSS语法，以便在源码分析时更容易理解和学习，如果仅是为了使用Bootstrap框架（而非进行完整的源码分析，以便开发各种CSS和JS插件）的话，则可以忽略本节。但本节的语法都是比较基础的，巩固一下有好处。
Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。由于大部分的选择器都很常见，所以就不做单独说明了，只列举一下Bootstrap用到的知识点。1.5.1 优先级
如何确定CSS的优先级？这里我们要先引入一个机制，分别用4个数字（a，b，c，d）表示优先级组合，比如1，1，1，1和0，1，0，1。它们的意思分别是：❑第一个数字（a）表示style属性，优先级最高。由于一般都是class样式，所以该值一般都是0。❑第二个数字（b）是该CSS选择器上的id数量的总和，一般都是1个。❑第三个数字（c）是用在该CSS选择器上的其他属性CSS选择器以及伪类的总和。这里包括class（.btn）和属性CSS选择器（比如li[id=red]）。❑第四个数字（d）计算元素（就像table、p、div等）和伪元素（就像first-child等）。❑通用CSS选择器（*）是0优先级。❑如果两个CSS选择器有同样的优先级，在样式表中后面的那个起作用。
下面有几个例子和对应的优先级，如表1-3所示。
同理，计算下面两个选择器的优先级：#leftbar li#first { color: red; }#leftbar li:first-child{ color: blue; }
结果肯定是第1个比第2个优先级高，因为第1个的优先级是0，2，0，1，而第2个是0，1，0，2。1.5.2 选择器
每一条CSS样式的定义都由两部分组成，形式如下：选择器{样式}。在{}之前的部分就是“选择器”。“选择器”指明了应用这些“样式”的网页元素。
1.属性选择器
Bootstrap的CSS组件里使用了很多属性选择器，比如[data-toggle^=button]、[data-toggle=toggle]等。属性选择器有多种用法，表1-4列出了这些用法的区别。
2.子选择器
CSS里的子元素用符号“>”表示。如下示例是表示拥有table样式的表格，其thead元素内的tr元素如果有th的话，则应用该样式。.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #dddddd;}
3.兄弟选择器
兄弟元素分为两种，一种是临近兄弟，一种是普通兄弟。临近兄弟的选择符用“+”表示。比如导航条里要设置两个li之间的外边距，则需要如下定义：.nav-pills > li + li { margin-left: 2px; /* 加大左外边距 */}
如果只想查找某一个指定元素后面的兄弟节点（而不限制于临近节点），可以使用普通兄弟节点的符号“～”。比如：.article h1 ~ p { font-size: 13px;}1.5.3 伪类
CSS3提供了非常多的可用伪类，但是Bootstrap只用了常用的几个，这里我们只简单列一下常用的伪类和其对应的意思，具体如表1-5所示。
举个例子，按钮组里，除第一个按钮、最后一个按钮和带有dropdown-toggle样式的元素外，其他btn样式的按钮都不能设置圆角。我们应该这么定义：.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0;}
注意
多个伪类可以一起使用。1.5.4 display属性
这个属性用于定义建立布局时元素生成的框的类型。对于HTML等文档类型，如果使用display时不谨慎会很危险，因为可能违反HTML中已经定义的显示层次结构。表1-6是display支持的常见属性值和意义。1.5.5 媒体查询
媒体查询是进行响应式设计的核心要素，其功能非常强大。这里我们只列出Bootstrap用到的功能，具体可以访问http://www.w3.org/TR/css3-mediaqueries/进行查看。
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
❑其他为false1.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篇，地址如下：http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html。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篇，地址如下：http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html。1.7 jQuery基本用法
本小节主要是介绍与jQuery相关的用法，读者在深入了解这些特性以后，就可以按照Bootstrap的开发规范去开发自己的各种插件了，而不需要精通jQuery的全部用法。
在学习jQuery相关的用法之前，首先要确保所有的CSS选择器都能在jQuery里使用，比如$('[data-toggle^=button]')。如果遇到任何不明白的选择器，请查询CSS相关的语法。1.7.1 事件绑定
jQuery的on和off分别用于绑定和禁用事件。例如：$('td').on("click", function (event) { // 绑定abc元素上的click事件,单击时弹出提示 alert(1);});$('td).off('click'); // 禁用abc元素上的click事件
但是对于Bootstrap框架，它对jQuery的on和off的使用稍有不同。它使用了另外一种语法，例如：$(document).on('click.bs.carousel.data-api','td',function (e){};$(document).off('.carousel.data-api');
上述的on在使用时，中间多了一个参数，而且选择器变成了document。它的好处是只在document上绑定一个单击事件，利用冒泡的机制，在单击的时候检查是否是td元素，如果是才处理。而前面我们把td作为选择器的时候，一个页面有多少td元素就会绑定多少个click事件，这样性能会大大降低。这种3个参数的模式称为享元模式。
关于享元模式的详细信息，请访问笔者的博客“深入理解JavaScript系列”里的第37篇，地址如下：http://www.cnblogs.com/TomXu/archive/2012/04/09/2379774.html1.7.2 事件命名空间
另外，还需要注意的是，这里的事件后面都跟了一些字符串，我们简单称它们为带有命名空间的事件。比如，你声明如下这样的代码：$('#abc').on("click.tomxu", function (event) { alert(1);});
一般别人触发click事件，都是这样做的：$('#abc').trigger('click');
执行上述代码，在click时，所有绑定的click事件回调都会被执行。但是如果触发的时候，你不想影响其他click触发代码，这时候就可以只触发自己定义的click事件，以求不会对别人绑定的click回调产生影响，这时可以这样做。$("#abc").trigger('click.tom.xu');1.7.3 $.data()
很多JS插件里都使用了$(selector).data()方法，它的意思是收集指定元素上的所有以data-开头的自定义属性，并合并成为一个对象字面量。
对于以data-开头的自定义属性，相信大家都知道它是HTML5新支持的语法。比如：
如果要获取data-role里aaa这个值，则需要调用如下代码：$("'#abc").data("role");
如果是不带参数的$("'#abc").data()；，则表示一次性将所有以data-开头的参数都收集起来，其结果和用如下方式声明一个value变量是一样的。var value = { role: 'aaa', toggle: 'toggle', xxx: 'tom'};
Bootstrap中的很多JS插件都是利用了这个特性，在HTML元素上定义了一些必要的参数，比如要不要使用动画、是否开启键盘事件等。大家在分析JS插件的option选项参数时即可看到各个参数的详细解释。1.8 HTML5辅助设计
在Bootstrap组件里，很多示例里都出现了不是以data-开头的自定义属性，我们称之为辅助属性。这些属性是HTML5新提出的概念，用于支持残障人士、老年人、文化水平不高或暂时患病的人使用屏幕阅读器进行页面访问。这种逐渐增强和易访问的丰富Internet应用程序简称CSS。示例如下：
上述示例中的aria-hidden="true"表示对屏幕阅读器隐藏该div元素，我们称该aria-hidden为CSS状态属性。
上述示例中的aria-labelledby="myModalLabel"告诉屏幕阅读器，这是一个modal，一般用在区域元素上，它的值一般和标题或是标签元素的ID对应。
假定屏幕阅读器遇到包含role=navigation的页面且其上还有一个div元素，屏幕阅读器就会知道该div元素用于导航，用户将能直接使用导航功能而非通过所有链接选择标签。role支持的属性值如表1-7所示。
更多关于CSS的详细内容，可以阅读下面两篇文章：
❑http://msdn.microsoft.com/zh-cn/magazine/jj863135.aspx
❑http://www.zhangxinxu.com/wordpress/?p=2277第2章整体架构
对于本章，建议读者至少阅读两遍，第一遍是大概了解一下Bootstrap的设计思想，然后在阅读了后续章节，全面了解了Bootstrap的所有用法以后，回过头来再阅读一遍，这样就会对Bootstrap有更加深入的理解。如果想开发基于Bootstrap的插件的话，阅读第二遍是绝对有必要的。
当然，如果你一点都不了解Bootstrap，并且想先学习如何使用它，那么可忽略本章，从第3章开始继续阅读。2.1 整体架构
大多数Bootstrap的使用者都认为Bootstrap只提供了CSS组件和JavaScript插件，其实CSS组件和JavaScript插件只是Bootstrap框架的表现形式而已，它们都是构建在基础平台之上的。在详细分析其架构之前，先来看看它的整体架构图，如图2-1所示。
图2-1总共分为6大部分，除了CSS组件和JavaScript插件以外，另外4部分都是基础支撑平台，下面对它们分别进行介绍。
1.CSS12栅格系统
要理解12栅格系统，首先要知道什么叫栅格系统。栅格系统没有官方的定义，但根据互联网上的各种描述，笔者认为可以这样定义：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来的。对于网页设计来说，栅格系统的使用，不仅可以让网页信息的呈现更加美观、易读，更具可用性，而且对于前端开发来说，也让网页开发更加灵活与规范。
Bootstrap的12栅格系统也就是把网页的总宽度平分为12份，开发人员可以自由按份组合，以便开发出简洁方便的程序。另外Bootstrap也提供了更加灵活的栅格系统，即栅格系统所使用的总宽度可以不固定，你可以针对一个div元素使用12等分的栅格，因为Bootstrap是按照百分比进行12等分的（保留了15位小数点精度）。
12栅格系统是整个Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式。图2-1 Bootstrap整体架构图
2.基础布局组件
在12栅格系统的基础之上，Bootstrap提供了多种基础布局组件，比如排版、代码、表格、按钮、表单等，这些基础组件可以随意应用在任何页面的任何元素上，包括其顶部的CSS组件内部也可以任意使用这些基础组件。只能通过在成型的CSS组件上应用丰富多彩的自定义基础组件，才能制作出漂亮、精美、酷炫的网页来。
这些基础布局组件会在第3章进行详细讲解。在此只需要知道它们是最基础的、用于构建丰富多彩网页的基本组件即可。
3.jQuery
Bootstrap所有的JavaScript插件都依赖于jQuery1.10+，如果要使用这些插件，那就必须引用jQuery库。如果你只用CSS组件，那就可以不引用它了。
4.响应式设计
页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面决定，包括弹性网格和布局、图片、CSS媒体查询（media query）的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。换句话说，页面应该有能力自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这样就可以不必为不断到来的新设备做专门的版本设计和开发了。
响应式设计是一个理念，而非功能，这里为什么把它放在整个架构图的左边？是因为Bootstrap的所有内容，都是以响应式设计为设计理念来实现的。
5.CSS组件
最新的3.x版本里提供了20种CSS组件，而在原来的2.x版本里，Bootstrap只提供了14种CSS组件，分别是：下拉菜单（Dropdown）、按钮组（Button group）、按钮下拉菜单（Button dropdown）、导航（Nav）、导航条（Navbar）、面包屑导航（Breadcrumb）、分页导航（Pagination）、标签与徽章（Label&Badge）、排版（Typography）、缩略图（Thumbnail）、警告框（Alert）、进度条（Progress bar）、媒体对象（Media object）、其他（Well）。
对比一下，我们能够发现：Icon图标、大屏幕展播（Jumbotron）、页面标题（Page header）和洼地（Well）从基本布局里独立出来，成为了独立的组件；而标签（Label）、徽章（Badge）原来是一个组件，现在也成为了两个单独的组件了（并进行了增强）；最后，还新增了3个组件，分别是：输入框组（Input group）、列表组（List group）、面板（Panel）。另外，CSS和JavaScript插件中间有5个箭头，表示这5个相关的组件（插件）是有直接关系的。
6.JavaScript插件
新版的JavaScript插件总共12种，与2.x版本的13种相比少了一种输入提示（typeahead）插件。删除它的原因是该插件已经单独成为了Twitter的一个独立项目（https://github.com/twitter/typeahead.js）。另外，Bootstrap项目由原来的https://github.com/twitter转移到了https://github.com/twbs，其原因我们就不多说了。所以如果大家想继续使用typeahead插件，就去自行下载并安装使用吧。2.2 栅格系统
本节就带领大家详细了解一下栅格系统。2.2.1 实现原理
栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后再结合媒体查询，就制作出了强大的响应式的栅格系统。Bootstrap默认的栅格系统平分为12份，在使用的时候大家也可以根据情况通过重新编译LESS源码来修改12这个数值。
栅格系统的主要工作原理如下：
❑一行数据（row）必须包含在.container中，以便为其赋予合适的对齐方式和内边距（padding）。
❑使用行（row）在水平方向创建一组列（column）。
❑具体内容应当放置于列（column）内，而且只有列（column）可以作为行（row）的直接子元素。
❑内置一大堆样式，可以使用像.row和.col-xs-4（占4列宽度）这样的样式来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
❑通过设置padding从而创建列（column）之间的间隔。然后通过为第一列和最后一列设置负值的margin从而抵消掉padding的影响。
❑栅格系统中的列是通过指定1到12的值来表示其跨越的范围的。例如，要让屏幕分为3个等宽的部分，可以使用3个.col-xs-4来创建。
为了方便大家理解，笔者画了一张示意图，如图2-2所示。我们来一步一步解释一下。图2-2 CSS12栅格系统
1）最外层的边框。由于在设计栅格系统的时候，从头到尾都伴随着响应式设计的思想，所以作者在开发的时候，区分了4种类型的浏览器（超小屏、小屏、中屏、大屏），其像素的分界点分别是768px、992px以及1220px。
2）第二层的边框。该边框也就是我们所说的.container样式容器，针对4种不同宽度的浏览器，.container样式的宽度也不一样，就像示意图里所说的，其值分别是：自动、750px、970px、1170px。其中自动表示，如果你选择了全部12格填充，那就是100%充满这个超小屏幕。
3）1号横条。该横条内部总共有12个列表，根据源码的885～886行可以看出，每个列都有15px的左内边距（padding-left）和右内边距（padding-right）。这样就又导致一个问题，第一个列的padding-left和最后一列的padding-right占据了总共30px的宽度，从而导致页面不美观（当然，如果要留白，也没问题）。
4）2号横条，也就是row容器的定义，在row的CSS的定义里，将margin-left和margin-right都定义为-15px（源码810行），组合row和列以后，就会形成3号横条的效果。这也就是我们期望的左右宽度用满的效果。
5）对于4号横条，主要是想表达12个列可以自由组合，可以用完12个，也可以只用一部分，只要符合“col-md-数字”的规则就可以（md是中型屏幕的样式，后面会讲到其他3种形式）。
最后，再来看一下.container样式的源码。// 源码734行.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}@media (min-width: 768px) { .container { width: 750px; /*小型屏幕时,container样式的宽度*/ }}@media (min-width: 992px) { .container { width: 970px; /*中型屏幕时,container样式的宽度,缩小min-width范围*/}}@media (min-width: 1200px) { .container { width: 1170px; /*大型屏幕时,container样式的宽度,再次缩小min-width范围*/}}
为什么这么设置？就是因为row样式定义了-15px的外边距，所以为了消除2号横条的溢出，需要用row的容器元素（也就是container样式元素）的padding值进行修补。
换句话，如果想让row充满全屏100%显示，那就不能用container样式了，因为container样式针对4个不同的屏幕大小固定了尺寸。这样，就得自己定义一个100%的样式，但是要注意的就是：别忘记修复-15px的外边距（即设置15px的左右padding值）。
除了上述原理，在实现细节上还有一些技巧，这部分的CSS分析，我们将结合基本用法进行讲解。2.2.2 基本用法
说到栅格系统的用法，其实就是列的组合。在基本用法里有4种特性，再结合下一小节就要讲到的响应式用法，就能组合出功能强大的、各式各样的布局元素。先来看看这4种基本用法。由于不同屏幕的尺寸使用了不同的样式，这里我们以中型屏幕（md）为例进行介绍，其他类似的，可以参考下一小节。
1.列组合
刚才我们已经提到了列组合的用法，就是通过更改数字来合并列，类似于表格里的colspan。使用起来非常简单，示例代码如下：
运行上述示例代码后会看到如图2-3所示的效果。图2-3 CSS12栅格系统
列组合的实现方式非常简单，只涉及两个CSS特性：左浮动和宽度百分比。由于很简单，就不多讲述了，大家直接看代码注释即可。// 源码1085行.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { float: left; /*确保12个列都是左浮动*/} /*定义每个组合的宽度百分比*/.col-md-12 { width: 100%;}.col-md-11 { width: 91.66666666666666%;}.col-md-10 { width: 83.33333333333334%;}.col-md-9 { width: 75%;}.col-md-8 { width: 66.66666666666666%;}.col-md-7 { width: 58.333333333333336%;}.col-md-6 { width: 50%;}.col-md-5 { width: 41.66666666666667%;}.col-md-4 { width: 33.33333333333333%;}.col-md-3 { width: 25%;}.col-md-2 { width: 16.666666666666664%;}.col-md-1 { width: 8.333333333333332%;}
2.列偏移
有的时候，我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义margin值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度，效果如图2-4所示。图2-4 列偏移运行效果
实现上述效果，只需要在下一个列上应用offset样式即可（因为该样式设置的是margin-left）。代码如下：
源码也非常简单，只利用了1/12的margin-left而已，有多少个offset，就有多少个margin-left。// 源码1203行.col-md-offset-12 { margin-left: 100%;}.col-md-offset-11 { margin-left: 91.66666666666666%;}.col-md-offset-10 { margin-left: 83.33333333333334%;}.col-md-offset-9 { margin-left: 75%;}.col-md-offset-8 { margin-left: 66.66666666666666%;}.col-md-offset-7 { margin-left: 58.333333333333336%;}.col-md-offset-6 { margin-left: 50%;}.col-md-offset-5 { margin-left: 41.66666666666667%;}.col-md-offset-4 { margin-left: 33.33333333333333%;}.col-md-offset-3 { margin-left: 25%;}.col-md-offset-2 { margin-left: 16.666666666666664%;}.col-md-offset-1 { margin-left: 8.333333333333332%;}.col-md-offset-0 { margin-left: 0;}
3.列嵌套
同样，栅格系统也支持列嵌套，即在一个列里再声明一个或者多个行（row）。但是注意，内部所嵌套的row的宽度为100%时，就是当前外部列的宽度。示例代码如下：
试读结束[说明：试读内容隐藏了图片]