模块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　<h1>～<h6>标题样式设置　24
2.1.3　.display标题类样式设置　25
2.1.4　<small>样式设置　26
2.1.5　<mark>样式设置　27
2.1.6　<abbr>样式设置　27
2.1.7　<blockquote>样式设置　27
2.1.8　<code>样式设置　28
2.1.9　<kbd>样式设置　28
2.1.10　<pre>样式设置　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
附录