《构建跨平台APP：响应式UI设计入门》 - 杨旺功、赵荣娇 - 清华大学出版社 - 香港大書城

	登入帳戶　 \|　訂單查詢　 \|　購物車/收銀台(0)　\|　在線留言板　 \|　付款方式　 \|　運費計算　 \|　聯絡我們　 \|　幫助中心　\|　加入書簽
		會員登入新用戶登記

HOME

新書上架

暢銷書架

好書推介

2024年度TOP

臺灣用戶

品種：超過100萬種各類書籍/音像和精品，正品正價，放心網購，悭钱省心

服務：香港／台灣／澳門／海外

送貨：速遞／郵局／服務站

新書上架：簡體書繁體書
暢銷書架：簡體書繁體書
好書推介：簡體書繁體書

『簡體書』构建跨平台APP：响应式UI设计入门

書城自編碼： 2840714
分類：簡體書→大陸圖書→計算機/網絡→程序設計
作者：杨旺功、赵荣娇
國際書號(ISBN)： 9787302437970
出版社：清华大学出版社
出版日期： 2016-06-01
版次： 1 印次： 1
頁數/字數： 196/326000
書度/開本： 16开釘裝：平装

售價：HK$ 73.5

我要買件

** 我創建的書架 **
未登入.

新書推薦：

《随他们去：别把精力浪费在无法掌控的事情上》
售價：HK$ 81.4

《聊斋志异：2025全新插图珍藏白话版（全4册）》
售價：HK$ 588.8

《史记的文化发掘：中国早期史学的人类学探索》
售價：HK$ 199.4

《风起红楼：百年讹缘探秘》
售價：HK$ 221.8

《跑外卖：一个女骑手的世界》
售價：HK$ 68.4

《封关运作背景下的海南自由贸易港（建设中国特色自由贸易港丛书）》
售價：HK$ 85.8

《滞后情书》
售價：HK$ 47.1

《日本新中产阶级：东京近郊的工薪职员及他们的家庭（看日本系列）》
售價：HK$ 96.8

編輯推薦：

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

內容簡介：

内容简介

基于响应式内容的本质，页面应该在任何合理屏幕大小的设备上看上去都很舒服，我们做设计的就应该站在用户的角度考虑，一切设计都应该看上去很美、很实用。本书的响应式设计正是基于这一理念，从小到一个图标，大到完整的页面布局，都从响应式UI设计入手，适合所有响应式设计的入门人员和中小企业的网站搭建人员学习。

本书分为3篇共11章，第一篇是响应式设计基础，我们首先介绍清楚到底什么是响应式设计，然后介绍分解响应式设计页面，包括页面中的元素、页面的布局、导航栏、多媒体等；第二篇是响应式设计框架，详细介绍了目前使用最广泛的Bootstrap框架，包括它的各种样式设计和特效设计；最后一篇是实战，用一个Bootstrap贴吧和HTML 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
否定伪类:notS 196

內容試閱：

第6章 Bootstrap入门

Bootstrap来自Twitter，是目前最受欢迎的跨平台前端框架，它基于HTML、CSS、JavaScript，简洁灵活，能使得Web开发或移动开发更加快捷。只要我们具备HTML和CSS的基础知识，就可以阅读本章，进而开发出自己的网站。
本章主要内容包括：
认识Bootstrap的优势
下载并在网站中引入Bootstrap
调用Bootstrap为我们提供的样式、组件和特效
6.1 初次接触Bootstrap
Bootstrap是当前应用最广泛、最为开发者所熟知的前端框架，它缘何出现？发展的历程是什么？实现了哪些功能？为何如此流行？本节将揭开谜题。
6.1.1 Bootstrap的优势
Bootstrap是Twitter公司于2011年8月开源的整体式前端框架，它由Twitter的设计师Mark
Otto和Jacob Thornton合作开发。经过短短几个月的时间就红遍全球，大量Bootstrap风格的网站出现在互联网的信息浪潮之中，而应用更为广泛的是它的后台管理界面。笔者近两年接触的所有互联网项目的后台均采用了Bootstrap进行构建。为什么它如此流行呢？
1．功能强大和样式美观的强强联合
Bootstrap包含了绝大多数的常用页面组件和动态效果，并且它是由专业的网页设计师精心制作的，足够的美观精致，即使是一个没有专业网页设计师的团队也可以利用Bootstrap快速地构建简洁美观的页面，而在Bootstrap出现之前，快速和美观往往是互斥的。
一些大型互联网公司（如Google、雅虎、新浪、百度等）都会有强大的内部通用样式库和JavaScript组件库，但它们一方面是不开源的，另一方面大部分库都带有这些公司的特定风格和烙印，即使开源，应用面也并不广泛。
2．简单易用，文档丰富
Bootstrap使用起来特别简单，并且有非常详尽的文档（如图6.1），甚至可以不用查看代码，只需把文档当作黑盒来使用，就可以构建出相当漂亮的页面效果，而且样式类的语义性非常好，根据英文单词的意义很容易记忆。

