适读人群：本书适合已经熟练掌握HTML和CSS基础的读者，最好是熟悉规范的HTML5和样式表的写法。了解JavaScript的基本知识，包括Bootstrap的jQuery插件用法更好。本书经常会涉及自定义LESS文件，因此熟悉LESS的读者会感觉更轻松一些。不过，即便从来没有使用过LESS，本书由浅入深的介绍，也会让你顺利入门。
　　基于Bootstrap 3.0撰写
　　五大应用实例，全面掌握Bootstrap使用技巧
　　学会重编辑LESS文件和使用Bootstrap的JS插件
　　Bootstrap是前端开发中应用非常广泛的一个框架，是Twitter公司内部的一个工具，开源之后迅速得到了各方的认可。本书基于Bootstrap 3撰写，在简单介绍了安装与配置之后就直奔主题，分别讨论了个人作品站点、WordPress主题、企业网站、电子商务网站和单页营销网站等几个具代表性的应用案例，结合这些案例细致地剖析了Bootstrap还有LESS的使用方式和技巧。

内容简介

　　第1章“初识Bootstrap”，教给大家如何下载Bootstrap，如何基于HTML5 Boilerplate设置站点模板，并且掌握把Bootstrap的LESS文件编译为CSS的方法。
　　第2章“作品展示站点”，开始学习创建简单的个人作品展示网站，包括全宽的传送带切换效果，三栏文本布局，以及使用Font Awesome的字体图标——通过自定义Bootstrap的LESS文件。
　　第3章“WordPress主题”，学习把第2章的个人作品展示站点转换成一个WordPress主题。这一章要利用有名的Roots Theme，根据我们的需要，还会涉及自定义模板文件、LESS、CSS和JavaScript。
　　第4章“企业网站”，将通过创建一个企业级网站学习如何创建复杂的页头区，添加下拉菜单和实用导航，以及构建复杂的三栏布局和四栏页脚，同时还要确保所有这些内容具有完全的响应能力。
　　第5章“电子商务网站”，带领大家探索商品展示页面的设计，学会在复杂的响应式网格中控制多行商品。与此同时，还要实现一个响应式的商品筛选工具。
　　第6章“单页营销网站”，这一章教给大家构建时尚的单页营销网站，包括带高清图的大字欢迎语、带大图标的商品功能列表、图片墙式的用户评论区，以及三个精美的价目表，完成一个支持动态滚动导航的漂亮的单页网站。

作者简介

David Cochran，现为俄克拉荷马州卫斯理大学副教授，自2005年以来一直讲授交互设计。他重视实践，不喜欢走捷径，推崇Web标准。2012年，David在webdesign.tutsplus.com上开设了Bootstrap 2.0系列教程专栏。他还在Packt Publishing出版过一个小书Twitter Bootstrap Web Development How-To 。闲暇时间，David会在自己网站alittlecode.com上写写博客。他还是媒体、设计和咨询公司BitBrilliant的负责人。

　　Ian Whitley ，自幼爱好写作。2010年，他对Web开发产生了深厚兴趣，并投身其中。他很早就开始使用Twitter Bootstrap，而且在David Cochran的帮助下，很快就掌握了这个框架，并将其应用到了很多项目中。目前，他多数情况下会使用Bootstrap为客户创建WordPress模板。Ian是BitBrilliant公司的开发主管。

内页插图

