第1章 响应式网页设计基础　1
1.1　什么是响应式网页　1
1.1.1　响应式网页设计的产生　1
1.1.2　响应式和“自适应网页”　2
1.1.3　响应式网页的特点　2
1.2　媒体查询及应用　3
1.2.1　媒体查询简介　3
1.2.2　媒体查询的基本形式　3
1.2.3　常用媒体特性　5
1.2.4　动手练习：制作响应式网页示例　6
1.3　响应式网页呈现　7
1.3.1　屏幕可视区域viewport　7
1.3.2　相对大小与绝对大小　9
1.3.3　响应式图像适配　10
1.4　本章实训：创建一个响应式网页　14
1.4.1　使用HTML 5标签建立页面基本结构　14
1.4.2　布局与定位　14
1.4.3　网页内容呈现　14
习题　16
第2章　JavaScript基础　18
2.1　初识JavaScript　18
2.1.1　JavaScript的组成　18
2.1.2　JavaScript在网页中的引用方式　19
2.1.3　常用的输入/输出语句　21
2.2　JavaScript编程基础　23
2.2.1　变量与数据类型　23
2.2.2　运算符　25
2.2.3　程序的流程控制语句　27
2.2.4　函数的使用　30
2.2.5　常用JavaScript内置对象　30
2.3　JavaScript事件处理　38
2.3.1　事件与事件处理程序　38
2.3.2　常用事件　40
2.4　JavaScript的BOM与DOM　40
2.4.1　BOM对象及其子对象　40
2.4.2　DOM对象模型　43
2.4.3　HTML文档的节点　44
2.4.4　操作DOM节点对象　45
2.5　本章实训：JavaScript在线上网页的应用实例　50
2.5.1　网页换肤　50
2.5.2　在线搜索　52
2.5.3　百度一下　54
习题　55
第3章　jQuery基础　58
3.1　初识jQuery　58
3.1.1　jQuery简介　58
3.1.2　jQuery在网页中的引用方式　58
3.1.3　jQuery初体验　59
3.2　jQuery选择器　62
3.2.1　基本选择器　62
3.2.2　层级选择器　63
3.2.3　过滤选择器　65
3.2.4　筛选选择器　76
3.3　jQuery控制属性与类　77
3.3.1　控制属性attr　77
3.3.2　控制CSS类　78
3.4　事件处理与应用举例　81
3.4.1　jQuery常用事件　81
3.4.2　jQuery的动画效果与应用　88
3.5　操作DOM对象　95
3.5.1　jQuery操作DOM属性　95
3.5.2　jQuery操作DOM节点　95
3.6　本章实训：jQuery网页应用实例　97
3.6.1　jQuery线上网页应用之导航菜单　97
3.6.2　jQuery线上网页应用之图片展示　100
3.6.3　jQuery插件应用举例　104
3.6.4　jQuery操作DOM应用举例　108
习题　109
第4章　Bootstrap基础　112
4.1　Bootstrap入门　112
4.1.1　Bootstrap简介　112
4.1.2　如何使用Bootstrap　113
4.1.3　在Dreamweaver CC中创建Bootstrap页面　114
4.2　Bootstrap基本样式设计　114
4.2.1　网格系统　114
4.2.2　图片样式　115
4.2.3　排版样式与辅助类　115
4.2.4　表格样式　123
4.2.5　徽章　126
4.2.6　字体图标　126
4.3　本章实训：Bootstrap基本样式设置　127
习题　128
第5章　响应式布局　130
5.1　响应式网页布局概述　130
5.1.1　固定布局　130
5.1.2　流式布局　131
5.1.3　弹性布局　131
5.1.4　混合布局　131
5.2　网格布局　132
5.2.1　网格布局的概念　132
5.2.2　CSS中的Flex与Grid　133
5.3　使用Bootstrap实现网格布局　136
5.3.1　Bootstrap网格布局概述　136
5.3.2　Bootstrap响应式网格布局　139
5.3.3　列偏移与列排序　141
5.3.4　列嵌套　143
5.4　本章实训：基于Bootstrap的响应式布局实现　144
5.4.1　建立页面基本结构　144
5.4.2　响应式布局的实现　145
习题　146
第6章　Bootstrap组件设计　147
6.1　Bootstrap表单设计　147
6.1.1　基础表单　147
6.1.2　表单输入（input）　150
6.1.3　表单控件设置　150
6.1.4　表单验证状态　152
6.1.5　按钮组　152
6.1.6　输入框组　155
6.2　Bootstrap下拉菜单　156
6.2.1　下拉菜单示例　156
6.2.2　下拉菜单实现方法　158
6.3　Bootstrap导航及分页　159
6.3.1　Bootstrap导航基本样式　159
6.3.2　标签页式导航　160
6.3.3　胶囊式导航　161
6.3.4　面包屑导航　163
6.3.5　导航栏及其组件　163
6.3.6　分页设计　166
6.3.7　滚动监听　168
6.3.8　附加导航（Affix）　168
6.4　Bootstrap消息提示　170
6.4.1　工具提示（tooltip）　170
6.4.2　警告框组件（alert）　172
6.4.3　弹出框（popover）　173
6.5　Bootstrap内置组件　174
6.5.1　轮播图　175
6.5.2　缩略图　177
6.5.3　巨幕效果　177
6.5.4　进度条　178
6.5.5　模态框（modal）　179
6.5.6　well和面板（panel）　181
6.5.7　折叠组件　183
6.5.8　在Adobe Dreamweaver CC中插入Bootstrap组件　185
6.6　本章实训：使用Bootstrap实现简单的响应式网页　186
6.6.1　搭建Bootstrap环境　186
6.6.2　响应式导航条实现　187
6.6.3　响应式轮播图　187
6.6.4　页面内容　188
6.6.5　页面底部　189
6.6.6　页面样式及脚本代码　190
习题　193
第7章　Bootstrap页面效果设计
实例　196
7.1　登录表单优化实例　196
7.1.1　网页主体内容　196
7.1.2　样式设置　197
7.2　标签式导航优化效果实例　199
7.2.1　网页主体内容　200
7.2.2　样式设置　200
7.3　“手风琴式”折叠菜单效果　202
7.3.1　网页主体内容　202
7.3.2　样式设置　204
习题　205
第8章　Bootstrap响应式网页开发综合实例　206
8.1　搭建Bootstrap基本框架　207
8.2　设计导航栏　211
8.3　设计轮播图　213
8.4　设计内容布局　215
8.4.1　网格布局系统　215
8.4.2　标签页布局　217
8.4.3　底部的设计　220
习题　220