第1章 响应式网页设计 1
1.1 什么是响应式网页设计 1
1.1.1 响应式网页设计原理 1
1.1.2 响应式网页的优点和缺点 2
1.2 视口 3
1.2.1 布局视口 3
1.2.2 视觉视口 4
1.2.3 理想视口 4
1.3 媒体查询 5
1.3.1 媒体查询的设置方式 5
1.3.2 媒体查询的使用方法 5
1.3.3 媒体类型 5
1.3.4 判断条件 6
1.3.5 媒体属性 7
1.4 实战：图书销售页面设计 9
1.4.1 页面结构分析 9
1.4.2 代码实现 10
1.5 本章小结 15
1.6 习题 15
第2章 Bootstrap简介 16
2.1 初识Bootstrap 16
2.1.1 何谓Bootstrap 16
2.1.2 Bootstrap的发展 16
2.1.3 Bootstrap的优势 18
2.1.4 Bootstrap有哪些内容 18
2.2 Bootstrap开发环境 19
2.2.1 VS Code 19
2.2.2 下载Bootstrap 19
2.2.3 安装Bootstrap 21
2.2.4 快速体验Bootstrap 22
2.3 实战：传统节日介绍页面 25
2.3.1 页面结构分析 25
2.3.2 代码实现 25
2.4 本章小结 28
2.5 习题 28
第3章 Bootstrap脚手架 29
3.1 Bootstrap布局基础 29
3.1.1 断点 29
3.1.2 布局容器 30
3.1.3 弹性布局 31
3.2 网格系统 33
3.2.1 网格系统的组成 33
3.2.2 网格系统的特性 33
3.2.3 基础网格系统的应用 34
3.2.4 响应类 35
3.2.5 列排序 38
3.2.6 列嵌套 40
3.3 实战：信息推广页面 41
3.3.1 页面结构分析 41
3.3.2 代码实现 42
3.4 本章小结 45
3.5 习题 45
第4章 Bootstrap页面内容 47
4.1 排版 47
4.1.1 常用排版类 47
4.1.2 强调类 50
4.1.3 引用类 51
4.1.4 列表类 52
4.2 代码标签 55
4.3 表格 57
4.3.1 表格的结构标签 57
4.3.2 表格的个性化风格 58
4.4 表单 60
4.4.1 表单控件的基本结构 60
4.4.2 表单控件类 60
4.4.3 表单控件的使用 61
4.5 图片 62
4.5.1 图片类 62
4.5.2 图片对齐方式 63
4.6 画像 64
4.7 实战：经典管理系统页面 65
4.7.1 页面结构分析 65
4.7.2 代码实现 66
4.8 本章小结 67
4.9 习题 68
第5章 Bootstrap的工具类 69
5.1 文本类 69
5.1.1 文本对齐类 69
5.1.2 文本转换类 70
5.1.3 文本折行与溢出类 71
5.1.4 文本字体类 72
5.1.5 其他文本类 73
5.2 颜色类 74
5.2.1 文本颜色类 74
5.2.2 链接颜色 76
5.2.3 背景颜色类 77
5.2.4 案例练习——前端学习菜单
页面 79
5.3 边框类 80
5.3.1 边框设置类 80
5.3.2 边框颜色类 81
5.3.3 圆角边框类 82
5.4 边距类 84
5.5 display类 86
5.5.1 显示或隐藏元素 86
5.5.2 响应式显示或隐藏元素 88
5.6 浮动类 89
5.7 阴影类 91
5.8 尺寸类 92
5.8.1 相对于父元素的尺寸类 92
5.8.2 相对于视口的尺寸类 94
5.9 溢出类 95
5.10 定位类 96
5.11 内嵌类 98
5.12 实战：景区门票详情页面 99
5.12.1 页面结构分析 99
5.12.2 代码实现 99
5.13 本章小结 101
5.14 习题 101
第6章 Bootstrap的弹性布局 103
6.1 弹性盒子 103
6.1.1 初识弹性布局 103
6.1.2 Bootstrap 4中的弹性布局 103
6.2 排列方向类 104
6.2.1 水平方向类 105
6.2.2 垂直方向类 106
6.3 对齐布局类 107
6.3.1 内容排列布局类 107
6.3.2 多行项目对齐布局类 109
6.3.3 单行项目对齐布局类 111
6.3.4 指定项目对齐布局类 113
6.3.5 案例练习——骰子图案设计
页面 115
6.4 自动相等布局类 118
6.5 伸缩变换布局类 119
6.6 自动浮动布局类 121
6.7 包裹布局类 122
6.8 排序布局类 124
6.9 实战：新时代的奋斗者宣传
页面 125
6.9.1 页面结构分析 125
6.9.2 代码实现 125
6.10 本章小结 127
6.11 习题 127
第7章 Bootstrap的CSS组件 129
7.1 徽章 129
7.2 警告框 130
7.2.1 默认警告框 130
7.2.2 警告框附加内容 131
7.2.3 警告框状态 132
7.3 图标 135
7.3.1 字体图标 135
7.3.2 旋转图标 136
7.4 按钮 137
7.4.1 按钮组件 137
7.4.2 按钮风格设计 138
7.4.3 基础按钮组 141
7.4.4 按钮组的布局与样式 141
7.5 下拉菜单 145
7.5.1 下拉菜单的基本结构 145
7.5.2 下拉菜单辅助类 146
7.5.3 下拉菜单的使用 148
7.6 导航 149
7.6.1 导航组件的基本结构 149
7.6.2 导航辅助类 150
7.6.3 导航选项卡 152
7.6.4 面包屑导航 153
7.7 导航栏 154
7.7.1 导航栏的运行特点 154
7.7.2 导航栏辅助类 154
7.8 进度条 157
7.9 分页 158
7.10 卡片 160
7.10.1 卡片内容类 160
7.10.2 卡片的使用 162
7.10.3 卡片布局类 163
7.11 媒体对象 165
7.11.1 媒体对象的基本结构 165
7.11.2 媒体对象的使用 166
7.12 巨幕 167
7.13 实战：传统美食介绍页面 168
7.13.1 页面结构分析 168
7.13.2 代码实现 169
7.14 本章小结 174
7.15 习题 174
第8章 Bootstrap的JavaScript插件 176
8.1 插件概述 176
8.1.1 插件工具 176
8.1.2 插件引入与调用 176
8.1.3 插件事件 177
8.2 模态框 177
8.2.1 模态框的基本结构 177
8.2.2 模态框辅助类 178
8.2.3 模态框的事件与方法 178
8.3 下拉菜单 180
8.4 滚动监听 182
8.5 工具提示 184
8.6 弹出框 187
8.7 警告框 189
8.8 按钮 190
8.9 折叠 192
8.9.1 折叠插件的基本结构 192
8.9.2 手风琴式折叠 193
8.9.3 折叠插件的调用 194
8.9.4 折叠插件的方法与事件 195
8.9.5 折叠插件的事件调用 195
8.10 轮播 196
8.10.1 轮播插件的基本结构 196
8.10.2 轮播插件的风格设计 199
8.10.3 轮播插件的调用 200
8.10.4 轮播插件的方法与事件 200
8.11 实战：企业门户网站首页 202
8.11.1 头部导航栏区域 203
8.11.2 Service折叠区域 204
8.11.3 About弹出框区域 205
8.11.4 Contact联系区域 206
8.11.5 小型设备状态下的页面
显示效果 207
8.12 本章小结 208
8.13 习题 208



第9章 综合案例：智慧医疗 210
9.1 项目分析 210
9.1.1 页面概述 210
9.1.2 项目结构 211
9.2 网页预览 212
9.2.1 网站首页效果 212
9.2.2 产品中心页效果 213
9.2.3 应用案例页效果 214
9.2.4 新闻中心页效果 214
9.2.5 加入我们页效果 214
9.2.6 登录与注册模块 215
9.3 设计与实现 215
9.3.1 网站首页代码 215
9.3.2 产品中心页代码 228
9.3.3 应用案例页代码 232
9.3.4 新闻中心页代码 236
9.3.5 加入我们页代码 240
9.3.6 登录与注册模块代码 245
9.4 项目总结 248