Bootstrap响应式网页设计实战（电子活页式）
定 价：59.8 元
- 作者：温凯 陈承欢
- 出版时间：2025/12/1
- ISBN：9787115666444
- 出 版 社：人民邮电出版社
- 中图法分类：TP393.092.2
- 页码：0
- 纸张：
- 版次：01
- 开本：16开
本书由浅入深、全面系统地介绍Bootstrap 5响应式网页设计的相关知识。全书共9个模块，具体包括Bootstrap 5响应式网页设计基础、Bootstrap 5页面元素控制与美化、Bootstrap 5页面弹性布局设计、Bootstrap 5页面导航与下拉菜单设计、Bootstrap 5页面数据展示设计、Bootstrap 5页面表单操作与用户交互设计、Bootstrap 5消息提示与信息反馈设计、Bootstrap 5网页特效设计及Bootstrap 5响应式网页设计任务实战。本书内容丰富，实例翔实，旨在为读者提供从基础入门到实践精通的全面指导，提升其网页设计能力。
本书可作为高校计算机相关专业的教材，也可作为计算机培训机构的培训教材，还可作为Web前端开发爱好者的自学参考书。
1.名校名师作者，写作质量高：每一章节都经过精心打磨，旨在为读者提供最优质的学习体验。
2.模块式教学，案例引导：采用模块化教学设计，将复杂的知识点分解成易于理解和掌握的小单元，通过实际案例逐步引导学习过程。
3.案例新颖，贴近实际应用：书中案例选材新颖，紧贴行业最新趋势和技术发展，涵盖多个实际应用场景。
4.配套资源丰富 ：提供全方位的配套资源支持，包括教学视频、课后习题等。无论是自学还是课堂教学，都能找到合适的辅助材料。
陈承欢，三级教授，高级工程师，软件设计师，湖南省省级专业带头人，湖南省青年骨干教师，武汉大学软件工程专业，湖南铁道职业技术学院教务处处长。2008年，曾赴澳大利亚坎培门理工学院培训交流，2015年，曾赴加拿大圣力嘉学院培训交流，2019年，曾赴英国、德国学习交流。主持开发职业教育特色教材50多本，其中国家级“十一五”规划教材4本，国家级“十二五”规划教材10本，国家级“十三五”规划教材7本。国家精品课程与国家精品共享课程配套教材1本，国家职业教育资源库配套教材3本。主持《网页设计与制作》国家精品课程，主持《网页设计与制作》国家精品共享课程，主持《计算机维护与维修》、《实用工具软件应用》、《网页样式设计》3门国家资源库课程。国家级教学成果奖二等奖1项，湖南省职业教育教学成果奖特等奖1项、三等奖1项，湖南省教育教学改革发展优秀成果奖参等奖1项。
模块1 Bootstrap 5响应式网页设计基础 1
知识导学 1
1.1 Bootstrap概述 1
1.2 Bootstrap 5主要内容 3
1.3 Bootstrap 5容器 4
1.3.1 固定宽度容器 4
1.3.2 100%宽度容器 5
1.3.3 容器边距 5
1.3.4 容器的边框和颜色 7
1.3.5 响应式容器 8
1.4 Bootstrap 5网格系统 8
1.4.1 网格类 9
1.4.2 网格系统规则 9
1.4.3 Bootstrap 5网格的基本结构 10
1.4.4 创建宽度相等的列 12
1.4.5 创建不等宽的响应式列 13
1.4.6 设置某一列的宽度 14
1.4.7 创建平板计算机和桌面端的网格布局 14
1.4.8 创建平板计算机、桌面显示器、大型桌面显示器、超大型桌面显示器的网格布局 15
1.4.9 嵌套列 15
1.4.10 偏移列 16
1.5 使用本地的Bootstrap导入CSS和JavaScript文件 17
1.6 基于Bootstrap 5创建响应式网页 18
模拟训练 21
【模拟实例1-1】基于Bootstrap 5创建响应式网页demo01.html 21
【模拟实例1-2】基于Bootstrap 5创建响应式网页demo02.html 21
【模拟实例1-3】基于Bootstrap 5创建响应式网页demo03.html 22
模块习题 23
模块2 Bootstrap 5页面元素控制与美化 24
知识导学 24
2.1 Bootstrap 5文字排版 24
2.1.1 Bootstrap 5默认样式设置 24
2.1.2
～标题样式设置 24
2.1.3 .display标题类样式设置 25
2.1.4 样式设置 26
2.1.5 样式设置 27
2.1.6 样式设置 27
2.1.7 样式设置 27
2.1.8 样式设置 28
2.1.9 样式设置 28
2.1.10 样式设置 29
2.1.11 Bootstrap 5更多文字排版类样式设置 29
2.2 Bootstrap 5颜色设置 30
2.2.1 Bootstrap 5的颜色类 30
2.2.2 设置文本颜色 31
2.2.3 设置链接文本的颜色 31
2.2.4 设置颜色透明度 32
2.2.5 设置背景颜色 32
2.3 Bootstrap 5图像样式设置 34
2.3.1 设置图像形状 34
2.3.2 设置图像边框 35
2.3.3 设置图像对齐方式 35
2.3.4 设置图像居中 36
2.3.5 设置响应式图像 36
2.4 Bootstrap 5实用工具类 37
2.4.1 设置边框 37
2.4.2 浮动与清除浮动 41
2.4.3 设置响应式浮动 42
2.4.4 设置水平居中对齐 43
2.4.5 设置垂直对齐 43
2.4.6 设置元素的宽度与高度 44
2.4.7 设置元素的间距 45
2.4.8 设置元素的阴影 48
2.4.9 设置纵横比 49
2.4.10 设置元素的可见性 50
2.4.11 设置关闭图标的样式 50
2.4.12 使用屏幕阅读器获取隐藏元素 51
2.5 Bootstrap 5徽章 52
2.5.1 徽章特性 52
2.5.2 设置徽章的颜色 52
2.5.3 创建胶囊徽章 53
2.5.4 在按钮内使用徽章 53
2.6 Bootstrap 5进度条 54
2.6.1 创建进度条 54
2.6.2 设置进度条高度 55
2.6.3 设置进度条的文本标签 55
2.6.4 创建彩色进度条 56
2.6.5 创建条纹进度条 57
2.6.6 创建带动画的进度条 59
2.6.7 创建混合色彩进度条 59
2.7 Bootstrap 5加载效果 60
2.7.1 实现加载效果 60
2.7.2 使用文本颜色类为加载效果设置不同的颜色 60
2.7.3 设置闪烁的加载效果 61
2.7.4 设置加载效果的大小 61
2.7.5 向按钮添加加载效果 62
2.8 Bootstrap Jumbotron 62
模拟训练 63
【模拟实例2-1】创建各种形式的按钮 63
【模拟实例2-2】创建各种形式的进度条 64
模块习题 65
模块3 Bootstrap 5页面弹性布局设计 66
知识导学 66
3.1 Flexbox概述 66
3.2 设置弹性元素的水平显示方向 67
3.3 设置弹性元素的垂直显示方向 68
3.4 设置弹性元素的水平对齐方式 69
3.5 设置弹性元素等宽 70
3.6 扩展弹性元素占用剩余可用空间 71
3.7 设置弹性元素的排列顺序 71
3.8 为弹性元素添加自动外边距 72
3.9 设置弹性容器中弹性元素的包裹方式 73
3.10 控制弹性元素在垂直方向上的对齐方式 74
3.11 控制单行弹性元素的垂直对齐方式 74
3.12 设置单个弹性元素的垂直对齐方式 75
模拟训练 77
【模拟实例3-1】用基本弹性布局创建包含多种布局形式的网页 77
模块习题 78
模块4 Bootstrap 5页面导航与下拉菜单设计 79
知识导学 79
4.1 Bootstrap 5分页及页码导航 79
4.1.1 创建基本分页 79
4.1.2 设置当前页的页码为活动状态 80
4.1.3 将分页链接设置为禁用状态 80
4.1.4 设置分页条目的大小 81
4.1.5 设置分页条目的对齐方式 82
4.1.6 制作面包屑导航 83
4.2 Bootstrap 5下拉菜单 84
4.2.1 创建下拉菜单 84
4.2.2 在下拉菜单中添加分隔线 85
4.2.3 在下拉菜单中添加标题 86
4.2.4 下拉菜单中的可用项与禁用项 87
4.2.5 控制下拉菜单的位置 87
4.2.6 控制下拉菜单的弹出方向 88
4.2.7 设置下拉菜单中的普通文本项 90
4.2.8 在按钮组中设置下拉菜单 91
4.3 Bootstrap 5导航栏 92
4.3.1 创建简单的水平导航栏 93
4.3.2 创建垂直导航栏 93
4.3.3 设置导航栏的对齐方式 94
4.3.4 创建彩色导航栏 95
4.3.5 在导航栏中突出显示品牌Logo 97
4.3.6 创建折叠式导航栏 99
4.3.7 创建带下拉菜单的导航栏 101
4.3.8 在导航栏中使用表单与按钮 102
4.3.9 设置导航栏中的非链接文本 104
4.3.10 创建位置固定的导航栏 105
4.3.11 创建黏性导航栏 106
4.4 Bootstrap 5选项卡导航栏 107
4.4.1 创建动态选项卡 107
4.4.2 创建胶囊状动态选项卡 109
4.4.3 创建等宽选项卡/胶囊的下拉菜单 110
4.4.4 创建胶囊下拉菜单 111
4.4.5 创建选项卡下拉菜单 112
4.4.6 创建可切换的动态选项卡 113
4.4.7 创建可切换的胶囊状动态选项卡 114
4.5 Bootstrap 5滚动监听 115
4.5.1 创建滚动监听 115
4.5.2 创建垂直滚动监听 116
4.6 Bootstrap 5侧边栏 116
4.6.1 创建侧边栏 116
4.6.2 控制侧边栏的方向 118
4.6.3 设置页面内容是否可滚动及背景 118
模拟训练 119
【模拟实例4-1】创建中文日历 119
【模拟实例4-2】创建包括下拉菜单和搜索功能的顶部导航栏 119
【模拟实例4-3】创建首页特色顶部导航栏 120
【模拟实例4-4】创建个性化的侧边栏 120
模块习题 122
模块5 Bootstrap 5页面数据展示设计 123
知识导学 123
5.1 Bootstrap 5列表组及应用 123
5.1.1 创建列表组 123
5.1.2 设置列表项的激活状态 124
5.1.3 设置禁用的列表项 125
5.1.4 设置包含链接的列表项 126
5.1.5 创建没有边框和圆角的列表组 126
5.1.6 创建带编号的列表组 127
5.1.7 创建水平列表组 127
5.1.8 设置列表项的颜色 128
5.1.9 创建带徽章的列表组 129
5.2 Bootstrap 5表格及应用 129
5.2.1 制作Bootstrap 5基础表格 129
5.2.2 制作条纹表格 131
5.2.3 制作带边框的表格 132
5.2.4 设置表格行的悬停效果 133
5.2.5 制作具有深色背景的表格 134
5.2.6 制作带有深色条纹的表格 135
5.2.7 制作有悬停效果的深色背景表格 136
5.2.8 制作无边框的表格 137
5.2.9 为表格的行或者单元格设置颜色 139
5.2.10 制作小型表格 140
5.2.11 制作响应式表格 141
模拟训练 143
【模拟实例5-1】展示图文形式的列表项 143
【模拟实例5-2】展示、修改与删除列表组中列表项的内容 143
【模拟实例5-3】展示、添加与删除列表组中嵌套的列表项 144
模块习题 145
模块6 Bootstrap 5页面表单操作与用户交互设计 146
知识导学 146
6.1 Bootstrap 5按钮 146
6.1.1 设置按钮样式 146
6.1.2 设置按钮边框 147
6.1.3 设置按钮大小 148
6.1.4 创建块级按钮 149
6.1.5 设置按钮的活动和禁用状态 150
6.1.6 设置处于加载状态的按钮 150
6.2 Bootstrap 5按钮组 151
6.2.1 创建按钮组 151
6.2.2 设置按钮组大小 152
6.2.3 创建垂直按钮组 153
6.2.4 在水平按钮组内设置下拉菜单 154
6.2.5 在垂直按钮组内设置下拉菜单 155
6.3 Bootstrap 5表单与表单元素 155
6.3.1 Bootstrap 5表单元素布局 155
6.3.2 设置表单元素的状态 157
6.3.3 使用文本框 158
6.3.4 使用输入框 159
6.3.5 下拉菜单 160
6.3.6 使用复选框与单选按钮 164
6.3.7 使用范围菜单 167
6.3.8 创建与使用输入组 169
6.3.9 浮动效果 174
模拟训练 176
【模拟实例6-1】使用不同的验证类实现表单的验证功能 176
模块习题 179
模块7 Bootstrap 5消息提示与信息反馈设计 180
知识导学 180
7.1 创建与使用Bootstrap 5消息提示框 180
7.1.1 设置与使用消息提示框 180
7.1.2 在消息提示框中添加链接 182
7.1.3 关闭消息提示框 183
7.1.4 实现消息提示框动画 185
7.2 创建与使用Bootstrap 5模态框 186
7.2.1 创建模态框 186
7.2.2 在模态框中添加动画效果 187
7.2.3 设置模态框尺寸 188
7.2.4 实现模态框居中显示 191
7.2.5 在模态框中设置滚动条 192
7.3 创建与使用Bootstrap 5工具提示 194
7.3.1 创建与使用工具提示 194
7.3.2 设置工具提示的方向 195
7.4 创建与使用Bootstrap 5弹出框 196
7.4.1 创建弹出框 196
7.4.2 设置弹出框的位置 197
7.4.3 关闭弹出框 198
7.5 创建与使用Bootstrap 5弹窗 199
7.5.1 创建弹窗 199
7.5.2 显示多个弹窗 201
模拟训练 203
【模拟实例7-1】创建显示在页面右下角的弹窗 203
【模块实例7-2】通过单击按钮显示弹窗 203
模块习题 204
模块8 Bootstrap 5网页特效设计 205
知识导学 205
8.1 创建与使用Bootstrap 5卡片 205
8.1.1 创建与使用简单的卡片 206
8.1.2 创建与使用带有头部和底部的卡片 206
8.1.3 创建与使用多种颜色的卡片 206
8.1.4 设置与使用标题样式、文本样式和链接样式 208
8.1.5 创建与使用图像卡片 209
8.1.6 实现卡片图像叠加效果 210
8.2 实现Bootstrap 5折叠效果 211
8.3 实现Bootstrap 5轮播效果 213
模拟训练 215
【模拟实例8-1】通过扩展卡片组件实现简单的手风琴功能 215
【模拟实例8-2】创建一个简单的带有指示器和控件的图片轮播 216
模块习题 216
模块9 Bootstrap 5响应式网页设计任务实战 217
知识导学 217
9.1 Bootstrap 5响应式网页设计的关键步骤 217
9.2 Bootstrap 5响应式网页设计的关键事项 219
9.3 Bootstrap 5响应式网页设计时应用的关键技术 220
9.4 响应式网页设计的主要优点和缺点 221
任务实战 222
【任务9-1】设计Bootstrap 5用户登录页面 222
【任务9-2】设计Bootstrap 5产品推介网页 223
【任务9-3】设计Bootstrap 5网站首页 227
模块习题 229
附录
书单推荐
