作者：肖睿 游学军
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Bootstrap与移动应用开发试读：
前言
随着移动互联网技术的快速发展，移动设备的应用日渐火热。移动设备信号覆盖广、操作便捷、携带方便，已成为人们日常工作和生活的必需品，其应用市场不断扩大，越来越受到人们的关注，因此开发移动应用就变得越发重要。除了以往熟知的原生App开发，如安卓开发、iOS开发以外，目前使用HTML5和CSS3开发网页版的移动应用需求更是与日俱增，相较传统原生开发方式，这种开发方式的维护成本更低、开发周期更短，开发完成后可以应用在各个平台。
本书分为4个部分、8章来设计内容，即使用媒体查询制作响应式网页、使用Bootstrap框架制作前端网页、在理想视口下制作专为移动端网站设计的移动页面和移动端项目实战，具体安排如下：
第一部分（第1章）：介绍常用的弹性布局方法以及响应式布局方式，读者可以快速熟练地掌握Flex属性和媒体查询，制作出响应式的网页效果。
第二部分（第2～4章）：使用Bootstrap框架制作前端网页，主要内容包括Bootstrap栅格系统原理、CSS组件、JavaScript插件等，通过学习读者可以快速制作出适合各终端的精美网页。
第三部分（第5～7章）：包括移动端页面布局基础、移动端常用事件、Zepto库的使用，以及移动端开发过程中的常见问题、开发技巧、移动端优化等内容，让读者真正体会实际开发。
第四部分（第8章）：经过前面7章内容的学习，读者已经具备了开发项目的能力。最后一章来制作“爱旅行”移动端项目，从开发流程到页面的制作步骤，按照项目页面逐一分析，带领读者由浅入深地体验移动端项目开发的全过程，积累移动端项目的开发与调试经验。
本书采用边学边练的方式，在讲解过程中融入了大量的案例及最后整合的“爱旅行”项目实战，以充分提高读者的动手编码能力。
学习本书还需要掌握正确的学习方法，保证课前预习、课上练习、课下复习的好习惯。
学习方法
本书讲解Bootstrap框架、HTML5移动端网页的开发。这些知识大部分都面向移动端用户，所以读者除掌握书中的知识外，还需要从以下几个方面多努力。
➢ 上网查询与移动网页开发相关的技术文档。
➢ 看懂教材中的案例后自己独立完成。
➢ 找相关的移动网页，自己练习完成。一句话，练习练习还是练习。
总之，学习编程技术，要养成好的学习习惯、掌握正确的学习方法，然后持之以恒，定能学有所成。
本书由课工场Web全栈开发教研团队组织编写，参与编写的还有游学军、刘睿凡、王奇志、孙重巧等院校老师。尽管编者在写作过程中力求准确、完善，但书中不妥或错误之处仍在所难免，殷切希望广大读者批评指正！
本书还给读者提供了更加便捷的学习体验，可以通过直接扫描二维码的方式下载书中所有的上机练习素材及作业素材。关于引用作品的版权声明
为了方便读者学习，促进知识传播，本书选用了一些知名网站的相关内容作为学习案例。为了尊重这些内容所有者的权利，特此声明，凡在书中涉及的版权、著作权、商标权等权益均属于原作品版权人、著作权人、商标权人。
为了维护原作品相关权益人的权益，现对本书选用的主要作品的出处给予说明（排名不分先后）。
以上列表中可能并未全部列出本书选用的作品。在此，我们衷心感谢所有原作品的相关版权权益人及所属公司对职业教育的大力支持！智慧教材使用方法扫一扫查看视频介绍
由课工场“大数据、云计算、全栈开发、互联网UI设计、互联网营销”等教研团队编写的系列教材，配合课工场App及在线平台的技术内容更新快、教学内容丰富、教学服务反馈及时等特点，结合二维码、在线社区、教材平台等多种信息化资源获取方式，形成独特的“互联网+”形态——智慧教材。
智慧教材为读者提供专业的学习路径规划和引导，读者还可体验在线视频学习指导，按如下步骤操作可以获取案例代码、作业素材及答案、项目源码、技术文档等教材配套资源。
1. 下载并安装课工场App。（1）方式一：访问网址www.ekgc.cn/app，根据手机系统选择对应课工场App安装，如图1所示。图1 课工场App（2）方式二：在手机应用商店中搜索“课工场”，下载并安装对应App，如图2、图3所示。图2 iPhone版手机应用下载图3 Android版手机应用下载
2. 登录课工场App，注册个人账号，使用课工场App扫描书中二维码，获取教材配套资源，依照如图4至图6所示的步骤操作即可。图4 定位教材二维码图5 使用课工场App“扫一扫”扫描二维码图6 使用课工场App免费观看教材配套视频
3. 获取专属的定制化扩展资源。（1）普通读者请访问http://www.ekgc.cn/bbs的“教材专区”版块，获取教材所需开发工具、教材中示例素材及代码、上机练习素材及源码、作业素材及参考答案、项目素材及参考答案等资源（注：图7所示网站会根据需求有所改版，下图仅供参考）。图7 从社区获取教材资源（2）高校老师请添加高校服务QQ群：1934786863（如图8所示），获取教材所需开发工具、教材中示例素材及代码、上机练习素材及源码、作业素材及参考答案、项目素材及参考答案、教材配套及扩展PPT、PPT配套素材及代码、教材配套线上视频等资源。图8 高校服务QQ群第1章 Flex布局与响应式布局本章任务
任务1：认识Flex弹性盒布局
任务2：实现响应式布局技能目标
◆ 熟练使用媒体查询完成响应式布局
◆ 掌握Flex弹性盒布局本章知识梳理本章简介
随着科学技术不断向前发展，网页的浏览终端越来越多样化，用户可以通过宽屏电视、台式机、笔记本电脑、平板电脑和智能手机来访问网站。尽管无法保证一个网站在不同屏幕尺寸和不同设备上看起来一模一样，但是至少要让制作的Web页面适配用户的终端，让它更好地呈现在用户面前。
针对这样的需求，本章将会介绍弹性的Flex布局，以及适配多终端的响应式布局。学完本章内容将能使用CSS3中的Media Query模块让一个网页适应不同的终端（或屏幕尺寸），从而让页面有一个更好的用户体验。预习作业
简答题（1）Flex布局的好处是什么？（2）媒体查询有什么作用？任务1 认识Flex弹性盒布局1.1.1 为什么要使用弹性布局
网站设计使用固定宽度（如960像素）是期望给所有终端用户带来较为一致的浏览体验，但这种固定宽度设计在笔记本上显示刚刚好，而在部分高分辨率显示器上却会在两边出现空白，如图1.1所示。这样的网页对使用高分辨率显示器的用户的体验是极差的。同理，如果设置1263px的固定宽度，在低分辨率的显示器上去浏览，那么就会出现横向的滚动条，需要用户滑动滚动条才能看清楚网页右边的内容，用户体验也是很不好的，如图1.2所示。图1.1 固定宽度网页在高分辨率下显示效果图1.2 固定宽度网页在低分辨率下显示效果
那么如何解决上述问题呢？使得无论在何种分辨率下都能让用户很好地浏览网页。下面就来学习弹性布局。1.1.2 实现弹性布局的方法
读者如果已经掌握了盒子模型和浮动相关的知识，那么接下来就先从一个固定的布局开始入手分析。具体代码如示例1所示。示例1
热点新闻
恒大外援阿兰代表预备队出战
首页>正文
穆帅:我不会被解雇 你们知道曼联要赔我多少钱吗?
h2>
2018-09-04 07:57:41 来源: 网易体育
英超第4轮，曼联客场击败伯恩利，穆里尼奥拿到了救命的三分。赛后，压力得到释放的穆帅很是开心，他与球迷进行了积极的互动，并将手里的夹克送给球迷。而在接受媒体采访的时候，穆帅表示自己一点都不担心被解雇，他还略带玩笑地说道：“你们知道曼联解雇我得赔多少钱吗？”
关键的CSS代码如下所示。
.box ｛
width: 960px;
border: 1px solid #000000;
padding: 10px;
｝
aside ｛
width: 280px;
float: left;
background: red;
padding: 10px;
｝
article ｛
margin-left: 10px;
width: 650px;
float: left;
background: yellow;
｝
上述代码在宽屏浏览器中的显示效果如图1.3所示。可以发现，在网页右边出现了一块空白。这是因为网页内容的总宽度是960px，而浏览器的宽度是1424px，所以网页元素右边就会出现多余的空白。图1.3 宽屏下的显示效果
如果浏览器的宽度很小，又会是什么显示效果呢？具体如图1.4所示。图1.4 窄屏下的显示效果
从图1.4中可以看出，网页内容有一部分被遮挡住了，需要用户手动滑动横向滚动条才能看到完整的网页。这样的浏览效果对于用户来说体验是非常不好的，接下来介绍两种方法，来解决上述问题。
1. “浮动+百分比”布局
首先来思考一下，为什么示例1中的页面会在不同浏览器尺寸下显示差别那么大？其实是因为结构元素设置了固定宽度。从这个角度出发，如果网页的宽度不是一个固定值，是否就可以具有“弹性”呢？
给网页元素设置宽度一直都习惯使用像素（px）作为单位，其实还有一种单位——百分比。接下来就把示例1的代码用百分比单位稍加修改，具体如下所示。
.box ｛
width: 100%;
border: 1px solid #000000;
padding: 10px;
｝
aside ｛
width: 30%;
float: left;
background: red;
padding: 10px;
｝
article ｛
width: 65%;
margin-left: 10px;
float: left;
background: yellow;
｝
使用浮动和百分比修改页面后的显示效果如图1.5和图1.6所示。这时候网页的内容就不会再受浏览器宽度的影响了，它会随着浏览器的伸展而伸展、收缩而收缩。图1.5 “浮动+百分比”布局在宽屏下的显示效果图1.6 “浮动+百分比”布局在窄屏下的显示效果
仔细观察图1.5和图1.6会发现，如果左边栏内容没有右边栏内容多，下边会空出来。如果这两栏的下面还有其他网页内容，就会排在它们下方，网页上会在中间空出来一块，很难看。况且网页元素收缩也不是无限收缩，当收缩到它的最小宽度时，第二栏就会排到第二行上。
所以这种布局方式也不是在所有场合都可以使用。除此之外，还有Flex布局方式。下面就来看看Flex布局方式能否更完美地解决示例1中的问题。
2. Flex布局
Flex（Flexible Box）布局是在CSS3中引入的，又称“弹性盒模型”。该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。
Flex布局对于设计比较复杂的页面非常有用，可以在屏幕和浏览器窗口大小发生变化时，保持元素的相对位置和大小不变，同时减少了在实现元素位置的定义以及重置元素的大小时对浮动布局的依赖。
Flex布局在定义伸缩项目大小时，伸缩容器会预留一些可用空间，以调节伸缩项目的相对大小和位置。例如，可以确保伸缩容器中的多余空间平均分配给多个伸缩项目。当然，如果伸缩容器没有足够大的空间来放置伸缩项目，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。
综上所述，Flex布局主要具有以下几点功能。
➢ 在屏幕和浏览器窗口大小发生改变时，可以灵活地调整布局。
➢ 控制元素在页面上的布局方向。
➢ 按照不同于文档对象模型（DOM）所指定的排序方式对屏幕上的元素重新排序。
如何在网页中使用弹性盒模型呢？要开启弹性盒模型，只需要设置拥有盒子的display属性值为flex即可。语法
display : flex;
接下来就用弹性盒模型的方式对示例1的代码进行修改，具体如示例2所示。示例2
热点新闻
恒大外援阿兰代表预备队出战
首页>正文
穆帅:我不会被解雇 你们知道曼联要赔我多少钱吗?
h2>
2018-09-04 07:57:41 来源: 网易体育
英超第 4 轮，曼联客场击败伯恩利，
穆里尼奥拿到了救命的三分。赛后，压力得
到释放的穆帅很是开心，他与球迷进行了积极的互动，
并将手里的夹克送给球迷。而在接受媒体采访的时
候，穆帅表示自己一点都不担心被解雇，他还略带玩笑地说道：“
你们知道曼联解雇我得赔多少钱吗？”
关键的CSS代码如下所示。
.box ｛
display: flex;
border: 1px solid #000000;
padding: 10px;
｝
aside ｛
background: red;
padding: 10px;
｝
article ｛
margin-left: 10px;
background: yellow;
｝
在宽屏浏览器下的显示效果如图1.7所示，在窄屏浏览器下的显示效果如图1.8所示。图1.7 Flex布局在宽屏下的显示效果图1.8 Flex布局在窄屏下的显示效果
如图1.7和图1.8所示，网页中的内容可以实现自动伸缩。从代码中可以发现，在父级盒子中定义了display为flex就能把类名为box的整个大盒子设置为弹性的盒子。相比“浮动+百分比”布局来说，没有对aside和article两个盒子设置浮动和宽度。但结果是这两个盒子排到了一行，并且这两个盒子的高度是一样的，也避免了左边盒子下面出现一大片空白。
总结弹性盒模型的好处如下。
➢ 可以让盒子里面的元素排在一行。
➢ 盒子里面的元素高度相同。
虽然弹性盒模型可以解决网页内容适应浏览器窗口大小自动伸缩的问题，可是依然会发现aside和article两栏是以最小宽度显示的。那么在弹性盒模型中如何设置每个元素的宽度呢？除此之外还能设置元素的什么属性呢？下面就来学习一下弹性盒模型的其他属性。（1）伸缩性（flex）
伸缩布局的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充伸缩容器额外的空间，这可以用flex属性来完成。
下面就通过示例2来分析flex属性的用法。修改CSS代码如下所示。
.box ｛
display: flex;
border: 1px solid #000000;
padding: 10px;
｝
aside ｛
flex:1;
background: red;
padding: 10px;
｝
article ｛
flex:1;
margin-left: 10px;
background: yellow;
｝ 注意为了保证CSS3部分属性在不同浏览器下的兼容性，需要给元素加前缀。例如：flex:1，要让IE浏览器支持，就需要写为-ms-flex:1，其他浏览器同理。
在宽屏浏览器下的显示效果如图1.9所示，在窄屏浏览器下的显示效果如图1.10所示。图1.9 flex属性值为1时宽屏下的显示效果图1.10 flex属性值为1时窄屏下的显示效果
如果把article的flex修改为2，具体代码如下所示。
article ｛
flex:2;
margin-left: 10px;
background: yellow;
｝
在宽屏浏览器下的显示效果如图1.11所示，在窄屏浏览器下的显示效果如图1.12所示。图1.11 article的flex属性值为2时宽屏下的显示效果图1.12 article的flex属性值为2时窄屏下的显示效果
从上面的图中可以发现，flex属性的具体数值并不代表具体的宽度值，而是一个比例值。即在父容器的剩余空间里按比例去分配自己的宽度。aside和article的flex如果都是1，表示宽度比例为1:1，所以无论浏览器宽度如何都能保持内容宽度以1:1显示。article的flex属性值变为2后，比例值变为1:2，也就是说article的宽度是aside的两倍，且不受浏览器宽度的影响。（2）伸缩流方向（flex-direction）
flex-direction属性决定主轴的方向（即项目的排列方向），可以很简单地将多个元素的排列方向从水平方向修改为垂直方向，或者从垂直方向修改为水平方向。注意采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），又叫侧轴。主轴的开始位置（与边框的交叉点）叫作main start，结束位置叫作main end；交叉轴的开始位置叫作cross start，结束位置叫作cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫作main size，占据的交叉轴空间叫作cross size。具体如图1.13所示。图1.13 flex容器的主轴和交叉轴语法
➢ flex-direction：row | row-reverse | column | column-reverse
➢ row：主轴为水平方向，起点在左端。即网页元素排版方式为从左到右排列（默认值）。
➢ row-reverse：主轴为水平方向，起点在右端。与row相反，元素从右到左排列。
➢ column：主轴为垂直方向，起点在上端。类似于row，不过是从上到下排列。
➢ column-reverse：主轴为垂直方向，起点在下端。类似于row-reverse，不过是从下到上排列。
其中，row是默认的排列方式，前面示例显示的都是row的排列方式，这里就不再演示了。如果将示例2的代码改为row-reverse的方式，具体代码如下。
.box ｛
display: flex;
flex-direction: row-reverse; /*与row排列相反。
元素从右到左排列*/
border: 1px solid #000000;
padding: 10px;
｝
在浏览器中的显示效果如图1.14所示。图1.14 flex-direction属性值为row-reverse的显示效果
从图1.14中可以发现，设置flex-direction属性为row-reverse之后，aside和article两列的排列顺序完全颠倒了。
如果把flex-direction的属性设置为column，具体代码如下所示。
.box ｛
display: flex;
flex-direction: column; /*类似于row，不过是从上到下排列*/
border: 1px solid #000000;
padding: 10px;
｝
在浏览器中的显示效果如图1.15所示。box盒子里的两栏元素由水平方向显示变为垂直方向显示。图1.15 flex-direction属性值为column的显示效果
flex-direction属性设置为column-reverse，就是把aside和article两列的排列顺序在垂直方向上完全颠倒，这里就不再演示了。（3）伸缩换行（flex-wrap）
flex-wrap属性适用于伸缩容器，也就是伸缩项目的父元素，主要用来定义伸缩容器里是单行显示还是多行显示。侧轴的方向决定了新行堆放的方向。语法
flex-wrap：nowrap | wrap | wrap-reverse
具体有三个取值：
➢ nowrap：默认值。伸缩容器单行显示，伸缩项目不会换行。
➢ wrap：伸缩容器多行显示，伸缩项目会换行。
➢ wrap-reverse：伸缩容器多行显示，伸缩项目会换行，并且颠倒行顺序。
前面两个属性都很好理解，而第三个属性wrap-reverse会换行且颠倒行顺序，显示效果如图1.16所示。图1.16 flex-wrap属性值为wrap-reverse的显示效果（4）主轴对齐（justify-content）
justify-content属性适用于伸缩容器，也就是伸缩项目的父元素，主要用来定义伸缩项目在主轴上的对齐方式。语法
justify-content: flex-start | flex-end | center | space-between | space-
around;
属性值：
➢ flex-start：伸缩项目向一行的起始位置靠齐。
➢ flex-end：伸缩项目向一行的结束位置靠齐。
➢ center：伸缩项目向一行的中间位置靠齐。
➢ space-between：伸缩项目会平均分布在行里。第一个伸缩项目在一行中的最开始位置，最后一个伸缩项目在一行中的最终点位置。
➢ space-around：伸缩项目会平均分布在行里，两端保留一半的空间。
上述几种属性值的实际演示效果如图1.17所示。图1.17 justify-content各属性值对伸缩项目的效果（5）侧轴对齐（align-items）
align-items属性定义伸缩项目在侧轴上的对齐方式。align-items与justify-content相呼应，可以把它想象成侧轴（垂直于主轴）的justify-content。语法
align-items: flex-start | flex-end | center | baseline | stretch;
➢ flex-start：伸缩项目在侧轴起点边的外边距紧靠该行侧轴起点边。
试读结束[说明：试读内容隐藏了图片]