前言

为什么要写这本书

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

致谢

首先要感谢机械工业出版社的杨福川先生，没有他的支持和鼓励，就不会有本书。在写本书的过程中，杨先生为我提供了很多重要的想法和灵感。同时还要感谢本书的编辑，正是因为他们的辛苦工作才使得本书能迅速推出。

最后，要感谢我的妻子韩梅，她非常支持我的写书工作，每天无怨无悔地照顾儿子，为我腾出了很多写作时间。