目 录
出版说明
前言
第 一篇：Bootstrap基础 1
任务1 认识响应式布局 1
学习目标 1
任务展示：自适应展示社会主义核心价值观 1
知识准备 1
1.1认识响应式布局 1
1.1.1响应式网页 1
1.1.2响应式网页布局的优缺点 2
1.1.3响应式设计的概念 3
1.1.4 认识视口 4
1.2流式网格 5
1.2.1网格设计 5
1.2.2流式布局 6
1.3媒体查找实现响应式布局 6
1.3.1媒体查询基础 6
1.3.2使用方法 8
1.3.3设置方式 8
1.3.4媒体类型 8
1.3.5判断条件 9
1.3.6媒体特征 10
1.4体验响应式布局中的图像与字体 10
1.4.1流式图像 10
1.4.2字体使用 12
1.5综合案例：体验响应式页面布局 14
1.5.1 案例展示 14
1.5.2 案例分析 15
1.5.3 案例实现 15
任务实施：自适应展示社会主义核心价值观 17
任务拓展 20
任务小结 21
拓展训练 21
任务2 认识Bootstrap 23
学习目标 23
任务展示：二十四节气页面展示 23
知识准备 24
2.1 Bootstrap简介 24
2.1.1 初识Bootstrap5 24
2.1.2使用Bootstrap的优势 24
2.1.3浏览器与支持 25
2.1.4环境搭建 25
2.2 Bootstrap 使用基础 26
2.2.1 Bootstrap初次应用体验 26
2.2.2体验Bootstrap中的响应式图像 29
2.2.3体验Bootstrap中的画像组件 31
2.3案例：尝试Bootstrap布局师资培训网导航区 31
2.3.1 案例展示 31
2.3.2 案例分析 31
2.3.3 案例实现 32
任务实施：二十四节气页面展示 33
任务拓展 38
任务小结 39
拓展训练 39
第二篇：Bootstrap框架 41
任务3 使用Bootstrap网格布局 41
学习目标 41
任务展示：西湖十景页面展示 41
知识准备 42
3.1 Bootstrap网格系统的原理 42
3.1.1网格系统的实现原理 42
3.1.2网格系统中的断点设置 43
3.1.3网格系统中的容器 43
3.1.4网格系统的工作原理 45
3.2网格系统的常用布局 47
3.2.1等宽响应式列布局 47
3.2.2不等宽响应式列布局 50
3.2.3响应式嵌套布局 52
3.3网格系统的槽与列偏移 53
3.3.1槽的应用 53
3.3.2偏移列 55
3.4综合案例：二十四节气页面的网格布局 55
3.4.1 案例展示 55
3.4.2 案例分析 55
4.4.3 案例实现 56
任务实施：西湖十景页面展示 58
任务拓展 62
任务小结 63
拓展训练 63
任务4 Bootstrap基础排版与工具应用 64
学习目标 65
任务展示：中原音乐文化页面展示 65
知识准备 65
4.1基础排版 65
4.1.1基础重置 65
4.1.2标题 65
4.1.3段落 67
4.1.4文本样式 67
4.2列表 70
4.2.1有序列表和无序列表 70
4.2.2内联列表 70
4.2.3定义列表 71
4.3工具类 71
4.3.1背景颜色 71
4.3.2显示（Display) 72
4.3.3边框（Border） 73
4.3.4间距（Spacing） 74
4.3.5 Flex布局 75
4.3.6浮动（Float) 80
4.3.7溢出(Overflow) 80
4.3.8定位(Position) 81
4.3.9阴影（Shadows） 82
4.3.10调整大小 82
4.5案例：综合案例：中原音乐文化页面展示 83
4.5.1 案例展示 83
4.5.2 案例分析 84
4.5.3 案例实现 84
任务实施：中原音乐文化页面展示 87
任务拓展 92
任务小结 92
拓展训练 93
任务5 运用Bootstrap表格 94
学习目标 94
任务展示：北京冬奥会中国队奖牌榜信息展示 94
知识准备 95
5.1网页中的表格 95
5.1.1表格的简介 95
5.1.2 表格的基本元素 95
5.1.3 创建表格 96
5.2Bootstrap中表格的简介 96
5.2.1基本型表格 96
5.2.2条纹状表格 98
5.2.3带边框的表格 99
5.2.4鼠标悬停表格 99
5.2.5响应式表格 100
5.2.6应用表格的状体类与颜色类 100
5.3综合案例：“圆梦助学”助学金评选结果展示 103
5.3.1 案例展示 103
5.3.2 案例分析 103
5.3.3 案例过程 103
任务实施：北京冬奥会中国队奖牌榜信息展示 111
任务拓展 113
任务小结 113
拓展训练 114
任务6 运用Bootstrap表单 116
学习目标 116
任务展示：青年志愿者信息注册页面制作 116
知识准备 117
6.1表单的类型 117
6.1.1堆叠表单 117
6.1.2内联表单 118
6.1.3水平排列表单 119
6.2表单中控件的分类 120
6.2.1按钮 120
6.2.2常用表单控件 123
6.2.3范围 126
6.3输入框组 126
6.3.1认识输入框组 126
6.3.2输入框组的形态 128
6.4表单浮动标签与表单验证 130
6.4.1表单浮动标签 131
6.4.2表单验证 133
6.4案例：个人捐赠用户捐款界面设计 136
6.4.1 案例展示 136
6.4.2 案例分析 137
6.4.3 案例实现 137
任务实施：青年志愿者信息注册页面制作 140
任务拓展 143
任务小结 144
拓展训练 144
任务7 使用组件 145
学习目标 145
任务展示：历代墨竹优秀作品展示学习页面设计制作 145
知识准备 145
7.1普通组件 145
7.1.1字体图标库 146
7.1.2徽章 147
7.1.3面包屑导航 148
7.1.4按钮组 149
7.1.5警告框 152
7.1.6进度条 153
7.1.7分页 154
7.1.8导航 155
7.1.9列表组 161
7.1.10卡片 163
7.2高级组件 164
7.2.1下拉菜单 164
7.2.2导航栏 166
7.2.3轮播 168
7.2.4轮播 170
7.2.5模态框 173
7.2.6提示框 175
7.2.7弹出框 176
7.2.8消息弹窗 178
7.2.9滚动监听 179
7.2.10侧边栏导航 182
7.3案例：博物馆侧边栏导航设计制作 183
7.3.1 案例展示 184
7.3.2 案例分析 184
7.3.3 案例实现 184
任务实施：历代墨竹优秀作品展示学习页面设计制作 187
任务拓展 197
任务小结 199
拓展训练 199
第三篇：Bootstrap综合实战 41
任务8 综合实战:AI教育企业主页设计制作 200
8.1项目展示 200
8.2项目分析 202
8.3项目展示 203
8.3.1搭建基本页面框架 203
8.3.2顶部栏模块的分析与实现 204
8.3.3导航栏模块的分析与实现 207
9.3.4轮播图模块实现 212
8.3.5信息和课程报名模块的分析与实现 213
8.3.6产品模块的分析与实现 215
8.3.7新闻和合作伙伴模块的分析与实现 224
8.3.8 项目拓展 231