响应式网页开发基础教程(JQUERY+BOOTSTRAP)/郑婷婷

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

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

郑婷婷，广东理工职业学院/广东开放大学优秀青年讲师，软件技术专业骨干教师，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