根据“响应式內容”的实质，页面应当在一切有效显示屏尺寸的机器设备上看起来都很舒适，人们做设计的就应当立在客户的视角考虑到，一切设计都应当看上去很美、很好用。这书的响应式设计更是根据这一核心理念，自小到一个标志，大到详细的页面合理布局，都从响应式UI设计下手，合适全部响应式设计的新手入门工作人员和中小型企业的网站建站工作人员学习培训。这书分成3篇共11章，第一篇是响应式设计基本，人们最先详细介绍清晰究竟什么叫响应式设计，随后详细介绍分解掉响应式设计页面，包括页面中的原素、页面的合理布局、导航条、多媒体系统等；第二篇是响应式设计框架，详解了现阶段应用最普遍的Bootstrap框架，包括它的各种各样款式设计和动画特效设计；最终一篇是实战演练，用一个Bootstrap百度贴吧和HTML 5扁平化设计公司主页，实践活动前边所教的內容。
目录
- 第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 初次接触Bootstrap94
- 6.1.1Bootstrap的优势 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.0102
- 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.6Bootstrap工具类 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.3input控件组 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.3Tootip 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.3id选择器 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
