本书是目前Bootstrap领域技术版本最新、内容最详细全面、实战性最强、最具有深度的著作。它是资深Web技术专家经验结晶，不仅授人以鱼，全面讲解了Bootstrap各个功能组件的使用方法，以及对现有插件和扩展的二次开发；授人以渔，深入分析了Bootstrap的架构思想和各组件源码实现，以及如何开发自定义的完整插件和扩展。既能满足初级前端工程师系统学习并迅速实践Bootstrap的需要，又能满足专业前端工程师深入掌握Bootstrap并解决各种疑难问题的需求。
全书一共9章：第1章介绍了学习Bootstrap必须具备的基础知识；第2章讲解了Bootstrap的整体架构、栅格系统、CSS组件架构、Javascript插件架构；第3~4章讲解了CSS的各种布局和组件的使用方法、实现原理和应用场景；第5章详细讲解了JavaScript的各种插件的使用方法和源码实现；第6章讲解了如何扩展现有的组件；第7~9章通过3个综合性的案例讲解了Win 8磁铁组件的开发、组合应用的开发以及自定义第三方扩展的开发。
前勒口
作者简介
徐涛?资深Web开发工程师，精通JavaScript、CSS、HTML5等Web开发技术，以及Bootstrap等各种主流Web开发框架。擅长Web系统的架构、设计与开发，参与过全球最大婚恋网站Match、全球最大在线旅游网站Expedia、波音公司、GE医疗和万达集团等多个国际知名企业的Web项目的架构与设计。他还是一位资深的微软技术专家，曾获得MCP、MCTS、MCDBA等近十项认证。翻译了《JavaScript编程精解》等多本JavaScript方面的著作。
封面
资深Web技术专家经验结晶，根据Bootstrap最新版本撰写，内容系统、分析深入、实战性强，前端工程师必备
授人以鱼，全面讲解各功能组件的使用方法，以及对现有插件和扩展的二次开发；授人以渔，深入分析其架构思想和源码实现，以及如何开发自定义的完整插件和扩展
封底
Bootstrap是目前全球最流行、最火暴的Web前端开发框架之一。它的强大之处在于它将常见的CSS布局小组件和JavaScript插件进行了完整且完善的封装，即使没有经验的前端工程师和后端开发工程师也能迅速掌握和使用，大大提高了开发效率。此外，它还能在某种程度上使前端团队编写CSS和JavaScript更加规范。
Bootstrap更新比较快，目前国内仅有的两本书都过时了，本书是根据Bootstrap的最新版本来撰写的。它同时面向两类读者：没有Bootstrap经验的初级前端开发工程师，书中对Bootstrap功能组件的详细讲解以及大量案例的展示能让他们迅速晋级到中高端水平；有一定Bootstrap经验的专业前端开发工程师，书中对Bootstrap架构思想的阐述、实现原理的分析，及对扩展和插件二次开发的介绍能让他们自如解决开发中遇到的各种疑难问题。
本书主要包含以下内容：
学习Bootstrap必备的基础知识；
Bootstrap的整体架构、栅格系统、CSS组件架构、JavaScript插件架构；
CSS的各种布局和组件；
JavaScript的各种插件的使用方法及其源码分析；
扩展现有插件和组件，以及组合应用的开发；
开发属于自己的第三方扩展；
浏览器的兼容性，以及如何从Bootstrap 2.x迁移到Bootstrap 3.x；
……
为什么要写这本书
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
致谢
首先要感谢机械工业出版社的杨福川先生，没有他的支持和鼓励，就不会有本书。在写本书的过程中，杨先生为我提供了很多重要的想法和灵感。同时还要感谢本书的编辑，正是因为他们的辛苦工作才使得本书能迅速推出。
最后，要感谢我的妻子韩梅，她非常支持我的写书工作，每天无怨无悔地照顾儿子，为我腾出了很多写作时间。
计算机\程序设计
Bootstrap是目前全球最流行、最火爆的Web前端开发框架之一。它的强大之处在于它将常见的CSS布局小组件和JavaScript插件进行了完整并完善的封装，能让没有经验的前端工程师和后端开发工程师都迅速掌握和使用，大大提高开发效率。此外，它还能在某种程度上规范前端团队编写CSS和JavaScript的规范。
Bootstrap更新比较快，目前国内仅有的两本书也都过时了，本书是根据Bootstrap的最新版本来撰写的。它同时面向两类读者：没有Bootstrap经验的初级前端开发工程师，书中对Bootstrap功能组件的详细讲解以及大量案例的展示能让他们迅速晋级到中高端水平；有一定Bootstrap经验的专业前端开发工程师，书中对Bootstrap架构思想的阐述、实现原理的分析、扩展和插件的二次开发能让他们自如解决开发中遇到的各种疑难问题。
本书主要包含以下内容：
（1） 学习Bootstrap必备的基础知识；
（2） Bootstrap的整体架构、栅格系统、CSS组件架构、JavaScript插件架构；
（3） CSS的各种布局和组件；
（4） JavaScript的各种插件的使用方法及其源码分析；
（5） 扩展现有插件和组件，以及组合应用的开发；
（6） 开发属于自己的第三方扩展；
（7） 浏览器的兼容性，以及如何从Bootstrap 2.x迁移到Bootstrap 3.x
……
徐涛 著：暂无简介
前 言
第1章 入门准备 / 1
1.1 框架简介 / 1
1.2 新手入门 / 2
1.3 文件结构 / 4
1.4 HTML标准模板 / 5
1.5 CSS基本语法 / 6
1.5.1 优先级 / 6
1.5.2 选择器 / 6
1.5.3 伪类 / 7
1.5.4 display属性 / 8
1.5.5 媒体查询 / 8
1.6 JavaScript基本语法 / 9
1.6.1 ||和&&运算符 / 9
1.6.2 立即调用的函数表达式 / 9
1.6.3 原型 / 10
1.7 jQuery基本用法 / 10
1.7.1 事件绑定 / 11
1.7.2 事件命名空间 / 11
1.7.3 $.data() / 12
1.8 HTML5辅助设计 / 12
第2章 整体架构 / 14
2.1 整体架构 / 14
2.2 栅格系统 / 16
2.2.1 实现原理 / 16
2.2.2 基本用法 / 18
2.2.3 响应式栅格 / 22
2.2.4 对重复代码的处理 / 26
2.3 CSS组件架构的设计思想 / 26
2.3.1 基础样式 / 27
2.3.2 颜色样式 / 27
2.3.3 尺寸样式 / 29
2.3.4 状态样式 / 29
2.3.5 特殊元素样式 / 30
2.3.6 并列元素样式 / 32
2.3.7 嵌套子元素样式 / 32
2.3.8 动画样式 / 33
2.3.9 小结 / 34
2.4 JavaScript插件架构 / 34
2.4.1 HTML布局规则 / 34
2.4.2 JavaScript实现步骤 / 36
2.4.3 通用技术 / 39
2.4.4 不足 / 41
2.5 禁用响应式布局 / 41
第3章 CSS布局 / 43
3.1 概述 / 43
3.2 基础排版 / 45
3.2.1 标题 / 45
3.2.2 页面主题 / 46
3.2.3 强调文本 / 47
3.2.4 缩略语 / 48
3.2.5 地址元素 / 48
3.2.6 引用 / 49
3.2.7 列表 / 50
3.3 代码 / 54
3.3.1 内联代码 / 54
3.3.2 用户输入代码 / 54
3.3.3 多行代码块 / 55
3.4 表格 / 55
3.4.1 基础样式 / 55
3.4.2 带背景条纹的表格 / 56
3.4.3 带边框的表格 / 57
3.4.4 鼠标悬停高亮的表格 / 58
3.4.5 紧凑型表格 / 58
3.4.6 行级元素样式 / 59
3.4.7 响应式表格 / 60
3.5 表单 / 62
3.5.1 基础表单 / 63
3.5.2 内联表单 / 64
3.5.3 横向表单 / 66
3.5.4 表单控件 / 67
3.5.5 控件状态 / 69
3.5.6 控件大小 / 74
3.5.7 其他 / 76
3.6 按钮 / 76
3.6.1 按钮样式 / 76
3.6.2 按钮大小 / 78
3.6.3 多标签支持 / 80
3.6.4 活动状态 / 80
3.6.5 禁用状态 / 81
3.7 图像 / 82
3.8 辅助样式 / 83
3.8.1 文本样式及背景样式 / 83
3.8.2 辅助图标 / 84
3.8.3 内容浮动 / 85
3.8.4 隐藏与显示 / 86
3.9 响应式样式 / 86
第4章 CSS组件 / 88
4.1 小图标 / 88
4.1.1 基本用法 / 88
4.1.2 实现方式 / 89
4.1.3 应用场景 / 92
4.1.4 其他 / 93
4.2 下拉菜单 / 94
4.2.1 基本用法 / 94
4.2.2 多级嵌套 / 97
4.3 按钮组 / 98
4.3.1 基本用法 / 99
4.3.2 按钮工具栏 / 100
4.3.3 按钮尺寸设置 / 101
4.3.4 嵌套分组 / 102
4.3.5 垂直分组 / 103
4.3.6 自适应分组 / 106
4.4 按钮下拉菜单 / 107
4.4.1 组合式下拉菜单 / 107
4.4.2 分离式下拉菜单 / 108
4.4.3 按钮大小 / 109
4.4.4 向上弹起的下拉菜单 / 109
4.5 输入框组 / 110
4.5.1 基本用法 / 110
4.5.2 尺寸大小设置 / 113
4.5.3 复选框与单选框作为addon / 115
4.5.4 按钮作为addon / 115
4.5.5 下拉菜单按钮作为addon / 117
4.5.6 分段按钮作为addon / 117
4.6 导航 / 118
4.6.1 选项卡导航 / 119
4.6.2 胶囊式选项卡导航 / 120
4.6.3 堆叠式导航 / 121
4.6.4 自适应导航 / 123
4.6.5 禁用链接 / 124
4.6.6 二级导航实现 / 124
4.7 导航条 / 126
4.7.1 基础导航条 / 126
4.7.2 导航条中的表单 / 130
4.7.3 导航条中的按钮、文本、链接 / 132
4.7.4 导航条中的项进行左右浮动 / 134
4.7.5 顶部固定或底部固定 / 134
4.7.6 响应式导航条 / 136
4.7.7 反色导航条 / 140
4.8 面包屑导航 / 141
4.9 分页导航 / 143
4.9.1 页码分页 / 143
4.9.2 翻页 / 145
4.10 标签 / 147
4.11 徽章 / 149
4.12 大屏幕展播 / 151
4.13 页面标题 / 152
4.14 缩略图 / 153
4.15 警告框 / 155
4.15.1 默认警告框 / 155
4.15.2 可关闭的警告框 / 156
4.15.3 多彩样式警告框 / 157
4.15.4 警告框中的链接 / 158
4.16 进度条 / 159
4.16.1 基本样式 / 159
4.16.2 多彩样式 / 160
4.16.3 条纹样式 / 161
4.16.4 动画样式 / 162
4.16.5 堆叠样式 / 162
4.17 媒体对象 / 163
4.17.1 默认样式 / 163
4.17.2 媒体列表 / 164
4.18 列表组 / 165
4.18.1 基础列表组 / 165
4.18.2 应用徽章标记或导航箭头 / 166
4.18.3 可链接的列表组 / 167
4.18.4 多彩列表项 / 168
4.18.5 自定义列表组 / 169
4.19 面板 / 171
4.19.1 基础面板 / 171
4.19.2 带有头和尾的面板 / 172
4.19.3 多彩面板 / 173
4.19.4 面板与表格进行嵌套 / 174
4.19.5 面板和列表组进行嵌套 / 177
4.20 洼地 / 179
4.21 主题 / 180
4.21.1 btn按钮样式主题 / 181
4.21.2 缩略图样式主题 / 182
4.21.3 下拉菜单样式主题 / 182
4.21.4 导航条样式主题 / 182
4.21.5 警告框样式主题 / 183
4.21.6 进度条样式主题 / 184
4.21.7 列表组样式主题 / 184
4.21.8 面板样式主题 / 184
4.21.9 well样式主题 / 185
第5章 JavaScript插件 / 186
5.1 动画过渡效果 / 186
5.1.1 使用方法 / 186
5.1.2 源码分析 / 187
5.2 模态弹窗 / 188
5.2.1 弹窗布局与样式 / 189
5.2.2 声明式用法 / 194
5.2.3 JavaScript用法 / 195
5.2.4 源码分析 / 197
5.3 下拉菜单 / 203
5.3.1 声明式用法 / 204
5.3.2 JavaScript用法 / 207
5.3.3 源码分析 / 208
5.4 滚动侦测 / 212
5.4.1 声明式用法 / 213
5.4.2 JavaScript用法 / 214
5.4.3 源码分析 / 215
5.5 选项卡 / 219
5.5.1 声明式用法 / 220
5.5.2 JavaScript用法 / 221
5.5.3 源码分析 / 222
5.6 提示框 / 225
5.6.1 声明式用法 / 226
5.6.2 JavaScript用法 / 228
5.6.3 源码分析 / 229
5.7 弹出框 / 240
5.7.1 声明式用法 / 241
5.7.2 JavaScript用法 / 242
5.7.3 源码分析 / 244
5.8 警告框插件 / 246
5.8.1 声明式用法 / 247
5.8.2 JavaScript用法 / 248
5.8.3 源码分析 / 249
5.9 按钮 / 251
5.9.1 声明式用法 / 251
5.9.2 JavaScript用法 / 253
5.9.3 源码分析 / 253
5.10 折叠 / 256
5.10.1 声明式用法 / 257
5.10.2 JavaScript用法 / 258
5.10.3 源码分析 / 259
5.11 旋转轮播 / 264
5.11.1 声明式用法 / 264
5.11.2 CSS源码分析 / 266
5.11.3 JavaScript用法 / 270
5.11.4 源码分析 / 272
5.12 自动定位浮标 / 280
5.12.1 声明式用法 / 282
5.12.2 JavaScript用法 / 284
5.12.3 源码分析 / 284
第6章 实战：扩展现有组件 / 289
6.1 扩展分页组件 / 289
6.1.1 形状扩展 / 289
6.1.2 颜色扩展 / 290
6.2 扩展Modal弹窗 / 292
6.2.1 扩展点探讨 / 292
6.2.2 Info弹窗扩展 / 293
6.2.3 Form弹窗扩展 / 301
第7章 实战：Win8磁贴组件开发 / 311
7.1 基本样式 / 311
7.1.1 方块定义 / 311
7.1.2 边框定义 / 312
7.2 颜色样式 / 313
7.3 尺寸样式 / 314
7.4 状态设置 / 316
7.5 特殊元素样式 / 317
7.5.1 tile-content样式定义 / 318
7.5.2 tile-content子元素的样式定义 / 318
7.5.3 Brand样式定义 / 320
7.6 并列元素与嵌套样式 / 321
7.7 动画插件 / 323
7.8 更全的Win8风格样式 / 329
第8章 实战：组合应用开发 / 330
8.1 任务描述 / 330
8.2 实战过程 / 332
8.3 笔者的建议 / 342
8.4 实战成果 / 343
8.5 所用技术总结 / 344
第9章 第三方扩展 / 345
9.1 Font Awesome / 345
9.1.1 介绍 / 345
9.1.2 常规用法 / 346
9.1.3 List列表上的图标 / 347
9.1.4 导航上的图标 / 347
9.1.5 固定角度旋转 / 348
9.1.6 360度旋转 / 349
9.1.7 多图叠加 / 350
9.2 BSIE扩展 / 352
9.3 Buttons / 353
9.4 DateTime Picker / 356
9.5 Cikonss / 358
9.6 Flat UI / 359
9.7 更多插件 / 360
附录A 浏览器兼容性支持 / 361
附录B 第三方插件开发建议 / 365
附录C 从2.x迁移到3.x / 366
附录D Glyphicons图标全集 / 369
