BOOTSTRAP实战(第2版)

目录

第　1 章 初识Bootstrap　1

1.1　数量和质量　1

1.1.1　与时俱进　2

1.1.2　Sass的威力　2

1.1.3　下载已编译代码　3

1.1.4　支持Flexbox的版本　3

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

1.1.6　从CDN加载运行Bootstrap　4

1.2　下载Bootstrap源文件　4

1.2.1　下载后的文件　5

1.2.2　下载安Bootstrap的其他方法　6

1.3　工具配置　6

1.4　使用Bootstrap CLI　8

1.5　准备新的Bootstrap项目　9

1.6　设置主结构元素　10

1.7　浏览器支持　20

1.7.1　浏览器引擎前缀　20

1.7.2　弹性盒模型　21

1.8　Yeoman工作流　22

1.9　排错　22

1.10　小结　23

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

2.1　开发目标　24

2.2　Bootstrap构建流程　26

2.3　在项目中安装Gulp　26

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

2.3.2　清理任务　27

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

2.5　用Bower安装Bootstrap　28

2.6　创建本地Sass文件结构　29

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

2.6.2　使用CSS调试sourcemap　30

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

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

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

2.7　准备JavaScript插件　35

2.8　模块化HTML　36

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　用Bootstrap CLI运行模板　51

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

2.16　在GitHub上发布成果　52

2.17　小结　53

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

3.1　预期结果及搭建顺序　54

3.2　项目配置与要求　56

3.3　Sass在项目开发中的威力　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.6　Sass定制策略　62

3.6.1　用变量进行定制　62

3.6.2　扩展Bootstrap的预定义CSS 类　63

3.6.3　使用/复用Bootstrap中的混入　64

3.6.4　Sass函数　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　安装WordPress　88

4.1.2　Node.js、Gulp和Bower　88

4.2　安装JBST 4主题　88

4.3　安装主题　89

4.4　复用Sass代码　91

4.5　WordPress与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　在主题中使用Font Awesome字体图标库　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　理解Sass　139

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　调整Clearance Sale链接样式　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　添加Font Awesome图标字体至项目　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　为导航条添加ScrollSpy　266

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　使用Angular CLI　282

9.9　在React.js中使用Bootstrap　283

9.10　其他用于部署Bootstrap 4的工具　285

9.11　小结　287