第1 章初识Bootstrap 1
1．1 数量和质量 1
1．1．1 与时俱进 1
1．1．2 LESS 的威力 2
1．2 下载Bootstrap 2
1．3 准备项目模板文件夹 4
1．3．1 下载H5BP 4
1．3．2 删除不必要的样板文件 4
1．3．3 理解样板中的．htaccess 文件 5
1．3．4 更新必要的样板文件 5
1．3．5 更新站点桌面和触摸设备图标 5
1．4 加入Bootstrap 文件 5
1．4．1 字体 6
1．4．2 JavaScript 6
1．4．3 暂时不考虑CSS 文件 9
1．4．4 复制LESS 文件 9
1．5 大盘点 9
1．6 构造HTML 模板 10
1．7 设定站点标题 12
1．7．1 调整过时的浏览器消息 12
1．7．2 设置主结构元素 13
1．8 导航条 14
1．9 编译和链接默认的Bootstrap CSS 15
1．9．1 编译Bootstrap CSS 15
1．9．2 完成响应式导航条 17
1．9．3 排除故障 19
1．9．4 支持IE8 20
1．10 小结 21
第2 章作品展示站点 23
2．1 设计目标 23
2．2 查看练习文件 26
2．3 搭建传送带 28
2．4 创建响应式分栏 30
2．5 把链接变成按钮 31
2．6 理解LESS 32
2．6．1 嵌套规则 32
2．6．2 变量 33
2．6．3 混入 33
2．6．4 运算式 34
2．6．5 导入文件 34
2．6．6 模块化 35
2．7 根据需要定制Bootstrap 的LESS文件 35
2．8 添加Logo 图片 38
2．9 调整导航项内边距 40
2．10 添加图标 41
2．11 添加Font Awesome 图标 43
2．12 调整导航项图标颜色 45
2．13 调整响应式导航条断点 47
2．14 调整传送带 47
2．14．1 把控件改成使用Font Awesome 图标 48
2．14．2 添加上、下内边距 50
2．14．3 强制图片全宽 50
2．14．4 约束传送带的高度 51
2．14．5 重定位指示器 52
2．14．6 调整指示器外观 54
2．15 调整分栏及其内容 56
2．16 修饰页脚 60
2．17 接下来做什么 62
2．18 小结 63
第3 章 WordPress 主题 64
3．1 下载并重命名Roots 主题 64
3．2 安装主题 66
3．3 配置导航条 69
3．4 添加首页内容 71
3．5 自定义页面模板 75
3．6 理解Roots 的基准模板 76
3．7 创建自定义的基本模板 79
3．8 在自定义结构中使用自定义栏目 81
3．9 创建自定义的内容模板 83
3．9．1 通过自定义栏目构建传送带 84
3．9．2 使用自定义栏目构建三栏内容 87
3．10 加入页脚内容 88
3．11 Roots 的assets 文件夹里有什么 89
3．12 更换设计资源 90
3．13 链接样式表 91
3．14 链接JavaScript 文件 92
3．15 为导航条和页脚添加Logo 图片 94
3．16 添加图标链接 96
3．17 恢复WordPress 特有的样式 97
3．18 小结 99
第4 章企业网站 100
4．1 准备启动文件 103
4．2 页头区 105
4．2．1 把Logo 放到导航条上方 105
4．2．2 调整导航条 108
4．3 添加实用导航 110
4．4 调整响应式导航 112
4．5 调整配色 115
4．6 调整折叠后的导航条配色 116
4．7 设计复杂的响应式布局 120
4．7．1 调整中、宽布局 122
4．7．2 调整标题、字体大小和按钮 124
4．7．3 增大主栏 126
4．7．4 调整第三栏 128
4．7．5 针对多个视口进行微调 131
4．8 复杂的页脚 131
4．8．1 准备标记 131
4．8．2 调整布局适应平板 132
4．8．3 针对性地清除 134
4．8．4 修整细节 135
4．9 小结 138
第5 章电子商务网站 139
5．1 商品页的标记 141
5．2面包屑、页面标题和分页导航 142
5．3 调整商品网格 145
5．4 侧边栏和筛选选项 150
5．4．1 基本布局 152
5．4．2 Clearance Sale 按钮 152
5．4．3 选项列表 154
5．4．4 为选项链接添加Font Awesome 图标复选框 156
5．4．5 使用LESS 混入在栏中对齐选项 159
5．4．6 针对平板和手机调整选项列表布局 159
5．4．7 在手机上折叠选项面板 161
5．5 小结 165
第6 章单页营销网站 166
6．1 概况 166
6．2 初始文件 169
6．3 了解页面内容 169
6．4 调整导航条 170
6．5 定制高清图 171
6．6 美化功能列表 178
6．7 装饰用户评论区 182
6．7．1 定位及美化说明 183
6．7．2 调整说明元素的位置 186
6．7．3 添加Bootstrap 的网格类 187
6．7．4 下载并链接JavaScript 插件 188
6．7．5 初始化Masonry 插件 189
6．7．6 切齐图片 191
6．7．7 适应小微屏幕 194
6．8 吸引人的价目表 194
6．8．1 准备变量、文件和标记 195
6．8．2 表格头 197
6．8．3 表体和表脚 199
6．8．4 为不同的价目表添加不同的样式 200
6．8．5 适配小视口 202
6．8．6 突出重要的表格 205
6．9 最后的调整 209
6．10 为导航条添加ScrollSpy 211
6．11 小结 213
附录A 优化站点资源 214
附录B 实现响应式图片 218
附录C 让传送带支持手势 225