图6.1 Bootstrap的文档样例
3．高度可定制
Bootstrap的一大优点是它极佳的可定制性，一方面可以有选择性地只下载自己需要的组件，另一方面在下载前可以调配参数（如图6.2）来匹配自己的项目。由于Bootstrap是完全开源的，使用者也可以根据自己的需要来更改代码。

图6.2 定制化选择界面
4．丰富的生态圈
由于Bootstrap如此优秀，在Web开发领域出现了很多基于Bootstrap的插件，一些集成的CMS也开始应用Bootstrap。例如图标字体插件Font
Awesome、富文本编辑器插件bootstrap-wysihtml5、Rails插件bootstrap-sass等等，还有很多基于Bootstrap的皮肤插件，弥补了Bootstrap流行后同质化严重的问题，例如基于Window
Metro风格的Flat UI、基于Google风格的Google Bootstrap。
国内外都有Bootstrap的免费CDN服务，这更推动了Bootstrap的流行，由于国内无法使用Google的CDN，建议使用百度CDN服务：
未压缩版本：

script
src="http:libs.baidu.combootstrap2.0.4jsbootstrap.js"script
link
href="http:libs.baidu.combootstrap2.0.4cssbootstrap.css"
rel="stylesheet"

压缩后的版本：

script
src="http:libs.baidu.combootstrap2.0.4jsbootstrap.min.js"script
link
href="http:libs.baidu.combootstrap2.0.4cssbootstrap.min.css"
rel="stylesheet"

5．布局兼容性良好
虽然Bootstrap采用了很多CSS
3的效果，但是在布局上可以兼容到IE 7。使用Bootstrap可以很大程度上避免在IE下的布局错乱。当然，在较老版本的IE浏览器下，效果会打一些折扣。
6.1.2 下载Bootstrap
Bootstrap的官方网站地址是http:getbootstrap.com，界面如图6.3所示。可以在官网下载最新的版本和详细的使用说明文档。目前国内也有不错的Bootstrap汉化文档，地址是http:www.bootcss.com。

图6.3 Bootstrap官网
单击Download Bootstrap按钮，转到下载页面，如图6.4所示。我们选择第一项，不包括一些基本的源码或文档，如果想深入学习Bootstrap的源码则下载第二项。下载第二项要注意，Bootstrap的源代码是使用CSS的预编译语言Less编写的，下载源码需要LESS编译器。应用Bootstrap必须使用已经编译好的CSS文件。

图6.4 下载选项
下载下来的是一个压缩包bootstrap-3.3.5-dist.zip，解压后的效果如图6.5所示。这里最关键的是css文件和js文件。后面我们会详细地讲解如何使用它。

图6.5 下载下来的压缩包解压后
6.2在网站中引入Bootstrap
在网站中引入Bootstrap的方法很简单，和引入其他CSS或JavaScript文件一样，使用script标签引入JavaScript文件，使用link标签引入CSS文件。不过需要注意的是Bootstrap的JavaScript效果都是基于jQuery的，因此需要使用Bootstrap的JavaScript动态效果的话，必须先引入jQuery。
这里我们可以去http:jquery.comdownload下载最新jQuery文件，或使用当前项目中已有的jQuery版本。
【示例6-1】引入Bootstrap

01 html
02 head
03 link
href="..bootstrapcssbootstrap.css" rel="stylesheet"
04 head
05 body
06 Html code
07 ..
08 script
src="..bootstrapjsjQuery.js"script !--jQuery应该放在前面优先加载--
09 script
src="..bootstrapjsbootstrap.js"script
10 body
11 html

