第1章　初识Bootstrap　1
1.1　Bootstrap　1
1.1.1　Bootstrap概述　1
1.1.2　Bootstrap的特点　2
1.1.3　Bootstrap的组成　3
1.2　浏览器　3
1.2.1　PC端浏览器　3
1.2.2　移动端浏览器　4
1.3　Visual Studio Code编辑器　4
1.3.1　下载并安装Visual Studio Code编辑器　5
1.3.2　安装中文扩展包　7
1.3.3　使用Visual Studio Code编辑器　8
1.4　移动Web开发的主流方案　9
1.4.1　单独制作移动端页面　10
1.4.2　制作响应式页面　11
本章小结　13
课后练习　13
第2章　移动Web开发基础　15
2.1　屏幕分辨率和设备像素比　15
2.1.1　屏幕分辨率　16
2.1.2　设备像素比　16
2.2　视口　17
2.3　CSS样式初始化　20
2.4　CSS变量　23
2.4.1　定义CSS变量　23
2.4.2　读取CSS变量的值　24
2.4.3　CSS变量值的类型　25
2.4.4　在JavaScript中设置CSS变量　27
2.5　CSS预处理器　30
2.5.1　Less　30
2.5.2　Sass　32
2.6　Web Storage　35
2.6.1　Web Storage概述　35
2.6.2　localStorage　36
2.6.3　sessionStorage　38
2.7　视频和音频　41
2.7.1　<video>标签　41
2.7.2　<audio>标签　42
2.7.3　video对象和audio对象　43
2.8　移动端touch事件　45
2.8.1　touch事件概述　45
2.8.2　TouchEvent对象　47
2.8.3　模拟移动端单击事件　48
本章小结　50
课后练习　50
第3章　移动Web屏幕适配　53
3.1　媒体查询　53
3.2　流式布局和弹性盒布局　57
3.2.1　流式布局　57
3.2.2　弹性盒布局　60
3.3　rem单位、vw单位和vh单位　64
3.3.1　rem单位　64
3.3.2　vw单位和vh单位　67
3.4　字体图标　68
3.4.1　什么是字体图标　68
3.4.2　下载字体图标　69
3.4.3　使用字体图标　73
3.5　二倍图　74
3.6　SVG　77
3.6.1　什么是SVG　77
3.6.2　SVG的基本使用方法　77
本章小结　79
课后练习　79
第4章　Bootstrap开发基础　81
4.1　Bootstrap下载和引入　81
4.1.1　下载Bootstrap　81
4.1.2　引入Bootstrap　85
4.2　Bootstrap布局容器　85
4.2.1　初识Bootstrap布局容器　86
4.2.2　Bootstrap布局容器的使用方法　87
4.3　Bootstrap栅格系统　90
4.3.1　初识Bootstrap栅格系统　90
4.3.2　Bootstrap栅格系统的使用方法　91
4.4　Bootstrap工具类　94
4.4.1　显示方式工具类　94
4.4.2　边距工具类　96
4.4.3　弹性盒布局工具类　98
本章小结　100
课后练习　101
第5章　Bootstrap常用样式　103
5.1　标题样式　103
5.2　文本样式　106
5.2.1　强调文本　107
5.2.2　引用文本　109
5.2.3　文本颜色　111
5.2.4　文本格式　112
5.3　列表样式　116
5.4　图文样式　117
5.4.1　图像展示方式　117
5.4.2　图像对齐方式　119
5.4.3　图文组合方式　121
5.5　表格样式　122
5.6　辅助样式　125
5.6.1　背景样式　125
5.6.2　边框样式　127
本章小结　129
课后练习　130
第6章　Bootstrap表单　132
6.1　表单控件样式　132
6.1.1　文本框　132
6.1.2　下拉列表　135
6.1.3　单选按钮和复选框　136
6.1.4　输入组　138
6.2　表单布局方式　140
6.2.1　行内表单布局　140
6.2.2　水平表单布局　142
6.2.3　响应式表单布局　144
6.3　表单验证　147
本章小结　154
课后练习　155
第7章　Bootstrap常用组件　157
7.1　初识组件　158
7.1.1　组件概述　158
7.1.2　Bootstrap组件的基本使用方法　158
7.2　按钮组件　161
7.2.1　基础样式按钮　161
7.2.2　轮廓样式按钮　162
7.2.3　尺寸样式按钮　163
7.2.4　状态样式按钮　164
7.2.5　组合样式按钮　165
7.3　导航组件　167
7.3.1　基础导航　167
7.3.2　标签式导航　169
7.3.3　胶囊式导航　171
7.3.4　面包屑导航　173
7.4　导航栏组件　174
7.4.1　基础导航栏　175
7.4.2　带有折叠按钮的导航栏　177
7.5　下拉菜单组件　179
7.5.1　下拉菜单按钮　180
7.5.2　下拉菜单导航栏　181
7.6　卡片组件　184
7.6.1　基础卡片　184
7.6.2　图文卡片　185
7.6.3　背景图卡片　187
7.7　轮播组件　190
7.7.1　轮播图功能分析　190
7.7.2　基础轮播图　191
7.8　提示组件　194
7.8.1　工具提示框　194
7.8.2　弹出提示框　197
7.8.3　警告框　201
7.9　模态框组件　204
本章小结　207
课后练习　207
第8章　项目实战——基于Bootstrap的在线学习平台　210
8.1　项目介绍　210
8.1.1　项目展示　211
8.1.2　项目分析　214
8.1.3　项目目录结构　215
8.2　导航栏模块　216
8.2.1　导航栏模块效果展示　216
8.2.2　导航栏模块结构分析　217
8.2.3　导航栏模块代码实现　217
8.3　轮播图模块　221
8.3.1　轮播图模块效果展示　221
8.3.2　轮播图模块结构分析　222
8.3.3　轮播图模块代码实现　223
8.4　视频教程模块　226
8.4.1　视频教程模块效果展示　226
8.4.2　视频教程模块结构分析　227
8.4.3　视频教程模块代码实现　228
8.5　学习路线模块　229
8.5.1　学习路线模块效果展示　229
8.5.2　学习路线模块结构分析　231
8.5.3　学习路线模块代码实现　232
8.6　热门学习工具模块　236
8.6.1　热门学习工具模块效果展示　237
8.6.2　热门学习工具模块结构分析　237
8.6.3　热门学习工具模块代码实现　238
8.7　版权模块　239
8.7.1　版权模块效果展示　239
8.7.2　版权模块结构分析　239
8.7.3　版权模块代码实现　240
本章小结　242