Bootstrap实战(第2版)

Boostrap是Twitter公司内部的一个工具，开源之后迅速得到了各方的认可。本书基于近期新Bootstrap 4撰写，在简单介绍了安装与配置之后就直奔主题，分别讨论了构建流程、博客站点、WordPress 主题、个人作品展示站点、企业网站、电子商务网站、单页面营销网站和Angular应用等几个拥有代表性的应用案例，结合这些案例细致地剖析Bootstrap的使用方式和技巧。

   巴斯·乔布森（Bass Jobsen）

拥有20多年软件开发经验，Bootstrap布道者，2016年为Bootstrap 4发布了CLI。

戴维·科克伦（David Cochran）

卫斯理大学副教授，纽曼大学副教授，BitBrilliant公司创始人。重视很好实践，不喜欢走捷径，推崇Web标准。2012年开始在媒体上开设Bootstrap专栏，影响了很多Web开发者。

伊恩·惠特利（Ian Whitley）

Bootstrap深度用户，拥有丰富的相关开发经验。目前任BitBrilliant公司开发主管。

   第1章初识Bootstrap1

1.1数量和质量1

1.1.1与时俱进2

1.1.2Sass的威力2

1.1.3下载已编译代码3

1.1.4支持Flexbox的版本3

1.1.5仅包含网格系统的版本3

1.1.6从CDN加载运行Bootstrap4

1.2下载Bootstrap源文件4

1.2.1下载后的文件5

1.2.2下载安Bootstrap的其他方法6

1.3工具配置6

1.4使用BootstrapCLI8

1.5准备新的Bootstrap项目9

1.6设置主结构元素10

1.7浏览器支持20

1.7.1浏览器引擎前缀20

1.7.2弹性盒模型21

1.8Yeoman工作流22

1.9排错22

1.10小结23

第2章用Gulp打造自己的构建流程24

2.1开发目标24

2.2Bootstrap构建流程26

2.3在项目中安装Gulp26

2.3.1创建包含任务信息的Gulpfile.js27

2.3.2清理任务27

2.4配置开发环境和生产环境27

2.5用Bower安装Bootstrap28

2.6创建本地Sass文件结构29

2.6.1将Bootstrap的Sass代码编译成CSS代码30

2.6.2使用CSS调试sourcemap30

2.6.3运行postCSS前缀自动添加插件31

2.6.4处理CSS代码以适配生产环境33

2.6.5对SCSS代码进行静态检查33

2.7准备JavaScript插件35

2.8模块化HTML36

2.8.1新建Gulp任务，编译Panini模板37

2.8.2校验编译后的HTML代码38

2.9创建静态Web服务器38

2.9.1监听文件的修改39

2.9.2复制并压缩图片39

2.10归纳汇总，创建default任务40

2.11使用构建流程，完成项目41

2.11.1布局模板41

2.11.2页眉42

2.12调整产品特性的样式48

2.13调整页脚的样式50

2.14用BootstrapCLI运行模板51

2.15JavaScript任务管理器不是必需品52

2.16在GitHub上发布成果52

2.17小结53

第3章用Bootstrap和Sass定制博客站点54

3.1预期结果及搭建顺序54

3.2项目配置与要求56

3.3Sass在项目开发中的威力56

3.3.1规则嵌套57

3.3.2变量58

3.3.3混入59

3.3.4操作60

3.4文件引入61

3.5使用SCSS检查工具编写更简洁易读的代码61

3.6Sass定制策略62

3.6.1用变量进行定制62

3.6.2扩展Bootstrap的预定义CSS类63

3.6.3使用复用Bootstrap中的混入64

3.6.4Sass函数65

3.6.5复用他人的代码65

3.7编写自己的定制SCSS代码65

3.7.1配色方案66

3.7.2准备HTML模板67

3.7.3调整页眉样式68

3.7.4调整导航条样式70

3.8博客页面主体部分76

3.9调整博客文章的样式77

3.10调整侧边栏的样式80

3.11页脚81

3.11.1页脚中的左侧栏82

3.11.2页脚中的右侧栏84

3.12复用社交媒体按钮的SCSS代码84

3.13本章源代码85

3.14小结86

第4章WordPress主题87

4.1安装WordPress及相关依赖87

