正版 响应式网页开发基础教程(jQuery+Bootstrap) 郑婷婷,黄杰

第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

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

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

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

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