JavaScript文件放在文档尾部有助于提高加载速度。
【代码解析】
引入Bootstrap还可以使用第三方的CDN服务，Bootstrap
3版本则建议使用Bootstrap中文网提供的CDN，网址是http:open.bootcss.com；当然如果是做国外的项目，首选则是Google的CDN服务了。
本例效果如图6.6所示。

图6.6 引入Bootstrap但还没有应用样式
6.3 调用Bootstrap的样式
以编写一个表格为例，如果不使用Bootstrap或者其他类似的框架，有以下两步：
（1）第一步肯定是构思设计表格的样式，宽度、高度、行高、对齐方式、边框等等很多地方需要考虑，而且一开始的设想与实际效果并不符合，还需要后面不断地调试。
（2）第二步需要编写相应的HTMLCSS代码，边写，边调试，还要边思考如何给id或者class命名，最后可能还需要上司或者同事进行审核。
如果决定使用Bootstrap，那么只需要引入Bootstrap，然后在table标签中添加一个class=table就可以获得一个Bootstrap设定好的表格样式。
【示例6-2】
应用Bootstrap样式的表格：

01 html
02 head
03
link href="..bootstrapcssbootstrap.css"
rel="stylesheet"
04 head
05 body
06 table class="table" !--只需要添加class="table"即可--
07 tr
08 th姓名th
09 th年龄th
10 th职业th
11 tr
12 tr
13 td王文清td
14 td22td
15 td程序员td
16 tr
17 tr
18 td李成供td
19 td23td
20 td程序员td
21 tr
22 table
23 script
src="..bootstrapjsjQuery.js"script
24 script
src="..bootstrapjsbootstrap.js"script
25 body
26 html

效果如图6.7所示。

图6.7 应用Bootstrap的表格样式
当然，Bootstrap不会死板地只提供一种样式，对于表格来说，还可以添加table-striped类来添加斑马纹，添加table-bordered来为表格加上边框。
【示例6-3】

01 table
class="table table-striped table-bordered"
02 tr
03 th姓名th
04 th年龄th
05 th职业th
06 tr
07 tr
08 td王文清td
09 td22td
10 td程序员td
11 tr
12 tr
13 td李成供td
14 td23td
15 td程序员td
16 tr
17 table

代码效果如图6.8所示。

图6.8 带斑马纹和边框的表格
6.4调用Bootstrap的组件
除了添加class的方式外，在布局方面，只要符合约定的一些class命名和嵌套结构，我们就可以轻松地构建出一些通用组件，以导航条为例。
【示例6-4】

01 html
02 head
03 link
href="..bootstrapcssbootstrap.css" rel="stylesheet"
04 head
05 body
06 div
class="navbar"
07 div class="navbar-inner"
08 a class="brand"
href="#"检验整理多动手a
09 ul class="nav"
10 li class="active"a
href="#"首页ali
11 lia href="#"新闻频道ali
12 lia href="#"评论ali
13 ul
14 div
15 div
16 script
src="..bootstrapjsjQuery.js"script
17 script
src="..bootstrapjsbootstrap.js"script
18 body
19 html

只要符合div.navbar
div.navbar-inner ul.nav li 这样的HTML文档结构，就可以构建出一个顶部导航条，效果如图6.9所示。

图6.9 导航条
6.5调用Bootstrap的js特效
对于Bootstrap中JavaScript效果的添加，一方面需要根据文档编写特定的HTML结构，另一方面需要调用JavaScript插件。下面以标签页切换效果为例来讲解。
【示例6-5】
（1）首先编写HTML文档：

01 ul
class="nav nav-tabs" id="myTab"
02 li
class="active"a href="#home"
data-toggle="tab"首页ali
03 lia href="#profile"
data-toggle="tab"娱乐ali
04 lia href="#messages"
data-toggle="tab"评论ali
05 lia href="#settings"
data-toggle="tab"灌水ali
06 ul
07 !--href属性的值要和后面tab-pine中的id值对应--
08
09 div
class="tab-content"
10 div class="tab-pane active"
id="home"中国男足在2018世预赛亚洲40强小组赛关键战中客场0-1负于卡塔尔。此战过后卡塔尔4战全胜积12分，已在榜首位置确立明显优势，中国队2胜1平1负积7分，排名降到小组第三，争夺小组头名从而确保出线权的前景已非常被动。王大雷在比赛中多次做出精彩扑救，但布迪亚夫在第22分钟为卡塔尔打入制胜球，于大宝、于汉超所形成的威胁攻门未能为中国队取得入球。
11 div
!--tab标签对应的内容--
12 div class="tab-pane"
id="profile"div
13 div class="tab-pane"
id="messages"div
14 div class="tab-pane"
id="settings"div
15 div