4.1.1安装WordPress88

4.1.2Node.js、Gulp和Bower88

4.2安装JBST4主题88

4.3安装主题89

4.4复用Sass代码91

4.5WordPress与Bootstrap之间的冲突——预定义CSS类93

4.5.1将导航菜单转换成Bootstrap导航条94

4.5.2关于网格96

4.6配置导航条96

4.6.1更新HTML代码98

4.6.2将照片置于导航条正中间98

4.7设置博客的页眉100

4.8不要忘了页脚100

4.9调整博客文章的样式102

4.10博客中的侧边栏103

4.11滑入式侧边栏107

4.12调整按钮的样式111

4.13在页面上调整评论的样式113

4.14在页面中添加传送带效果116

4.15在主题中使用FontAwesome字体图标库118

4.16使用网格砌体模板119

4.17子主题121

4.18从GitHub上下载122

4.19小结122

第5章作品展示站点123

5.1设计目标123

5.2查看练习文件125

5.3搭建传送带129

5.4创建响应式分栏136

5.5把链接变成按钮138

5.6理解Sass139

5.7根据需要定制Bootstrap的Sass文件139

5.8添加logo图片143

5.9添加图标145

5.10调整传送带样式147

5.10.1添加上、下内边距147

5.10.2重定位传送带指示器147

5.10.3调整指示器样式148

5.11调整分栏及其内容150

5.12调整页脚样式153

5.13接下来做什么156

5.14小结157

第6章企业网站158

6.1准备启动文件160

6.2搭建基础设计161

6.2.1在导航条中添加下拉菜单161

6.2.2用holder.js添加图片163

6.3创建复杂的页头区164

6.3.1把logo放到导航条上方165

6.3.2调整导航条166

6.4添加实用导航169

6.5调整响应式导航172

6.6调整配色174

6.7调整折叠后的导航条样式175

6.8调整水平导航条176

6.9增加对Flexbox的支持178

6.10设计复杂的响应式布局178

6.10.1调整大屏幕和超大屏幕中的布局180

6.10.2调整平板视口的中型布局182

6.10.3调整标题、字号和按钮186

6.10.4增大主栏188

6.10.5调整第三栏190

6.10.6针对多个视口进行微调193

6.11复杂的页脚193

6.12准备标记193

6.12.1调整布局适应平板196

6.12.2针对性地清除197

6.12.3修整细节198

6.13小结201

第7章电子商务网站202

7.1商品页面的标记204

7.2面包屑、页面标题和分页导航205

7.3调整商品网格208

7.4侧边栏和筛选选项217

7.4.1基本样式218

7.4.2调整ClearanceSale链接样式218

7.4.3调整选项列表样式220

7.4.4为选项链接添加FontAwesome图标复选框222

7.4.5使用Sass混入在栏中对齐选项225

7.4.6针对平板和手机调整选项列表布局227

7.4.7在手机上折叠选项面板229

7.5添加搜索表单231

7.6小结234

第8章单页面营销网站235

8.1概况235

8.2研究初始文件238

8.3了解页面内容239

8.4添加FontAwesome图标字体至项目239

8.5调整导航条240

8.6定制高清图242

8.7美化功能列表247

8.8装饰用户评论区250

8.8.1定位及美化说明252

8.8.2调整说明元素的位置253

8.9吸引人的价目表255

8.9.1准备变量、文件和标记255

8.9.2美化表格头258

8.9.3调整表体和表脚样式259

8.9.4为不同的价目表添加不同的样式260

8.9.5适配小视口262

8.9.6给表格以视觉层次263

8.10最后的调整265

8.11为导航条添加ScrollSpy266

8.12小结269

第9章用Bootstrap搭建Angular应用271

9.1概述271

9.2首次搭建Angular应用272

9.3在应用中添加路由273

9.4配置导航274

9.5在应用程序中添加Bootstrap的标记代码275

9.6在应用程序中集成Bootstrap的CSS代码276

9.6.1设置Sass编译器277

9.6.2添加后置处理器278

9.6.3使用ng-bootstrap指令279

9.7下载完整的代码282

9.8使用AngularCLI282

9.9在React.js中使用Bootstrap283

9.10其他用于部署Bootstrap4的工具285

9.11小结287