前言/序言

　　2011年8月，Twitter Bootstrap横空出世。如今，这个被称为Bootstrap的框架，俨然已成为前端设计领域最受欢迎的辅助技术。Bootstrap 3又是一个里程碑式的版本，增加了移动优先的响应式网格、新的强大的LESS混入，而且还针对现代浏览器对核心代码进行了优化。
　　本书详细介绍Bootstrap的使用方法。全书简明易懂，循序渐进，让读者时时处处体验到自定义和重编译Bootstrap的LESS文件的强大威力，同时掌握应用Bootstrap的JavaScript插件设计专业用户界面的技巧。
　　这本书并不局限于Bootstrap。Bootstrap只是一个工具，一个达到目标的手段。学习完这本书之后，读者将成为一位更加高效、熟练的Web设计师。
　　本书内容
　　第1章“初识Bootstrap”，教给大家如何下载Bootstrap，如何基于HTML5 Boilerplate设置站点模板，并且掌握把Bootstrap的LESS文件编译为CSS的方法。
　　第2章“作品展示站点”，开始学习创建简单的个人作品展示网站，包括全宽的传送带切换效果，三栏文本布局，以及使用Font Awesome的字体图标——通过自定义Bootstrap的LESS文件。
　　第3章“WordPress主题”，学习把第2章的个人作品展示站点转换成一个WordPress主题。这一章要利用有名的Roots Theme，根据我们的需要，还会涉及自定义模板文件、LESS、CSS和JavaScript。
　　第4章“企业网站”，将通过创建一个企业级网站学习如何创建复杂的页头区，添加下拉菜单和实用导航，以及构建复杂的三栏布局和四栏页脚，同时还要确保所有这些内容具有完全的响应能力。
　　第5章“电子商务网站”，带领大家探索商品展示页面的设计，学会在复杂的响应式网格中控制多行商品。与此同时，还要实现一个响应式的商品筛选工具。
　　第6章“单页营销网站”，这一章教给大家构建时尚的单页营销网站，包括带高清图的大字欢迎语、带大图标的商品功能列表、图片墙式的用户评论区，以及三个精美的价目表，最终完成一个支持动态滚动导航的漂亮的单页网站。
　　附录A“优化站点资源”，以第2章的网站资源为例，介绍了为最终部署网站而优化Bootstrap LESS/CSS及JavaScript等静态资源的基本流程和工具。这个附录对所有Bootstrap项目都一样有用。
　　附录B“实现响应式图片”，介绍最前沿的响应式图片解决方案Picturefill，仍然以第2章项目中的作品图片传送带为例。这个附录对其他项目也一样有用。
　　附录C“让传送带支持手势”，介绍在Bootstrap的传送带中使用一款先进的插件Hammer.js，实现传送带图片的轻扫切换功能。
　　本书要求
　　要完成本书各章的项目，需要安装下列软件：
　　现代浏览器（包括Internet Explorer 8及以上版本）；
　　代码编辑器；
　　LESS编译器，其less.js的版本至少是1.3.3。
　　读者对象
　　本书适合已经熟练掌握HTML和CSS基础的读者，最好是熟悉规范的HTML5和样式表的写法。了解JavaScript的基本知识，包括Bootstrap的jQuery插件用法更好。本书经常会涉及自定义LESS文件，因此熟悉LESS的读者会感觉更轻松一些。不过，即便从来没有使用过LESS，本书由浅入深的介绍，也会让你顺利入门。