第 1 章 Bootstrap 概述............................. 1
1.1 Bootstrap 简述................................. 1
1.2 为何使用 Bootstrap ......................... 2
1.3 如何使用 Bootstrap ......................... 2
1.4 下载 Bootstrap ................................ 3
1.5 简单模板............................................ 5
1.6 案例：一个 Bootstrap 实例 .............. 7
本章小结..................................................... 9
实训项目..................................................... 9
第 2 章 栅格系统............................................ 10
2.1 实现原理.......................................... 10
2.2 工作原理.......................................... 10
2.3 使用方法 ......................................... 12
2.3.1 基本用法................................ 12
2.3.2 混合与匹配............................ 15
2.3.3 等宽列 .................................. 17
2.3.4 可变宽度内容......................... 19
2.3.5 列偏移 .................................. 20
2.3.6 列排序 .................................. 21
2.3.7 列嵌套 .................................. 22
2.4 结合其他工具类使用 ........................ 23
2.4.1 排列 ...................................... 23
2.4.2 无边距类 ............................... 25
2.4.3 居左/居右 .............................. 26
2.5 案例：W3school 首页.................... 27
本章小结................................................... 33
实训项目：制作银行网站首页....................33
第 3 章 CSS 布局..........................................35
3.1 排版 .................................................35
3.1.1 标题.......................................36
3.1.2 段落 ......................................38
3.1.3 内联文本标签 .........................40
3.1.4 文本类 ................................... 41
3.1.5 缩略语 ...................................45
3.1.6 地址 ......................................45
3.1.7 引用 ......................................46
3.2 列表.................................................48
3.2.1 无序列表和有序列表 ...............48
3.2.2 无样式列表 ............................49
3.2.3 内联列表 ...............................49
3.2.4 描述列表 ...............................50
3.3 代码................................................. 51
3.4 表格.................................................52
3.4.1 基本表格................................53
3.4.2 斑马线表格 ............................54
3.4.3 表格的边框 ............................54
3.4.4 鼠标悬停高亮行......................55
3.4.5 紧凑型表格 ............................56
3.4.6 响应式表格 ............................57
3.4.7 颜色反转表格.........................58
3.4.8 表头类...................................59
3.4.9 状态类...................................60
3.5 按钮................................................. 61
3.5.1 预定义按钮............................. 61
3.5.2 按钮标签 ............................... 62
3.5.3 按钮边框 ............................... 63
3.5.4 按钮尺寸 ............................... 63
3.5.5 块级按钮 ............................... 64
3.5.6 按钮激活状态......................... 64
3.5.7 按钮禁用状态......................... 65
3.6 图像 ................................................ 65
3.6.1 响应式图像 ............................ 65
3.6.2 图像样式 ............................... 65
3.6.3 图像对齐 ............................... 66
3.6.4 picture 元素.......................... 67
3.7 图文框............................................. 68
3.8 案例：少儿编程网站首页 ................. 69
本章小结................................................... 74
实训项目：“动物世界”百度词条网页 ....... 74
第 4 章 工具类................................................. 76
4.1 颜色................................................. 76
4.2 边框 ................................................ 77
4.2.1 基本边框 ............................... 77
4.2.2 边框的颜色............................ 79
4.2.3 边框的圆角............................ 79
4.3 关闭按钮 ......................................... 81
4.4 浮动 ................................................ 81
4.4.1 浮动 ...................................... 81
4.4.2 清除浮动 ............................... 83
4.5 边距 ................................................ 84
4.6 尺寸 ................................................ 85
4.6.1 宽度 ...................................... 85
4.6.2 高度...................................... 86
4.6.3 最大宽度高度......................... 87
4.7 定义 display ................................... 87
4.8 flex 布局 .........................................90
4.8.1 display 属性 .......................... 91
4.8.2 flex-flow 属性 ....................... 91
4.8.3 justify-content 属性 .............95
4.8.4 align-items 属性...................97
4.8.5 align-self 属性......................98
4.8.6 order 属性........................... 101
4.8.7 flex-grow 和 flex-shrink属性.................................... 101
4.8.8 .flex-fill 类 .......................... 102
4.8.9 自动外边距 .......................... 103
4.9 嵌入............................................... 104
4.10 定位............................................. 105
4.11 阴影 ............................................. 107
4.12 垂直对齐 ...................................... 107
4.13 可见性 ......................................... 108
4.14 溢出............................................. 109
4.15 图像替换 ...................................... 109
4.16 屏幕阅读器................................... 110
4.17 案例：学习电台页面...................... 111
本章小结................................................. 115
实训项目：个人简历网页......................... 115
第 5 章 表单..................................................... 117
5.1 基础表单 ........................................ 117
5.1.1 垂直表单............................... 117
5.1.2 内联表单 .............................. 118
5.1.3 水平表单 .............................. 119
5.2 表单控件........................................ 121
5.2.1 输入框.................................. 121
5.2.2 下拉框 ................................. 122
5.2.3 文本域 ................................. 123
5.2.4 单选按钮和复选框 ................ 124
5.3 表单焦点 ....................................... 126
5.4 表单禁用 ....................................... 127
5.5 元素大小 ....................................... 129
5.5.1 高度..................................... 129
5.5.2 宽度 .................................... 130
5.6 自定义表单..................................... 131
5.7 表单验证 ....................................... 133
5.8 输入框组 ....................................... 135
5.9 案例：创建“注册新账号”页面..... 137
本章小结.................................................. 141
实训项目：表单部分 ................................141
第 6 章 CSS 组件....................................... 142
6.1 下拉菜单........................................ 142
6.1.1 基本用法 .............................. 142
6.1.2 分割线 ................................. 144
6.1.3 菜单标题.............................. 144
6.1.4 对齐方式.............................. 145
6.1.5 禁用菜单项........................... 146
6.2 导航 .............................................. 147
6.2.1 导航基础样式 ....................... 147
6.2.2 选项卡导航 .......................... 148
6.2.3 Pills 导航............................. 148
6.2.4 垂直导航 ............................. 149
6.2.5 导航禁用状态 ....................... 149
6.2.6 导航对齐方式 ....................... 150
6.2.7 导航二级菜单 ........................ 151
6.2.8 面包屑导航 .......................... 153
6.3 导航条........................................... 153
6.3.1 导航条的基本用法 ................ 153
6.3.2 品牌图标 ............................. 154
6.3.3 导航条上的链接.................... 155
6.3.4 导航条上的表单.................... 155
6.3.5 导航条上的文本.................... 156
6.3.6 导航条中的二级菜单 ............. 157
6.3.7 固定导航条 .......................... 158
6.3.8 导航条配色方案.................... 158
6.4 分页导航........................................ 159
6.5 徽章............................................... 161
6.6 卡片............................................... 162
6.6.1 基本卡片.............................. 162
6.6.2 卡片的内容设计.................... 163
6.6.3 卡片的页眉和脚注 ................ 165
6.6.4 卡片样式 ............................. 165
6.6.5 水平卡片.............................. 167
6.6.6 卡片组................................. 167
6.6.7 卡片布局.............................. 168
6.7 进度条 ........................................... 170
6.7.1 基础进度条........................... 170
6.7.2 进度条的颜色 ....................... 170
6.7.3 条纹进度条 .......................... 171
6.7.4 进度条堆叠效果.................... 172
6.8 列表组 ........................................... 172
6.8.1 基础列表组........................... 172
6.8.2 带徽章的列表组.................... 173
6.8.3 链接列表组 .......................... 174
6.8.4 状态设置 ............................. 174
6.8.5 列表组主题 .......................... 176
6.8.6 其他元素的支持.................... 176
6.9 媒体对象........................................ 177
6.9.1 基本构成.............................. 178
6.9.2 对齐方式 ............................. 178
6.9.3 嵌套对象 ............................. 179
6.9.4 媒体列表组 .......................... 181
6.10 巨幕............................................. 182
6.11 旋转图标 ...................................... 182
6.12 图标............................................. 184
6.12.1 图标的安装......................... 184
6.12.2 什么是 SVG ...................... 185
6.12.3 图标的使用 ........................ 185
6.13 按钮组 ......................................... 187
6.13.1 基本按钮组......................... 187
6.13.2 按钮工具栏 ........................ 188
6.13.3 尺寸 .................................. 189
6.13.4 嵌套 .................................. 190
6.13.5 垂直的按钮组 ......................191
6.13.6 分裂式按钮下拉菜单 ........... 192
6.14 案例：保护野生动物网站页面 ...... 192
本章小结................................................. 198
实训项目：制作一个个人简历网页页面 ... 198
第 7 章
JavaScript 插件 ...................... 200
7.1 插件库说明 .................................... 200
7.2 模态框........................................... 201
7.2.1 基本结构.............................. 201
7.2.2 模态框的特点....................... 202
7.2.3 过渡效果 ............................. 204
7.2.4 data-*属性......................... 204
7.2.5 JavaScript 触发.................. 206
7.2.6 事件.................................... 208
7.3 下拉菜单 ....................................... 210
7.3.1 声明式触发 .......................... 210
7.3.2 JavaScript 触发.................. 210
7.3.3 事件.....................................211
7.4 滚动监听 ....................................... 213
7.4.1 组件说明.............................. 213
7.4.2 声明式触发 .......................... 213
7.4.3 JavaScript 触发 .................. 216
7.5 工具提示框 .................................... 217
7.5.1 基本结构 .............................. 217
7.5.2 JavaScript 触发 .................. 217
7.5.3 data-*属性 ......................... 218
7.5.4 事件 .................................... 219
7.6 弹出框 ........................................... 221
7.6.1 基本结构 .............................. 221
7.6.2 JavaScript 触发 .................. 221
7.6.3 data-*属性 .........................223
7.6.4 事件 ....................................224
7.7 警告框 ...........................................225
7.7.1 基本结构 ..............................225
7.7.2 声明式触发 ..........................226
7.7.3 JavaScript 触发 ..................227
7.7.4 事件 ....................................228
7.8 轮播...............................................229
7.8.1 基本结构..............................229
7.8.2 声明式触发 .......................... 231
7.8.3 JavaScript 触发 .................. 231
7.8.4 事件 ....................................232
7.9 按钮...............................................232
7.9.1 状态切换..............................232
7.9.2 单选按钮 .............................233
7.9.3 复选框.................................233
7.9.4 方法 ....................................233
7.10 折叠.............................................234
7.10.1 声明式触发 .........................234
7.10.2 JavaScript 触发 ................237
7.10.3 事件 ..................................237
7.11 选项卡..........................................238
7.11.1 声明式触发 .........................238
7.11.2 JavaScript 触发................. 239
7.11.3 过渡效果 ............................ 240
7.11.4 事件 .................................. 240
7.12 轻量弹框...................................... 241
7.12.1 基本结构 ............................ 241
7.12.2 轻量弹框的特点.................. 242
7.12.3 JavaScript 触发 ................ 242
7.12.4 事件 .................................. 244
7.13 案例：学院网站首页 .................... 244
本章小结................................................. 251
实训项目：公司网站首页 ........................ 251
第 8 章
综合案例.......................................... 253
8.1 网站概述........................................ 253
8.2 开始页面 ....................................... 255
8.3 主要内容的制作 ............................. 256
8.3.1 制作第 1 屏 .......................... 256
8.3.2 制作第 2 屏 ......................... 257
8.3.3 制作第 3 屏 ......................... 259
8.3.4 制作第 4 屏..........................264
8.4 完善网站功能.................................265
8.4.1 添加地图..............................265
8.4.2 添加导航条 ..........................267
8.4.3 设置页脚 .............................268
8.4.4 设置滚动监听.......................269
8.4.5 平滑滚动 .............................269
本章小结.................................................270
实训项目：一个商业网站.........................270
附录 A
Sass ................................................. 271
A.1 Sass 概述..................................... 271
A.2 Sass 插件安装..............................272
A.3 Sass 的基本语法 ..........................273
附录 B
CSS 选择器 ..................................278
参考文献 ..........................................280