Bootstrap Web前端开发技术（微课版）

【章名目录】
第 1章 Bootstrap概述
第 2章 Bootstrap 5的基础样式
第3章 Bootstrap 5的工具类
第4章 Bootstrap 5的弹性布局
第5章 Bootstrap 5的栅格布局
第6章 Bootstrap 5的组件（一）
第7章 Bootstrap 5的组件（二）
第8章 Bootstrap 5的表单
第9章 定制与优化Bootstrap 5
第 10章 综合案例1——Web学习网站的设计
第 11章 综合案例2——产品展示网站的设计
【详细目录】
第 1章 Bootstrap概述
1.1 认识Bootstrap 1
1.2 Bootstrap的版本 2
1.3 Bootstrap 5的特点 2
1.4 Bootstrap 5的内容 3
1.5 Bootstrap 5的下载 4
1.6 Bootstrap 5的结构 5
1.6.1 Bootstrap 5编译版文件的目录结构 5
1.6.2 Bootstrap 5源码文件的目录结构 6
1.7 引入Bootstrap 5 6
1.8 开发工具 7
1.8.1 VS Code 7
1.8.2 WebStorm 9
1.9 使用Bootstrap 5创建网页 9
习题 14
第 2章 Bootstrap 5的基础样式
2.1 文字版式 16
2.1.1 样式 16
2.1.2 标题 16
2.1.3 内联文本元素 19
2.1.4 缩略语 19
2.1.5 引用 20
2.1.6 列表 21
2.2 图片 23
2.3 表格 24
2.4 轮廓 28
习题 29
第3章 Bootstrap 5的工具类
3.1 认识工具类 30
3.1.1 工具类的引入 30
3.1.2 工具类的命名 31
3.2 颜色工具类 33
3.2.1 文本颜色和背景颜色 33
3.2.2 链接颜色 34
3.3 边框工具类 35
3.3.1 添加和删除边框 35
3.3.2 圆角边框 36
3.4 边距工具类 37
3.4.1 外边距和内边距 37
3.4.2 响应式边距 38
3.5 宽度和高度工具类 39
3.6 显示和浮动工具类 41
3.6.1 显示工具类 41
3.6.2 浮动工具类 44
3.7 文本工具类 45
3.7.1 文本对齐 45
3.7.2 文本换行 45
3.7.3 文本转换 47
3.7.4 控制文本字号、样式和行高等的工具类 47
3.8 其他工具类 48
3.8.1 弹性盒子工具类 48
3.8.2 位置工具类 49
3.8.3 阴影工具类 49
3.9 工具类的应用 49
习题 52
第4章 Bootstrap 5的弹性布局
4.1 弹性布局的概念 54
4.2 弹性布局容器的样式 55
4.2.1 项目对齐的工具类 56
4.2.2 排列方向的工具类 59
4.2.3 项目换行的工具类 60
4.3 弹性布局项目的样式 62
4.3.1 项目排序的工具类 62
4.3.2 项目伸缩的工具类 62
4.3.3 自身对齐的工具类 65
4.3.4 自动浮动的工具类 66
4.4 弹性布局的应用 67
4.4.1 图文混排的实现 67
4.4.2 响应式页面的实现 69
习题 71
第5章 Bootstrap 5的栅格布局
5.1 栅格布局的基础知识 73
5.1.1 视口和断点 73
5.1.2 栅格布局的原则 74
5.1.3 Bootstrap 5的设备参数 74
5.1.4 栅格布局使用的类 75
5.2 自动布局列 76
5.2.1 等宽列 76
5.2.2 自动宽度列 78
5.3 响应式布局类 79
5.3.1 覆盖所有设备 80
5.3.2 水平排列 80
5.3.3 匹配多种类型的设备 81
5.4 嵌套 82
5.5 列布局 83
5.5.1 列排序 83
5.5.2 列偏移 84
5.6 栅格布局的应用 86
习题 90
第6章 Bootstrap 5的组件（一）
6.1 按钮和按钮组 92
6.1.1 按钮 92
6.1.2 按钮组 94
6.2 导航 96
6.2.1 创建导航 96
6.2.2 两种不同样式的导航 97
6.2.3 标签页 97
6.3 导航条 99
6.3.1 创建基本样式导航条 99
6.3.2 创建响应式导航条 100
6.3.3 在导航条中添加表单和下拉菜单 101
6.4 徽章 103
6.5 列表组和分页 103
6.5.1 列表组 103
6.5.2 分页 106
6.6 进度条 107
6.7 卡片 108
6.7.1 创建卡片 108
6.7.2 卡片的组成元素 109
6.7.3 用卡片实现的缩略图 112
6.8 组件的应用——网站后台管理系统 113
6.8.1 页面结构的描述 113
6.8.2 导航部分的设计 115
6.8.3 主体部分的设计 116
习题 119
第7章 Bootstrap 5的组件（二）
7.1 模态对话框 121
7.2 下拉菜单 123
7.3 提示组件 126
7.3.1 工具提示框 126
7.3.2 弹出提示框 127
7.3.3 警告框 128
7.4 折叠组件和手风琴组件 129
7.4.1 折叠组件 129
7.4.2 手风琴组件 131
7.5 轮播组件 133
7.5.1 创建轮播组件 133
7.5.2 轮播组件的结构 134
7.6 滚动监听组件 135
7.6.1 监听导航 135
7.6.2 监听导航条 136
7.7 组件的应用——轮播广告 138
7.7.1 页面结构的描述 138
7.7.2 导航部分的设计 139
7.7.3 轮播广告部分的设计 140
7.7.4 CSS代码 142
习题 143
第8章 Bootstrap 5的表单
8.1 表单控件 145
8.1.1 输入框 145
8.1.2 单选按钮和复选框 147
8.1.3 下拉列表 150
8.1.4 滑动条 151
8.1.5 输入框组 151
8.2 表单布局 152
8.2.1 内联表单 152
8.2.2 水平表单 154
8.2.3 复杂表单 156
8.3 表单的校验 158
8.4 表单的应用——响应式表单 160
8.4.1 页面结构的描述 160
8.4.2 导航部分的设计 161
8.4.3 表单部分的设计 162
8.4.4 CSS代码 163
习题 165
第9章 定制与优化Bootstrap 5
9.1 CSS预处理程序 166
9.1.1 CSS预处理程序的概念 166
9.1.2 引入CSS预处理程序的原因 166
9.2 Sass的安装与使用 168
9.2.1 安装Ruby 168
9.2.2 安装Sass和Sass命令 169
9.3 Sass的基本应用 170
9.3.1 使用变量 170
9.3.2 计算功能 171
9.3.3 选择器嵌套 171
9.3.4 注释 172
9.3.5 代码重用 173
9.3.6 控制语句 176
9.4 Sass的扩展库Compass 179
9.4.1 Compass的安装 179
9.4.2 Compass的内置模块 179
9.4.3 Compass的Helpers函数 183
9.5 Sass的应用——修改Bootstrap 5源码 184
习题 186
第 10章 综合案例1——Web学习网站的设计
10.1 页面分析 187
10.1.1 页面结构设计 187
10.1.2 引入Web框架 189
10.1.3 案例中的Bootstrap 5元素 190
10.2 页头部分的设计 190
10.2.1 顶部导航条 191
10.2.2 banner栏目 193
10.2.3 搜索栏目 194
10.3 课程和大纲等模块的设计 195
10.4 学习路径、教学团队和问答等模块的设计 198
10.4.1 学习路径模块 198
10.4.2 教学团队模块 199
10.4.3 问答模块 202
10.5 页脚部分的设计 203
习题 206
第 11章 综合案例2——产品展示网站的设计
11.1 页面分析 208
11.1.1 页面结构设计 208
11.1.2 引入Web框架 210
11.1.3 案例中的全局样式 211
11.2 页头部分的设计 211
11.3 轮播模块的设计 213
11.4 热点机型和智能电视模块的设计 216
11.4.1 热点机型模块的设计 216
11.4.2 智能电视模块的设计 219
11.5 特色产品模块的设计 220
11.6 附件和页脚的设计 224
习题 226
参考文献