Bootstrap实战

内容简介：

本书是目前市面上少见的实战类Bootstrap图书，全书通过5个真实、具体、鲜活，又有代表性的项目实例，讲解了Bootstrap的各种特性和用法。5个实例由浅入深，既各自独立，又环环相扣，丰富的代码，精美的插图，加上细致入微的解释，让读者极易上手，不知不觉中就能掌握所有重要概念，步入Bootstrap高手行列。本书讲解了以下5种类型的网站：个人作品网站、WordPress主题、企业门户页面、在线电子商务站点和单页营销网站。

除了令人惊艳的项目实例，本书还向读者介绍了很多实用插件、框架，以及前端开发的工作流程，这些知识和技术并不局限于Bootstrap。特别地，作者用相当篇幅介绍了LESS的基本原理和使用方法，让即使从未接触过LESS的人也能感觉游刃有余。此外，全书各章还分别介绍了HTML5 Boilerplate、Font Awesome、Respond.js、Masonry、Scroll-Spy，以及Roots的WordPress启动主题，让读者不必白手起家也能实现各种酷炫效果。

本书附录还介绍了为获得最快下载速度而对站点资源进行优化、实现响应式图片，以及为图片传送带添加手势的技术。作者提供的项目代码也非常完整、清晰，每一章都有相应的开始和完成文件夹，方便读者参考使用。

本书适合有一定HTML/CSS基础的开发人员和爱好者阅读学习，经验丰富的开发人员也可以把它当作参考。

作者简介：

作者简介：

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公司的开发主管。

译者简介：

李松峰

2006年起投身翻译，译著30余部，包括《JavaScript高级程序设计》《简约至上》等畅销书。2008年进入出版业，目前在图灵公司从事技术图书策划和审稿工作，并担任《Web+DB Press中文版》杂志编委。

他经常参加社区活动，曾在W3ctech 2012 Mobile上分享“Dive into Responsive Web Design”。2013年1月应邀在金山网络分享“响应式Web设计”，3月应邀在奇虎360分享“JS的国”。在2014DevFest Beijing分享了“理解响应式Web设计”。

目录：

第1章　初识Bootstrap1

1.1 数量和质量1

1.1.1 与时俱进1

1.1.2 LESS的威力2

1.2 下载Bootstrap2

1.3 准备项目模板文件夹4

1.3.1 下载H5BP4

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 JavaScript6

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 CSS15

1.9.1 编译Bootstrap CSS15

1.9.2 完成响应式导航条17

1.9.3 排除故障19

1.9.4 支持IE820

1.10 小结21

第2章　作品展示站点23

2.1 设计目标23

2.2 查看练习文件26

2.3 搭建传送带28

2.4 创建响应式分栏30

2.5 把链接变成按钮31

2.6 理解LESS32

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 为导航条添加ScrollSpy211

6.11 小结213

附录A　优化站点资源214

附录B　实现响应式图片218

附录C　让传送带支持手势225

文章试读：下载Bootstrap的途径很多，但通过这些途径下载的文件并不完全一样。为了后面考虑，我们必须保证下载到LESS文件，因为这些文件可以为我们提供定制和创意的基础。在这里，我们直接溯本求源，打开GetBootstrap.com。 打开网站，一眼就能看到大大的“Download Bootstrap”按钮。翻译本书时，最新的版本为v3.2.0。点击这个按钮，进入下载页面： 可以看到中间那个“...

(查看全部试读)