基于“响应式内容”的本质，页面应该在任何合理屏幕大小的设备上看上去都很舒服，我们做设计的就应该站在用户的角度考虑，一切设计都应该看上去很美、很实用。本书的响应式设计正是基于这一理念，从小到一个图标，大到完整的页面布局，都从响应式UI设计入手，适合所有响应式设计的入门人员和中小企业的网站搭建人员学习。
　　本书分为3篇共11章，第一篇是响应式设计基础，我们首先介绍清楚到底什么是响应式设计，然后介绍分解响应式设计页面，包括页面中的元素、页面的布局、导航栏、多媒体等；第二篇是响应式设计框架，详细介绍了目前使用广泛的Bootstrap框架，包括它的各种样式设计和特效设计；一篇是实战，用一个Bootstrap贴吧和HTML5扁平化公司主页，实践前面所学的内容。
　　本书技术新颖、内容精练、结构清晰、注重实战，适合广大网页设计或移动设计初学人员学习，同时也非常适合大中专院校师生学习阅读，也可作为高等院校计算机及相关专业的教材使用。

　　是广受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的Web项目

　　响应式Web设计（Responsive Web design）的理念是：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。换句话说，页面应该有能力去自动响应用户的设备环境。
　　目前，响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来（iPad Pro、iPad Mini 4、小米Note），这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。随着各种移动设备的不断出现，响应式设计不再新鲜，但却成为我们UI身边不可缺少的元素。
　　本书就是一本梳理响应式设计元素的图书，它的目的是让所有UI设计人员找到设计方向，完善设计理念和方法。从而使自己设计的网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
　　与其他书的区别
　　（1）细分响应式页面中的各个元素，从小地方入手，了解响应式设计的精髓。
　　详解响应式设计涉及的文字、表单、框架、图片、视频等基础元素，帮读者一步一步打下响应式设计的基础。
　　（2）实例佐证技术的讲解方式，每个技术点都伴有实例，让读者能看完就学会。
　　全书的技术点不仅仅有理论知识，还有大量的HTML 5和CSS 3代码，让读者可以看、可以动手，可以通过一点一滴的操作逐步掌握所有技术。
　　（3）紧贴流行的设计趋势，让读者不仅能学会现在的设计方式，还能看清什么样的设计才是好的设计和未来的设计。
　　大部分例子都提供了宽屏和窄屏的设计效果，并讲解了各种设计下的书写技巧。
　　进阶路线
　　本书共3篇11章，主要章节规划如下。
　　第一篇（第1章~第5章）响应式设计基础篇
　　讲述了响应式设计的由来和简单发展，通过响应式网页中的元素、响应式布局、响应式导航、响应式多媒体等4个模块，详细介绍了响应式设计中我们需要学习和关注的技术点。
　　第二篇（第6章~第9章）响应式设计框架篇
　　讲述了如何使用响应式框架Bootstrap，包括它的样式设计、组件设计、特效设计三大模块，每个模块都辅助了很多小例子，让读者能一看就会。
　　第三篇（第10章~第11章）响应式网站设计实战篇
　　本篇包含两个完整案例，一个是利用框架实现的响应式后台管理，一个是利用扁平式结构实现的公司宣传主页。
　　本书适合的读者
　　本书适合任何对 Web设计感兴趣的读者进行阅读，示例中会涉及一些 HTML和 CSS代码，理解这些代码会极大地帮助你深入了解响应式 Web设计开发中的技巧。
　　前端工程师
　　设计师
　　产品经理
　　架构师
　　项目经理
　　大中专院校的学生
　　可作为各种培训学校的入门教程
　　作者简介
　　杨旺功，男，毕业于重庆邮电大学，硕士，现任职于北京印刷学院设计艺术学院教师。具有丰富的数字媒体交互产品设计和移动应用UI设计的教学经验。在数字化艺术与设计领域成果显著，著有《给设计师看的交互程序设计书——FLASH ACTIONSCRIPT 3.0溢彩编程》《Flex 4.0 RIA开发宝典》等教材，并发表多篇数字化艺术与设计的论文。主要方向是信息与交互设计产品创新设计，对信息与交互设计有深入的研究。
　　赵荣娇，女，毕业于中国传媒大学，工学硕士。目前就职于阿里去啊，担任前端开发工程师，曾参与旅游特卖首页、1688订单等项目开发。热爱技术，喜欢分享。中国传媒大学新媒体研究院主办《信息科技周刊》总编辑、《新媒体技术动态》发起人。
　　本书第1~5章由阿里去啊的赵荣娇编写，第6~11章北京印刷学院设计艺术学院的杨旺功编写，参与创作的还有陈宇、刘轶、姜永艳、马飞、王琳、张鑫、张喆、赵海波、肖俊宇、欧阳薇、周瑞、李为民、陈超、杜礼、孔峰。
　　编者
　　2016年5月

