第1章 Bootstrap是什么 1
1.1 Bootstrap简述 2
1.2 为什么使用Bootstrap 2
1.3 如何使用Bootstrap 3
1.4 下载Bootstrap 3
1.5 简单模板 5
1.6 案例：第一个Bootstrap实例 7
1.7 Bootstrap 4 9
本章小结 9
练习与实训 9
第2章 栅格系统 10
2.1 实现原理 11
2.2 工作原理 11
2.3 使用方法 13
2.3.1 基本用法 13
2.3.2 列偏移 14
2.3.3 列排序 15
2.3.4 列嵌套 17
2.3.5 响应式栅格 18
2.4 案例：招商银行首页 22
本章小结 26
练习与实训 26
第3章 CSS布局 27
3.1 排版 28
3.1.1 标题 28
3.1.2 段落 29
3.1.3 mark标签 30
3.1.4 小号文本 30
3.1.5 del和s标签 30
3.1.6 ins和u标签 30
3.1.7 strong和em标签 31
3.1.8 b和i标签 31
3.1.9 文本对齐方式 31
3.1.10 字母大小写 32
3.1.11 缩略语 32
3.1.12 地址 33
3.1.13 引用 34
3.2 列表 35
3.2.1 无序列表和有序列表 35
3.2.2 无样式列表 35
3.2.3 内联列表 36
3.2.4 描述列表 37
3.3 代码 38
3.4 表格 39
3.4.1 基本表格 39
3.4.2 斑马线表格 40
3.4.3 带边框的表格 41
3.4.4 鼠标悬停高亮行 41
3.4.5 紧凑型表格 42
3.4.6 状态类 43
3.4.7 响应式表格 44
3.5 按钮 45
3.5.1 预定义按钮 45
3.5.2 按钮尺寸 45
3.5.3 块级按钮 46
3.5.4 按钮激活状态 46
3.5.5 按钮禁用状态 46
3.5.6 按钮标签 47
3.6 图像 47
3.6.1 响应式图像 47
3.6.2 图像形状 47
3.7 辅助类 48
3.7.1 情景文本颜色 48
3.7.2 情景文本背景色 48
3.7.3 关闭按钮 49
3.7.4 三角符号 49
3.7.5 快速浮动 50
3.7.6 块级居中显示 50
3.7.7 清除浮动 51
3.7.8 显示或隐藏 51
3.7.9 屏幕阅读器和键盘焦点 52
3.7.10 图像替换 52
3.8 案例：个人简历 52
本章小结 57
练习与实训 57
第4章 表单 58
4.1 基础表单 59
4.1.1 基本实例 59
4.1.2 内联表单 60
4.1.3 水平表单 60
4.2 输入框 62
4.3 下拉框 63
4.4 文本域 64
4.5 复选框和单选按钮 64
4.6 表单焦点 66
4.7 表单禁用 67
4.8 验证样式 69
4.8.1 颜色提示 69
4.8.2 图标提示 70
4.8.3 文字提示 71
4.9 元素大小 72
4.9.1 高度 72
4.9.2 宽度 74
4.10 输入框组 74
4.11 案例：一个表单页面 78
本章小结 80
练习与实训 80
第5章 CSS组件 81
5.1 字体图标 82
5.1.1 可用的字体图标 82
5.1.2 使用字体图标 83
5.1.3 字体图标实例 83
5.1.4 定制字体图标 84
5.2 下拉菜单 84
5.2.1 基本用法 84
5.2.2 对齐 85
5.2.3 标题和分割线 85
5.2.4 菜单状态 86
5.3 按钮组 86
5.3.1 基本按钮组 86
5.3.2 按钮工具栏 87
5.3.3 尺寸 88
5.3.4 嵌套 88
5.3.5 垂直的按钮组 89
5.3.6 两端对齐的按钮组 89
5.4 按钮式弹出菜单 90
5.4.1 单按钮下拉菜单 90
5.4.2 分裂式按钮下拉菜单 90
5.4.3 尺寸 91
5.4.4 向上弹出式菜单 92
5.5 输入框组 92
5.5.1 基本实例 92
5.5.2 尺寸 93
5.5.3 作为额外元素的复选框和单选按钮 93
5.5.4 作为额外元素的按钮 94
5.5.5 作为额外元素的按钮式下拉菜单 94
5.5.6 作为额外元素的分裂式按钮下拉菜单 95
5.5.7 作为额外元素的多个按钮 95
5.6 导航 96
5.6.1 选项卡导航 96
5.6.2 胶囊式导航 96
5.6.3 两端对齐的导航 97
5.6.4 禁用的链接 98
5.6.5 带有下拉菜单的导航 98
5.7 导航栏 99
5.7.1 默认样式的导航栏 99
5.7.2 品牌图标 100
5.7.3 表单 100
5.7.4 按钮 101
5.7.5 文本 101
5.7.6 非导航的链接 101
5.7.7 对齐方式 102
5.7.8 固定在顶部 103
5.7.9 固定在底部 103
5.7.10 静止在顶部 103
5.7.11 反色导航栏 104
5.7.12 响应式导航栏 104
5.8 路径导航 105
5.9 分页 106
5.9.1 基本实例 106
5.9.2 禁用和激活状态 106
5.9.3 尺寸 107
5.10 翻页 108
5.10.1 基本实例 108
5.10.2 对齐链接 108
5.10.3 可选的禁用状态 109
5.11 标签 109
5.11.1 基本实例 109
5.11.2 多样式的标签 110
5.12 徽章 110
5.13 巨幕 111
5.14 页头 112
5.15 缩略图 113
5.15.1 基本实例 113
5.15.2 自定义内容 114
5.16 警告框 115
5.16.1 基本警告框 115
5.16.2 可关闭的警告框 116
5.16.3 警告框中的链接 116
5.17 进度条 117
5.17.1 基本实例 117
5.17.2 根据情景变化的进度条 117
5.17.3 条纹进度条 118
5.17.4 动画进度条 119
5.17.5 堆叠进度条 120
5.18 媒体对象 120
5.18.1 默认样式 121
5.18.2 对齐方式 122
5.18.3 媒体对象列表 123
5.19 列表组 125
5.19.1 基本实例 125
5.19.2 向列表组添加徽章 125
5.19.3 向列表组添加链接 126
5.19.4 向列表组中添加按钮 126
5.19.5 列表项目禁用状态 127
5.19.6 列表项目情景类 127
5.19.7 向列表组添加自定义内容 128
5.20 面板 128
5.20.1 基本实例 128
5.20.2 带标题的面板 128
5.20.3 带脚注的面板 129
5.20.4 情景效果 129
5.20.5 带表格的面板 130
5.20.6 带列表组的面板 131
5.21 Well 132
5.22 案例：制作一个个人简历页面 133
本章小结 138
练习与实训 138
第6章 JavaScript插件 139
6.1 插件库说明 140
6.2 模态框 140
6.2.1 模态框的结构 141
6.2.2 模态框的特点 142
6.2.3 模态框触发方式 144
6.2.4 过渡效果 145
6.2.5 触发参数data-＊ 145
6.2.6 JavaScript触发——参数 146
6.2.7 JavaScript触发——方法 148
6.2.8 JavaScript触发——事件 149
6.3 下拉菜单 151
6.3.1 声明式触发 151
6.3.2 JavaScript触发 152
6.3.3 事件 152
6.4 滚动监听 154
6.4.1 组件说明 154
6.4.2 滚动监听实现步骤 155
6.4.3 声明式触发 156
6.4.4 JavaScript触发 158
6.5 选项卡 160
6.5.1 选项卡的组成 161
6.5.2 声明式触发 161
6.5.3 JavaScript触发 162
6.5.4 过渡效果 163
6.5.5 事件 163
6.6 工具提示 165
6.6.1 结构 165
6.6.2 JavaScript触发 165
6.6.3 Data-＊属性 166
6.6.4 事件 167
6.7 弹出框 168
6.7.1 弹出框结构 168
6.7.2 声明式属性 169
6.7.3 JavaScript触发 169
6.7.4 事件 170
6.8 警告框 172
6.8.1 Alert结构 172
6.8.2 声明式触发 172
6.8.3 JavaScript触发 173
6.8.4 事件 174
6.9 按钮 175
6.9.1 按钮加载状态 175
6.9.2 单选按钮 176
6.9.3 复选框 176
6.9.4 方法 177
6.10 折叠 178
6.10.1 结构 178
6.10.2 声明式触发 180
6.10.3 方法 181
6.10.4 事件 182
6.11 轮播 183
6.11.1 轮播结构 184
6.11.2 声明式触发 186
6.11.3 JavaScript触发 187
6.11.4 事件 187
6.12 Afflix插件 188
6.12.1 声明属性 188
6.12.2 JavaScript方法 189
6.12.3 事件 190
6.13 案例 190
本章小结 200
练习与实训 200
第7章 第三方扩展 201
7.1 字体图标 202
7.1.1 介绍 202
7.1.2 常规用法 203
7.1.3 List列表上的图标 204
7.1.4 导航上的图标 205
7.1.5 固定角度旋转图标 207
7.1.6 动画图标 207
7.1.7 多图叠加 208
7.2 Buttons 210
7.3 DateTimePicker 217
7.4 Flat UI 222
7.5 案例：特性页面 223
本章小结 225
练习与实训 226
第8章 综合案例 227
8.1 网站概述 228
8.2 开始页面 230
8.3 主要内容的制作 230
8.3.1 制作第一屏 230
8.3.2 制作第二屏 232
8.3.3 制作第三屏 234
8.3.4 制作第四屏 239
8.4 完善网站 240
8.4.1 添加地图 240
8.4.2 添加导航条 242
8.4.3 设置页脚 244
8.4.4 设置滚动监听 245
8.4.5 平滑滚动 245
本章小结 246
练习与实训 246
附录A Less和Sass 247
附录B CSS选择器 255
参考文献 258