（2）JavaScript插件的调用一般有两种方式，一种是采用Bootstrap自带的触发规则，在标签中添加data-toggle=tab这样的属性来实现（上述代码第2行），这种方式的好处是无须编写任何JavaScript代码就可以实现功能；另一种则类似普通jQuery插件的调用方式，例如：

$#myTab a.clickfunction e {
e.preventDefault;
$this.tabshow;
}

本例最终实现的效果如图6.10，单击标签页就可以切换内容。

图6.10 标签页效果
6.6实战：一个Bootstrap实现的响应式页面V1.0
Bootstrap
3默认就引入了响应式设计，相比2.X版本，它有两点比较大的变化：
拥抱大屏幕，移除了小屏手机和大屏手机（480~768像素）这个媒介查询区间，768像素以下的统一归为小屏幕设备。
设计了表现不同的栅格类，对栅格类的命名规则也做了很大的修改，更复杂但使用也更灵活，能适应更多的场景。
在Bootstrap
2中，栅格全部采用span*作为前缀。而在Bootstrap 3中采用了col-type-*这样命名的前缀，其中type可以取xs（超小屏）、sm（小屏）、md（中屏）、lg（大屏）4个值。
通过表6.1可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的。
表6.1 Bootstrap 3的响应式布局区间

超小屏幕设备手机
768px

小屏幕设备平板
768px

中等屏幕设备桌面
992px

大屏幕设备桌面
1200px

栅格系统行为

总是水平排列

开始是堆叠在一起的，超过这些阈值将变为水平排列

最大.container宽度

None （自动）

750px

970px

1170px

class前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列数

12

最大列宽

自动

60px

78px

95px

槽宽

30px（每列左右均有15px）

可嵌套

Yes

Offsets

NA

Yes

列排序

NA

Yes

Bootstrap中的响应式页面V1.0：

01 html
02 head
03 script
src="http:libs.baidu.comjquery1.9.0jquery.js"script
04 script
src="http:cdn.bootcss.comtwitter-bootstrap3.0.2jsbootstrap.js"script
05 link
href="http:cdn.bootcss.comtwitter-bootstrap3.0.2cssbootstrap.css"
rel="stylesheet"
06 head !-- 引入Bootstrap 3--
07 body
style="margin:20px"
08 div class="container"
09 div class="row"
10 div class="col-xs-12 col-sm-3
col-md-5 col-lg-4" !-- 左侧边栏--
11 h1体育新闻h1
12 h1娱乐新闻h1
13 h1经济新闻h1
14 div
15 div class="col-xs-12 col-sm-9
col-md-7 col-lg-8" !-- 右侧边栏--
16 p大雷在比赛中多次做出精彩扑救，但布迪亚夫在第22分钟为卡塔尔打入制胜球，于大宝、于汉超所形成的威胁攻门未能为中国队取得入球。p
17
div
18
div
19
div
20 body
21 html

本例效果如图6.11所示（在不同的宽度下显示效果会有所不同）。

图6.11 Bootstrap中的响应式页面
6.7小结
本章只是初步介绍了学习Bootstrap之前的必要步骤，需要读者先知道什么是Bootstrap，然后学会下载Bootstrap，再然后了解Bootstrap为我们提供了哪些方便的技术，这其中包括样式、组件和特效。每一种技术背后，我们都通过一个很简单的示例来教会读者如何应用Bootstrap的这些技术。Bootstrap虽然使用简单，但包含的内容还是很多的，所以接下来的章节我们会继续练习Bootstrap提供的这些便捷技术。

書城介紹　 \|　合作申請　\|　索要書目　 \|　新手入門　\|　聯絡方式　 \|　幫助中心　\|　找書說明　 \|　送貨方式　\|　付款方式	香港用户　 \|　台灣用户　\|　海外用户

	megBook.com.hk
Copyright © 2013 - 2025 （香港）大書城有限公司　 All Rights Reserved.