　　杨旺功，男，毕业于重庆邮电大学，硕士。现任北京印刷学院设计艺术学院教师，主要研究方向是信息与交互设计产品创新设计，具有丰富的数字媒体交互产品设计和移动应用UI设计的教学经验。在数字化艺术与设计领域成果显著，发表多篇数字化艺术与设计的论文，对信息与交互设计有深入的研究。


　　赵荣娇，女，毕业于中国传媒大学，硕士。中国传媒大学新媒体研究院主办《信息科技周刊》总编辑，《新媒体技术动态》发起人。目前就职于阿里去啊，担任前端开发工程师，曾参与旅游特卖首页、1688订单等项目开发。热爱技术，喜欢分享。

第1章 传说中的响应式设计 1
1.1 支持跨平台设备的响应式设计 1
1.1.1 什么样的设计是响应式的 1
1.1.2 响应式设计坚守的4大原则 3
1.2 响应式设计与其他页面设计的对比 4
1.2.1 固定布局 5
1.2.2 流式布局 7
1.3 实战：创建一个响应式网页 9
1.3.1 设置HTML文档的Meta标签 9
1.3.2 设计HTML文档结构 9
1.3.3 使用CSS 3媒介查询 10
1.3.4 运行第一个响应式页面 12
1.4 小结 14
第2章 响应式网页中的元素 15
2.1 文字 15
2.2 表单 18
2.2.1 自定义Radiobox 19
2.2.2 自定义Checkbox动画 21
2.2.3 美化输入框 24
2.2.4 下拉框 27
2.3 框架 28
2.3.1 传统的iFrame框架 29
2.3.2 响应式的iFrame框架 29
2.4 实战：实现一个响应式登录表单 31
2.4.1 设置登录表单的HTML结构 31
2.4.2 设计登录表单的通用样式 33
2.4.3 使用CSS 3媒介查询实现响应式登录表单 35
2.5 小结 37
第3章 响应式布局 38
3.1 布局切换 38
3.2 侧边栏 40
3.3 宽高等比例变化 44
3.4 列表 46
3.4.1 定义列表分级菜单 46
3.4.2 列表切换效果 48
3.5 表格 52
3.5.1 简单自适应表格 52
3.5.2 翻转滚动表格 55
3.5.3 隐藏表格栏目 60
3.6 实战：响应式商品展示列表 61
3.7 小结 64
第4章 响应式导航 65
4.1 响应式导航菜单设计五大原则 65
4.1.1 按照优先级显示内容 65
4.1.2 用创造力来处理有限的空间 66
4.1.3 下拉菜单 66
4.1.4 给导航菜单换位置 66
4.1.5 放弃导航菜单 66
4.2 导航类型 66
4.2.1 单层导航 67
4.2.2 多层导航 70
4.2.3 面包屑导航 72
4.3 页码设计 73
4.4 小结 75
第5章 响应式多媒体 76
5.1 图标的响应式 76
5.2 图像 78
5.2.1 可适配的图像 78
5.2.2 图像网格 80
5.3 视频 84
5.3.1 内嵌视频响应式的难点 85
5.3.2 从其他网站中手动嵌入视频 85
5.4 响应式图表 86
5.4.1 一款响应式图表库 86
5.4.2 带Tooltip提示的线形图 88
5.4.3 简单的饼图 91
5.5 小结 93
第6章 Bootstrap入门 94
6.1 初次接触Bootstrap 94
6.1.1 Bootstrap的优势 94
6.1.2 下载Bootstrap 96
6.2 在网站中引入Bootstrap 97
6.3 调用Bootstrap的样式 98
6.4 调用Bootstrap的组件 100
6.5 调用Bootstrap的js特效 101
6.6 实战：一个Bootstrap实现的响应式页面V1.0 102
6.7 小结 104
第7章 Bootstrap的样式设计 105
7.1 字体 105
7.1.1 标题 105
7.1.2 全局字体和段落 106
7.2 表格 107
7.2.1 基本用法 108
7.2.2 表格的附加样式 108
7.2.3 为表格行或单元格添加状态标识 110
7.2.4 响应式表格 112
7.3 表单 112
7.4 按钮 115
7.4.1 按钮的基本样式 115
7.4.2 调节按钮大小 116
7.4.3 块级按钮 117
7.4.4 为按钮设置不可点击样式 118
7.5 图片 118
7.5.1 图片类 118
7.5.2 响应式图片 119
7.6 Bootstrap工具类 119
7.6.1 响应式工具 119
7.6.2 工具类 120
7.7 实战：Bootstrap响应式页面V2.0 122
7.8 小结 123
第8章 Bootstrap的组件设计 124
8.1 下拉菜单 124
8.2 按钮组 125
8.2.1 垂直排列的按钮组 126
8.2.2 两端对齐的按钮组 126
8.2.3 嵌套按钮组 127
8.3 input控件组 128
8.3.1 最常见的搜索框 128
8.3.2 带提示的搜索框 128
8.4 导航 129
8.4.1 胶囊式导航 129
8.4.2 面包屑导航 130
8.4.3 头部导航 130
8.5 列表组 133
8.6 分页 134
8.6.1 普通的分页 134
8.6.2 上一页/下一页 135
8.7 标签 136
8.8 面板 137
8.9 进度条 139
8.10 缩略图 140
8.11 实战：Bootstrap响应式页面V3.0 142
8.12 小结 143
第9章 Bootstrap的特效设计 144
9.1 模态对话框 144
9.2 标签页切换 146
9.3 Tootip 147
9.4 弹出框 147
9.5 折叠 148
9.6 幻灯片 149
9.7 实战：Bootstrap响应式页面V4.0 151
9.8 小结 153
第10章 使用Bootstrap实现一个百度贴吧后台 154
10.1 确定后台管理的需求 154
10.2 设计页面布局 155
10.2.1 引入Bootstrap 3框架 155
10.2.2 实现页面布局代码 156
10.3 设计导航栏 157
10.3.1 构建导航的整体架构 157
10.3.2 设计标题和导航链接 158
10.3.3 实现搜索框和通知系统 158
10.3.4 实现管理员的登录信息 159
10.3.5 构建响应式导航 160
10.4 设计左侧边栏 162
10.5 设计主功能部分 163
10.5.1 主功能的头部 163
10.5.2 主功能的帖子列表 165
10.6 小结 168
第11章 使用HTML 5设计扁平化的公司主页 169
11.1 响应式设计的关键 169
11.2 导航栏的设计 170
11.2.1 列表的实现 170
11.2.2 弹出式菜单的实现 174
11.3 主功能部分的设计 176
11.3.1 什么是视差滚动效果 176
11.3.2 视差效果的实现 176
11.3.3 图文列表的实现 178
11.4 小结 183
附录 CSS 3选择器使用一览 184
f1.1 标签选择器 184
f1.2 类选择器 184
f1.3 id选择器 185
f1.4 通配符选择器 186
f1.5 子元素选择器 186
f1.6 后代元素选择器 187
f1.7 相邻元素选择器 187
f1.8 属性选择器 188
f1.9 组选择器 188
f1.10 复合选择器 189
f1.11 结构化伪类 190
f1.12 目标伪类:target 195
f1.13 状态伪类 195
f1.14 否定伪类:not(S) 196