本书以响应式网页开发为线索，从布局、样式到交互设计，围绕整个网页开发技术体系展开，让读者在实践中掌握最新、最流行的响应式前端开发技术。本书先介绍响应式网页设计的概念，再引入交互设计基础JavaScript和jQuery，然后介绍最流行的响应式网页开发框架Bootstrap，通过Bootstrap的学习深入体会响应式开发的思想，达到知识的融会贯通。

1、响应式网页开发的基础教材，从响应式的概念到Bootstrap等开源框架及核心技术； 2、相比其他教材更强调基于jQuery的交互设计，因为Bootstrap的网页交互实现是基于jQuery的，因此具备一定的JavaScript特别是jQuery基础能使响应式网页交互的实现更高效； 3、配套微课视频，提供丰富的配套资源，包含录屏、案例、测试题等。

郑婷婷，广东理工职业学院/广东开放大学优秀青年讲师，软件技术专业骨干教师，ISTQB认证测试工程师，曾参与多个软件项目的开发及测试，主要研究方向为软件测试、软件平台技术等，曾主讲软件技术、软件测试技术专业多门主干课程，包括软件测试基础、应用系统测试、网页制作与网站开发等。目前主要参与移动平台的安全与测试相关课题的研究。

第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