第1章　Bootstrap概述　1
1.1　Bootstrap简述　2
1.2　为何使用Bootstrap　3
1.3　如何使用Bootstrap　3
1.4　下载Bootstrap　4
1.5　简单模板　7
1.6　案例：Bootstrap实例　8
本章小结　10
实训项目：熟悉Bootstrap　10
实训拓展　10
第2章　栅格系统　11
2.1　实现原理　11
2.2　工作原理　12
2.3　使用方法　13
2.3.1　基本用法　13
2.3.2　混合与匹配　16
2.3.3　等宽列　17
2.3.4　可变宽度内容　19
2.3.5　列嵌套　20
2.3.6　列排序　20
2.3.7　列偏移　21
2.3.8　行列类　23
2.4　结合其他工具类使用　25
2.4.1　排列　25
2.4.2　槽宽类　27
2.4.3　居左/居右　29
2.5　案例：W3school首页　30
本章小结　36
实训项目：制作银行网站首页　36
实训拓展　37
第3章　CSS布局　38
3.1　排版　38
3.1.1　标题　39
3.1.2　段落　42
3.1.3　内联文本标签　43
3.1.4　水平线和垂直线　44
3.1.5　代码　45
3.1.6　缩略语　46
3.1.7　地址　46
3.1.8　引用　47
3.2　颜色类　48
3.2.1　文本颜色类、文本透明类　48
3.2.2　背景颜色类、背景透明类　51
3.2.3　文本背景类　54
3.3　文本类　54
3.3.1　文本排列　54
3.3.2　文本字母大小写变换　55
3.3.3　字体样式　55
3.3.4　行高　56
3.3.5　其他类　57
3.4　列表　58
3.4.1　无序列表和有序列表　59
3.4.2　无样式列表　59
3.4.3　内联列表　60
3.4.4　描述列表　61
3.5　超链接　62
3.5.1　链接颜色类　62
3.5.2　下画线类　63
3.6　按钮　64
3.6.1　预定义按钮　64
3.6.2　按钮标签　65
3.6.3　按钮边框　65
3.6.4　按钮尺寸　66
3.6.5　块级按钮　66
3.6.6　按钮状态　68
3.7　表格　68
3.7.1　表格样式　68
3.7.2　响应式表格　70
3.7.3　表格主题色　72
3.7.4　其他类　73
3.7.5　个性化表格　75
3.8　图像　76
3.8.1　响应式图像　76
3.8.2　图像边框　76
3.8.3　图像对齐　77
3.8.4　picture元素　77
3.9　图文框　78
3.10　案例：少儿编程网站首页　79
本章小结　84
实训项目：制作“动物世界”百度词条网页　85
实训拓展　85
第4章　工具类　86
4.1　透明度　86
4.2　边框　88
4.2.1　基本边框　88
4.2.2　边框颜色　89
4.2.3　边框宽度　90
4.2.4　边框圆角　91
4.3　边距　93
4.3.1　基本边距类　93
4.3.2　负外边距类　94
4.3.3　gap类　94
4.4　尺寸　96
4.4.1　宽度　96
4.4.2　高度　96
4.4.3　最大宽度或高度　97
4.5　浮动　97
4.5.1　浮动属性　97
4.5.2　清除浮动　99
4.6　定义display　99
4.7　定位　102
4.7.1　边缘定位类　102
4.7.2　position类　103
4.7.3　顶部和底部定位　105
4.8　flex布局　105
4.8.1　display属性　106
4.8.2　flex-flow属性　106
4.8.3　justify-content属性　109
4.8.4　align-items属性　110
4.8.5　align-self属性　112
4.8.6　order属性　113
4.8.7　flex-grow属性和flex-shrink属性　114
4.8.8　.flex-fill类　114
4.8.9　自动外边距　115
4.9　阴影　116
4.10　垂直对齐　117
4.11　视觉隐藏　118
4.12　可见性　119
4.13　交互　119
4.14　溢出　120
4.15　比例助手　121
4.16　延伸链接　121
4.17　焦点环　122
4.18　案例：“学习电台”页面　123
本章小结　127
实训项目：制作个人简历网页（一）　128
实训拓展　128
第5章　表单　129
5.1　表单布局　129
5.1.1　垂直表单　130
5.1.2　水平表单　131
5.1.3　内联表单　132
5.2　表单控件　133
5.2.1　输入框　133
5.2.2　下拉框　135
5.2.3　文本域　136
5.2.4　单选按钮和复选框　137
5.3　表单禁用　140
5.4　表单控件和标签的大小　142
5.5　浮动标签　143
5.6　表单验证　144
5.7　输入框组　146
5.8　案例：创建“注册新账号”页面　149
本章小结　151
实训项目：制作含表单的页面　152
实训拓展　152
第6章　CSS组件　153
6.1　下拉菜单　154
6.1.1　下拉菜单的基本用法　154
6.1.2　分裂式按钮下拉菜单　156
6.1.3　菜单内容　157
6.1.4　对齐方式　159
6.1.5　选中和禁用菜单项　159
6.1.6　深色菜单项　160
6.2　导航　160
6.2.1　导航基础样式　160
6.2.2　选项卡导航　161
6.2.3　Pills导航　162
6.2.4　垂直导航　162
6.2.5　导航对齐方式　163
6.2.6　导航二级菜单　164
6.2.7　面包屑导航　166
6.3　导航条　167
6.3.1　导航条的基本用法　167
6.3.2　品牌图标　168
6.3.3　导航条上的链接　169
6.3.4　导航条上的表单　170
6.3.5　导航条上的文本　171
6.3.6　固定导航条　171
6.3.7　导航条配色方案　173
6.3.8　响应式导航条　174
6.4　徽章　177
6.5　分页导航　178
6.6　列表组　180
6.6.1　基础列表组　180
6.6.2　带徽章的列表组　181
6.6.3　链接列表组　182
6.6.4　状态设置　183
6.6.5　列表组主题　184
6.6.6　其他元素的支持　184
6.7　进度条　185
6.7.1　基础进度条　185
6.7.2　进度条的颜色　186
6.7.3　条纹进度条　186
6.7.4　进度条堆叠效果　187
6.8　卡片　187
6.8.1　基本卡片　187
6.8.2　卡片的内容设计　188
6.8.3　卡片的页眉和脚注　190
6.8.4　卡片样式　191
6.8.5　水平卡片　192
6.8.6　卡片组　193
6.8.7　卡片布局　194
6.9　旋转图标　194
6.10　图标　195
6.10.1　图标的安装　196
6.10.2　什么是SVG　196
6.10.3　图标的使用　197
6.11　按钮组　198
6.11.1　基本按钮组　198
6.11.2　按钮工具栏　199
6.11.3　按钮组尺寸　200
6.11.4　按钮组嵌套　201
6.11.5　垂直的按钮组　202
6.11.6　单选按钮组和复选框组　202
6.12　关闭按钮　203
6.13　媒体对象（flex）　204
6.14　案例：保护野生动物公益网站首页　205
本章小结　211
实训项目：制作个人简历网页（二）　211
实训拓展　211
第7章　JavaScript插件　212
7.1　插件库说明　212
7.2　模态框　214
7.2.1　模态框的基本用法　214
7.2.2　模态框尺寸　216
7.2.3　模态框的其他样式　217
7.2.4　模态框的选项　218
7.2.5　模态框的JavaScript触发　219
7.2.6　模态框的方法　220
7.2.7　模态框的事件　221
7.3　工具提示框　223
7.3.1　工具提示框的基本用法　223
7.3.2　工具提示框的选项　224
7.3.3　工具提示框的方法和事件　226
7.4　弹出框　227
7.4.1　弹出框的基本用法　227
7.4.2　弹出框的选项　228
7.4.3　弹出框的方法和事件　230
7.5　警告框　231
7.5.1　警告框的基本用法　231
7.5.2　警告框的JavaScript触发　233
7.5.3　警告框的方法和事件　235
7.6　轻量弹框　237
7.6.1　轻量弹框的基本用法　237
7.6.2　轻量弹框的定位　237
7.6.3　轻量弹框的JavaScript触发　238
7.6.4　轻量弹框的选项　239
7.6.5　轻量弹框的方法和事件　240
7.7　下拉菜单　240
7.7.1　下拉菜单的基本用法　240
7.7.2　下拉菜单的JavaScript触发　241
7.7.3　下拉菜单的选项　241
7.7.4　下拉菜单的方法和事件　241
7.8　折叠　242
7.8.1　折叠的基本用法　243
7.8.2　折叠的JavaScript触发　244
7.8.3　折叠的选项　244
7.8.4　折叠的方法和事件　246
7.9　手风琴　247
7.9.1　手风琴的基本用法　247
7.9.2　个性化手风琴　249
7.10　Offcanvas　250
7.10.1　Offcanvas的基本用法　251
7.10.2　Offcanvas的JavaScript触发　253
7.10.3　Offcanvas的选项　253
7.10.4　Offcanvas的方法和事件　254
7.11　轮播　255
7.11.1　轮播的基本用法　255
7.11.2　个性化轮播　257
7.11.3　轮播的JavaScript触发　258
7.11.4　轮播的选项　258
7.11.5　轮播的方法和事件　259
7.12　滚动监听　260
7.12.1　滚动监听的基本用法　261
7.12.2　滚动监听的JavaScript触发　263
7.12.3　滚动监听的选项　264
7.12.4　滚动监听的方法和事件　264
7.13　选项卡　265
7.13.1　选项卡的基本用法　265
7.13.2　选项卡的JavaScript触发　267
7.13.3　选项卡的过渡效果　267
7.13.4　选项卡的方法和事件　268
7.14　按钮　269
7.15　案例：学院网站首页　269
本章小结　277
实训项目：制作公司网站首页　278
实训拓展　279
第8章　综合案例　280
8.1　网站概述　280
8.2　开始页面　282
8.3　主要内容的制作　282
8.3.1　制作第1屏　282
8.3.2　制作第2屏　284
8.3.3　制作第3屏　285
8.3.4　制作第4屏　290
8.4　完善网站功能　290
8.4.1　添加地图　291
8.4.2　添加导航条　292
8.4.3　设置页脚　294
8.4.4　设置滚动监听　294
本章小结　294
实训项目：制作一个商业网站　295
实训拓展　295
附录A　定制Bootstrap　296
A.1　个性化页面　296
A.2　Sass概述　298
A.3　Sass插件安装　299
A.4　Sass的基本语法　300
A.4.1　变量　300
A.4.2　嵌套规则　300
A.4.3　混合（mixins）　302
A.4.4　运算及函数　302
A.4.5　导入文件　303
A.5　定制Bootstrap的前期准备　304
A.5.1　下载Bootstrap源码文件　304
A.5.2　定制方式　305
A.5.3　配置Scss编译环境　305
A.5.4　初始项目　306
A.6　定制Bootstrap的过程　308
A.6.1　变量默认值　308
A.6.2　maps和loops　308
A.6.3　utilities API　309
A.6.4　添加自定义组件　311
附录B　CSS选择器　313
参考文献　316