Bootstrap响应式Web开发PPT完整全套教学课件

第1章初识Bootstrap《Bootstrap响应式Web开发》第1章初识Bootstrap第2章移动Web开发基础（上）第3章移动Web开发基础（下）第4章移动端页面布局第5章Bootstrap栅格系统第6章Bootstrap框架常用组件第7章Bootstrap常用布局样式第8章综合项目——潮流穿搭网站学习目标/Target掌握Bootstrap的概念、特点及组成了解PC端浏览器和移动端浏览器的区别熟悉VisualStudioCode编辑器的使用熟悉移动Web开发的主流方案章节概述/SummaryBootstrap是一款非常优秀的Web前端框架，其灵活性和可扩展性加速了响应式页面开发的进程。Bootstrap遵循移动优先的原则，在开源之后迅速受到开发人员的追捧，推动了响应式技术的发展。为了让读者对Bootstrap有一个初步的认识，本章将会对Boostrap的基本概念、浏览器、VisualStudioCode编辑器，以及移动Web开发主流方案进行详细地讲解。目录/Contents01020304Bootstrap概述浏览器VisualStudioCode编辑器移动端Web开发主流方案Bootstrap概述1.11.1.1什么是Bootstrap

先定一个小目标！了解什么是Bootstrap1.1.1什么是BootstrapBootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。Bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap框架1.1.2Bootstrap的特点

先定一个小目标！掌握Bootstrap的特点1.1.2Bootstrap的特点Bootstrap框架的特点：低成本，易上手CSS预编译框架成熟丰富的组件库响应式设计移动设备优先浏览器支持1.1.3Bootstrap的组成

先定一个小目标！掌握Bootstrap的组成1.1.3Bootstrap的组成Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。基本结构Bootstrap包含了丰富的组件库，提供了十几个可重用的组件。布局组件Bootstrap自带了全局的CSS样式，并预先定义了基本的HTML元素样式、可扩展的class。CSS样式库Bootstrap提供了一些基于jQuery（一个用于简化JavaScript编程的库）构建的可选插件。插件Bootstrap的组成Bootstrap框架的组成：浏览器1.21.2.1PC端的浏览器

先定一个小目标！了解浏览器1.2.1PC端的浏览器浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。浏览器内核主要包括Blink、WebKit和Trident等。PC端的浏览器主要包括Google（谷歌）公司的Chrome浏览器、Mozilla公司的Firefox浏览器、和Edge浏览器等。Chrome浏览器1.2.1PC端的浏览器213市场占有率高，兼容性好，界面简洁、简单易用。基于强大的JavaScript

V8引擎，速度很快。可通过扩展插件增强功能，便于开发人员使用。内置防止网络钓鱼及恶意软件功能，更加安全。跨平台，支持PC端的Windows、Linux和Mac系统，以及移动端的Android和iOS系统。Chrome浏览器的优势：1.2.2移动端设备移动端设备主要包括Android、iOS等手机设备。屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。常见移动端设备1.2.2移动端设备移动端设备屏幕尺寸（英寸）分辨率（px）iPhone6/6S/7/84.7750×1334iPhone6/7/8plus5.51080×1920iPhoneX/XS5.81125×2436iPhoneXR6.1828×1792iPhoneXSMax6.51242×2688常见的移动端设备的屏幕尺寸：1.2.2移动端设备移动端设备屏幕尺寸（英寸）分辨率（px）iPadMini4/27.91536×2048SamsungGalaxyS10+6.41440×3040SamsungGalaxyS206.2（直角）1440×3200SamsungGalaxyS20+6.71440×3200SamsungGalaxyS20Ultra6.91440×3200SamsungGalaxyNote45.71440×2560常见的移动端设备的屏幕尺寸：1.2.3移动端的浏览器移动端的浏览器主要包括AndroidBrowser和MobileSafari，以及国产浏览器。浏览器的内核主要是Webkit内核，对HTML5提供了很好的支持。国产浏览器主要包括UC浏览器、QQ浏览器和百度浏览器等。QQ浏览器1.2.3移动端的浏览器移动Web开发使用HTML、CSS和JavaScript等基本语言。移动端Web项目的呈现依赖于移动端浏览器。移动Web开发1.2.3移动端的浏览器移动Web开发需要注意的两点：移动端设备受屏幕尺寸限制，操作的局限性比较大，所以要注意页面的结构不能过于复杂，要提炼出该网站最核心的功能，并简洁清晰地呈现出来。移动端设备受屏幕尺寸限制移动端的操作方式的改变移动端的操作方式的改变。移动端页面的所有交互活动由鼠标控制变为手指触屏控制，操作方式更加丰富，如摇一摇、双指放大、滑动、双击、单击等。VisualStudioCode1.31.3.1什么是VisualStudioCode

先定一个小目标！熟悉VisualStudioCode基本使用VisualStudioCode（简称VSCode）是由微软公司推出的一款免费、开源的代码编辑器。VisualStudioCode编辑器的特点是简单、便捷、高效。1.3.1什么是VisualStudioCodeVisualStudioCodeVisualStudioCode编辑器的优势：1.3.1什么是VisualStudioCode轻巧极速，占用系统资源较少。具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能。跨平台。VSCode编辑器是跨平台的（支持Mac、Windows和Linux），可以在不同平台来进行项目开发。主题界面的设计比较人性化。VSCode编辑器可以快速查找文件并直接进行开发，可以通过分屏显示代码，可以自定义主题颜色（默认为黑色），也可以快速查看最近打开的项目文件和查看项目文件结构。提供丰富的插件。用户根据需要自行下载和安装插件，并使用此插件提供的功能。1.3.2下载和安装VisualStudioCode登录官方网站下载安装启动简单使用12345打开浏览器，登录VSCode官方网站。在网站的首页可以看到软件的下载按钮。将VSCode编辑器下载完成后，双击安装包启动安装程序，然后按照程序的提示一步一步进行操作，直到安装完成即可使用。将VSCode编辑器安装成功后，启动编辑器主界面。打开文件夹后，创建一个简单的网页，进入到代码编辑环境。VisualStudioCode编辑器使用的基本步骤：1.3.3使用VisualStudioCode登录VisualStudioCode官方网站，找到下载按钮：VSCode官方网站1.3.3使用VisualStudioCodeVisualStudioCode编辑器安装成功后，启动主界面：VSCode编辑器主界面1.3.3使用VisualStudioCode创建一个简单的网页，进入到代码编辑环境：代码编辑环境移动端开发主流方案1.41.4.1单独制作移动端页面

先定一个小目标！熟悉移动Web开发的主流方案1.4.1单独制作移动端页面在移动端浏览器中访问淘宝、京东和苏宁移动端页面：单独制作移动端页面的网站1.4.1单独制作移动端页面131322移动端网站会产生多个URL（PC端一套URL，移动端一套URL）重定向移动网站需要花费一些时间，需要对搜索引擎做一些处理维护成本会增加，工作量比较大可以充分考虑到平台的优势和局限性网页在移动设备上加载更快创建良好的用户体验设计单独制作移动端页面的优势和劣势：1.4.1单独制作移动端页面单独制作移动端页面，通常的做法是不改变原有的PC端页面，然后针对移动端单独开发出一套特定的版本。如果是移动设备（iPhone6/7/8Plus），则跳转到移动端页面：跳转到移动端页面1.4.1单独制作移动端页面如果是PC端设备，则跳转到PC端页面:跳转到PC端页面1.4.2制作响应式页面响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。响应式开发主要是为了解决移动互联网浏览的问题。响应式开发1.4.2制作响应式页面在PC端浏览器中访问三星官方网站：初始页面1.4.2制作响应式页面缩小浏览器窗口宽度，网页布局随之发生变化：页面的响应式效果1.4.2制作响应式页面可以跨平台。响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题。便于搜索引擎收录，无论在移动端设备还是PC端上访问的都是同一个链接地址，这样就减少了权重的分散。让网站对搜索引擎更加友好。节约成本。响应式网站可以兼容多个终端，开发者不需要为各个终端编写不同的代码。对于开发者而言，减少了大量重复的工作，提高了工作的效率；对于公司而言，节省了人员开支，降低了开发成本。响应式页面的优点：本章小结本章首先介绍了Bootstrap的概念、优点以及构成，帮助读者对Bootstrap有一个初步的认识，然后介绍了PC端和移动端常用浏览器的内容，以及VisualStudioCode开发工具的下载、安装和基本配置，最后讲解了移动Web开发的两种主流方案，一种是单独制作移动端页面，另一种是制作响应式页面。在实际开发过程中，虽然利用Bootstrap能够很快速地完成响应式页面的开发，但若想要完成一个复杂的移动Web页面，往往不仅需要用到Bootstrap，还需要结合多种移动Web开发技术才能实现。第2章移动Web开发基础（上）《Bootstrap响应式Web开发》学习目标/Target

掌握视口的基本概念和使用方法

掌握移动Web页面的样式编写方法

理解分辨率和设备像素比的概念

掌握SVG矢量图的使用方法

掌握二倍图的使用方法章节概述/Summary在熟悉了Bootstrap框架和移动Web开发的基本概念后，本章将对移动Web开发的基础知识进行详解。本章内容主要包括视口、移动端Web页面的样式的编写、分辨率、设备像素比、二倍图和SVG矢量图等。其中，移动端页面的显示效果与移动端设备的视口有关，在移动端页面可以通过meta标签设置理想视口。在开发时还需要注意移动端设备的屏幕分辨率适配问题，以及图片的显示问题。目录/Contents0102030405视口移动Web页面的样式编写分辨率和设备像素比二倍图SVG矢量图视口2.12.1.1什么是视口

先定一个小目标！熟悉什么是视口2.1.1什么是视口视口（Viewport）最早是由苹果公司在推出iPhone手机时提出的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的区域。视口主要包括布局视口（layoutviewport）、视觉视口（visualviewport）和理想视口（idealviewport）。视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。2.1.1视口布局视口是指浏览器绘制网页的视口，一般移动端浏览器都默认设置了布局视口的宽度。布局视口2.1.1视口布局视口的默认宽度有可能是980px或1024px（取决于不同移动端设备的设置），这个宽度并不适合在手机屏幕中展示。当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。2.1.1视口视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。视觉视口2.1.1视口理想视口是指对设备来讲最理想的视口，效果如图所示。理想视口2.1.1视口采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在理想视口情况下，布局视口的大小和屏幕宽度是一致的，这样就不需要左右滚动页面了。在开发中，为了实现理想视口，需要给移动端页面添加<meta>标签配置视口，通知浏览器来进行处理。为了方便对不同屏幕尺寸的设备进行适配，PC端的Chrome浏览器在开发者工具中加入了模拟移动端屏幕的功能，可以模拟各种手机的显示效果。利用Chrome浏览器模拟手机屏幕，来观察移动端屏幕的显示效果，可以帮助我们更好地理解视口。2.1.2利用Chrome浏览器模拟手机屏幕编写HTML代码创建demo01.html，并定义<div>标签和<img>标签。其中，<img>标签引入的图片素材picture1.jpg文件。编写页面样式使用类选择器.title获取元素，将字体大小设为20px，字体颜色设为红色。查看页面效果在浏览器打开demo01.html，查看页面显示效果。初始页面效果PC端页面显示效果2.1.2利用Chrome浏览器模拟手机屏幕编写HTML结构代码，实现页面结构。例2-1：利用Chrome浏览器模拟手机屏幕<body><div

class="title">新款Android手机</div><img

src="picture1.jpg"

alt=""></body>HTML代码例2-1：利用Chrome浏览器模拟手机屏幕<style>.title

{font-size:

20px;color:

red;}</style>2.1.2利用Chrome浏览器模拟手机屏幕CSS代码编写CSS样式代码，实现页面样式。2.1.2利用Chrome浏览器模拟手机屏幕通过浏览器打开demo01.html，查看页面运行效果。PC端页面显示效果2.1.2利用Chrome浏览器模拟手机屏幕启动开发者工具在浏览器显示的页面中，单击鼠标右键，然后在弹出菜单中选择“检查”命令启动开发者工具（也可以直接按F12快捷键）。单击切换按钮单击开发者工具面板左上角的第2个按钮，进入到移动端设备调试功能。查看iPhone6/7/8进入后，会看到页面整体缩小了，并且在页面的顶部出现了设备的名称（如iPhone6/7/8）。查看iPhone/6/7/8查看移动端设备显示效果启动开发者工具2.1.2利用Chrome浏览器模拟手机屏幕单击Elements在浏览器的控制台中，找到Elements面板，并单击。查看页面宽度将鼠标指针放在Elements面板中的html标签上，会看到浏览器显示了当前页面的宽度为980px。查看页面宽度查看页面宽度2.1.3利用<meta>标签设置视口

先定一个小目标！掌握利用<meta>标签设置视口2.1.3利用<meta>标签设置视口在传统的PC端网页开发中，并没有使用过meta标签来设置视口，此时浏览器会按照默认的布局视口宽度来显示网页。如果希望网页在浏览器中以理想视口的形式呈现，就需要利用<meta>标签设置视口。在<meta>标签中，将name属性设为viewport，即可设置视口。2.1.3利用<meta>标签设置视口在<meta>标签的基本语法中，将<meta>标签的content属性的值设置为“width=device-width”表示通知浏览器，布局视口的宽度应该与设备的宽度一致，示例代码如下。<metaname="viewport"content="width=device-width">示例代码2.1.3利用<meta>标签设置视口创建HTML文件将demo01.html文件复制为demo02.html。添加<meta>标签在demo02.html页面中添加<meta>标签。查看页面效果在浏览器打开demo02.html，查看页面显示效果。利用<meta>标签设置视口查看设置视口后的页面宽度例2-2：利用<meta>标签设置视口<head><meta

charset="UTF-8"><title>Document</title><!--添加<meta>标签--><metaname="viewport"content="width=device-width">

…（原有代码）</head>2.1.3利用<meta>标签设置视口HTML代码创建demo02.html文件，添加<meta>标签。2.1.3利用<meta>标签设置视口通过浏览器打开demo02.html，并查看html页面的宽度。该页面的宽度为414px，与当前设备的宽度相同，实现了理想视口的效果。查看设置视口后的页面宽度2.1.4视口的常用设置在使用<meta>标签设置视口时，该标签的常用设置参数如下。参数名说明width设置视口宽度，可以设为正整数（像素）或特殊值device-widthheight设置视口高度，可以设为正整数（像素）或特殊值device-heightinitial-scale初始缩放比，取值范围为0.0~10.0maximum-scale最大缩放比，取值范围为0.0~10.0minimum-scale最小缩放比，取值范围为0.0~10.0user-scalable用户是否可以缩放，其值为yes或no<metaname="viewport"content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0">2.1.4视口的常用设置在实际开发中，通常会将视口设置为不允许用户缩放页面、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0，示例代码如下。示例代码移动Web页面的样式编写2.22.2.1利用Normalize.css初始化默认样式

先定一个小目标！熟悉移动Web页面的样式编写2.2.1利用Normalize.css初始化默认样式在传统的PC端Web开发中，一些旧版本的浏览器不符合W3C标准，有些不支持HTML5和CSS3的新特性，给开发人员带来了许多麻烦。在移动Web开发中，几乎不用担心浏览器的兼容问题，因为移动端的浏览器基本上都是以WebKit内核为主，对HTML5和CSS3的支持非常好。3.1.2全屏操作保留默认样式保留有用的浏览器默认样式，而不是完全去掉它们。一致性保证各浏览器样式的一致性。模块化开发采用模块化开发，方便后期维护。文档拥有详细的文档。Normalize.css的特点：登录官网在浏览器中打开Normalize.css官方网站找到可以获取文件的下载地址。下载单击“Downloadv8.0.1”按钮，即可获取Normalize.css源代码。保存文件在浏览器页面中，单击鼠标右键，然后在弹出的菜单中选择“另存为”即可将Normalize.css保存到本地。下载Normalize.css2.2.1利用Normalize.css初始化默认样式Normalize.css官网Normalize.css源代码编写HTML代码创建demo03.html文件，编写页面结构代码。引入Normalize.css文件通过<link>标签引入normalize.css文件，其中，href属性的值为normalize.css文件的路径地址。查看页面效果在浏览器页面中打开demo03.html，查看页面效果。使用Normalize.css2.2.1利用Normalize.css初始化默认样式设置body元素的margin值为02.2.1利用Normalize.css初始化默认样式例2-3：利用Normalize.css初始化默认样式<head><meta

name="viewport"

content="user-scalable=no,

width=device-width,initial-scale=1.0,

maximum-scale=1.0"><link

rel="stylesheet"

href="normalize.css"></head><body><div>成功引入Normalize.css</div></body>HTML代码编写HTML结构代码，实现页面结构，并使用Normalize.css初始化页面的默认样式。2.2.1利用Normalize.css初始化默认样式通过浏览器打开demo03.html，查看页面运行效果。设置body元素的margin值为02.2.2设置box-sizing为border-box在CSS3中，通过box-sizing属性可以更改盒子尺寸的计算方式。将box-sizing设为content-box（默认值）时，表示使用传统的计算方式；将box-sizing设为border-box时，表示使用CSS3的一种新的计算方式，通过这种方式可以解决传统盒子在添加了边框和内边距之后，盒子被撑大的问题。2.2.2设置box-sizing为border-box在CSS3中，将box-sizing属性box-sizing设为content-box（默认值）和border-box的基本语法如下。/*传统计算方式*/box-sizing:content-box;/*新的计算方式*/box-sizing:border-box;基本语法2.2.2设置box-sizing为border-box盒子的宽度=CSS中设置的width+border+padding使用content-box计算方式的盒子模型，其宽度的计算公式如下。计算公式2.2.2设置box-sizing为border-box盒子的宽度=CSS中设置的width使用border-box计算方式的盒子模型，其宽度的计算公式如下。当采用border-box计算方式时，CSS中设置的宽度width已经包含了border和padding值，不用担心因为设置了元素的border和padding导致盒子被撑大的问题。这种方式的优点在于，盒子的大小是固定的，不会受到边框和内边距的影响，也不会影响到页面中其他盒子的结构。因此，在移动Web开发中，推荐使用border-box这种计算方式。计算公式2.2.2设置box-sizing为border-box编写HTML代码创建demo04.html文件，编写页面结构代码。编写页面样式设置div元素的公共样式，并设置不同的div元素的box-sizing属性值为content-box和border-box。查看页面效果在浏览器页面中打开demo04.html，查看页面效果。content-box和border-box的区别对比content-box和border-box2.2.2设置box-sizing为border-box编写HTML结构代码，实现页面结构。例2-4：content-box与border-box的区别<body><div>content-box</div><div>border-box</div></body>HTML代码2.2.2设置box-sizing为border-box例2-4：content-box与border-box的区别<style>

div

{

width:

100px;height:

100px;padding:

10px;background-color:

#eee;}div:nth-child(1)

{border:

10px

solid

#999;box-sizing:

content-box;}div:nth-child(2)

{border:

10px

solid

#666;box-sizing:

border-box;}</style>编写CSS样式代码，实现页面样式。CSS代码2.2.2设置box-sizing为border-box通过浏览器打开demo04.html，查看页面运行效果。对比content-box和border-box2.2.3设置移动端的特殊样式

先定一个小目标！掌握设置移动端的特殊样式2.2.3设置移动端的特殊样式在实际开发中，移动Web页面的设计风格更接近App（手机应用），而不是传统的网页。为了有更好的用户体验，我们可以给移动Web页面设置一些特殊样式。移动端的特殊样式是非标准的，因此加上了私有前缀“-webkit-”，该前缀在WebKit和Blink内核的浏览器中有效，适用于Chrome浏览器和大多数移动端浏览器。2.2.3设置移动端的特殊样式在移动Web开发中经常会设置的特殊样式，如表所示。样式说明-webkit-tap-highlight-color:transparent;去除超链接按下时默认的高亮效果（设为透明）-webkit-appearance:none;去除按钮的原生样式-webkit-touch-callout:none;禁止长按页面时弹出菜单-webkit-user-select:none;禁止文本被手动选择2.2.3设置移动端的特殊样式编写HTML代码创建demo05.html文件，编写页面结构代码。编写CSS代码设置<a>标签样式中的-webkit-tap-highlight-color的值为transparent，清除单击高亮效果；设置按钮样式中的-webkit-appearance的值为none，用来去除按钮的原生样式。查看页面效果在浏览器页面中打开demo05.html，查看页面效果。设置特殊样式设置特殊样式2.2.3设置移动端的特殊样式编写HTML结构代码，实现页面结构。例2-5：设置特殊样式<body>

<a

href="#">超链接</a>

<input

type="button"

value="按钮"></body>HTML代码2.2.3设置移动端的特殊样式编写CSS样式代码，实现页面样式。例2-5：设置特殊样式<style>a

{-webkit-tap-highlight-color:

transparent;}input

{-webkit-appearance:

none;}</style>CSS代码2.2.3设置移动端的特殊样式在浏览器中打开demo05.html，运行结果如图所示。设置特殊样式分辨率和设备像素比2.32.3.1分辨率

先定一个小目标！了解分辨率和设备像素比2.3.1分辨率在移动端Web开发的过程中，除了要使用<meta>标签设置理想视口之外，还需要解决移动端页面中图片的显示问题。图片的显示是否清晰，与屏幕分辨率、图像分辨率和设备像素比有关。分辨率分为屏幕分辨率和图像分辨率。屏幕分辨率是指一个屏幕上可以显示多少信息，通常以像素（px）为单位来衡量。在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。2.3.1分辨率屏幕分辨率1920×1080表示水平方向含有1920个像素，垂直方向含有1080个像素，屏幕上总共有2073600个像素点。在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640×480），则屏幕上显示的像素少，单个像素点比较大，看起来会有种颗粒感。在屏幕的大小相同的情况下，如果屏幕的分辨率高（如1920×1080），则屏幕上显示的像素多，单个像素点比较小，看起来会比较清晰。2.3.1分辨率图像分辨率500×200表示这张图片在屏幕上按1:1显示时，水平方向有500个像素点（色块），垂直方向有200个像素点（色块）。图片的分辨率越低，图片越模糊。图片的分辨率越高，图片越清晰。当图片放大时，图片在屏幕上显示的像素变大，软件通过算法对图像进行了像素补充；当图片缩小时，也是通过算法将显示的图片像素进行减少。2.3.2设备像素比在传统的PC端和早期的普通手机中，屏幕上的一个像素和网页CSS中的一个像素是完全对应的。随着技术的进步，为了提高屏幕显示的细腻度，高分辨率的屏幕开始流行，一块屏幕可以显示更多的像素。随之产生了一个问题，就是同一个网页在不同分辨率的屏幕下显示效果会有大小差异，因为CSS中使用的像素是一个固定值，它不会因为屏幕分辨率而发生改变。在屏幕尺寸相同的情况下，一个12px的文字在低分辨率的屏幕中的尺寸很大，但在高分辨率的屏幕中尺寸很小。在分辨率非常高的屏幕中，文字会显得特别小，不利于浏览。2.3.2设备像素比在高分辨率屏幕中，CSS使用的像素单位和屏幕显示的像素并不是一对一的，将屏幕像素除以CSS像素得到的就是设备像素比。为了解决这个问题，高分辨率设备的操作系统会对网页画面进行缩放，让大小看上去比较舒适，而网页中使用的像素也不必修改。尤其是网页中的文字，在高分辨率屏幕下的显示效果会更加细腻。例如，当设备像素比为2时，CSS像素和屏幕像素的转换关系如图所示。CSS像素和屏幕像素的转换二倍图2.42.4.1什么是二倍图

先定一个小目标！了解什么是二倍图2.4.1什么是二倍图二倍图可以理解为当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。当一个50px×50px（CSS像素）的图片直接放到iPhone6/7/8设备中显示时，图片会被放大，长和宽都放大到原来的二倍（iPhone6/7/8的设备像素比为2），即100px×100px。2.4.1什么是二倍图编写HTML代码创建demo06.html文件，使用<img>标签引入50px×50px的图片和引入100px×100px的图片；编写页面结构代码。编写CSS代码获取到100px×100px的图片，并手动设置图片的宽度和高度为50px。这张图片就会以它原本的像素（100×100）来显示，保证了图片的原有清晰度。查看页面效果在浏览器页面中打开demo06.html，查看页面效果。二倍图的使用方法二倍图2.4.1什么是二倍图例2-6：二倍图的使用<body><!--

原图

--><img

src="images/50.png"

alt=""><!--

二倍图

--><img

src="images/100.png"

alt=""></body>编写HTML结构代码，实现页面结构。HTML代码2.4.1什么是二倍图例2-6：二倍图的使用方法<style>img:nth-child(2)

{width:

50px;height:

50px;}</style>编写CSS样式代码，实现页面样式。CSS代码2.4.1什么是二倍图在浏览器中打开demo06.html，查看二倍图的页面效果。二倍图2.4.2背景图片的缩放

先定一个小目标！掌握背景图片的缩放2.4.2背景图片的缩放除了使用<img>标签插入的图片，还会用到背景图片，所以背景图片也需要设置缩放效果。在CSS3中，提供了background-size属性用来规定背景图片的尺寸，从而达到背景图片的缩放效果。background-size设置的宽度和高度可以是像素或百分比。使用background-size的基本语法如下。background-size:背景图片的宽度背景图片的高度;基本语法2.4.2背景图片的缩放除像素或百分比以外，background-size属性还可以用其他的属性值来实现不同的缩放效果，如表所示。属性值说明cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域contain把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域2.4.2背景图片的缩放编写HTML代码创建demo07.html文件，定义<div>标签，编写页面结构代码。编写CSS代码将background属性的值设置为url(images/dog.jpg)，表示使用给定的图片作为背景，no-repeat表示不重复。查看页面效果在浏览器页面中打开demo07.html，查看初始页面效果。background-size属性的使用方法初始页面2.4.2背景图片的缩放<body><div></div></body>例2-7：background-size属性的使用方法编写HTML结构代码，实现页面结构。HTML代码2.4.2背景图片的缩放<style>div

{width:

200px;height:

200px;border:

2px

solid

red;background:

url(images/dog.jpg)

no-repeat;}</style>例2-7：background-size属性的使用方法编写CSS样式代码，实现页面样式。CSS代码2.4.2背景图片的缩放在浏览器中打开demo07.html，背景图片缩放效果如下。初始页面2.4.2背景图片的缩放设置背景图片的宽度在<div>标签的样式代码中添加background-size属性，将背景图片的宽度设置为200px，没有设置高度，浏览器会自动等比例缩放。设置图片的百分比除了设置图片的具体的尺寸大小之外，还可以通过百分比来实现背景图片的缩放效果，background-size属性的值为50%，这个百分比是相对于父盒子来说的。查看页面效果刷新浏览器页面，查看页面效果。background-size属性的使用方法设置百分比为父盒子的50%背景等比例缩放2.4.2背景图片的缩放background-size:

200px;例2-7：background-size属性的使用方法在<div>标签的样式中添加设置background-size属性值为200px的代码。2.4.2背景图片的缩放刷新浏览器页面，运行结果如图所示。背景等比例缩放2.4.2背景图片的缩放background-size:

50%;例2-7：background-size属性的使用方法在<div>标签的样式中重新设置background-size属性值为50%。2.4.2背景图片的缩放刷新浏览器页面，运行结果如图所示。设置百分比为父盒子的50%2.4.2背景图片的缩放设置background-size为cover设置background-size属性的值为cover，表示将背景图片等比例拉伸，使背景图片完全覆盖<div>盒子。设置background-size为contain设置background-size为contain，表示将背景图片的高度和宽度等比例拉伸，当宽度或者高度铺满div盒子就不再进行拉伸了。查看页面效果刷新浏览器页面，查看页面效果。background-size属性的使用方法设置为cover设置为contain2.4.2背景图片的缩放background-size:

cover;例2-7：background-size属性的使用方法在<div>标签的样式中重新设置background-size属性的值为cover，由于父盒子是正方形，图片是长方形，当把长方形等比例放大时，为了让高度占满父盒子，就会导致宽度显示不全，设置background-size属性的值为cover，表示将背景图片等比例拉伸，使背景图片完全覆盖div盒子，具体代码如下。2.4.2背景图片的缩放刷新浏览器页面，运行结果如图所示。设置为cover2.4.2背景图片的缩放background-size:

contain;例2-7：设置为contain在<div>标签的样式中重新设置background-size属性的值为contain，当浏览器进行缩放时，宽度会铺满div，而高度无法铺满，所以会出现空白，表示将背景图片的高度和宽度等比例拉伸，当宽度或者高度铺满div盒子就不再进行拉伸了。2.4.2背景图片的缩放刷新浏览器页面，运行结果如图所示。设置为contain2.4.3实现背景图片的二倍图

先定一个小目标！掌握实现背景图片的二倍图2.4.3实现背景图片的二倍图编写HTML代码创建demo08.html文件，定义<div>标签，编写页面结构代码。编写CSS代码设置<div>元素的宽度和高度为50px，并给<div>标签设置背景图片，该图片的实际大小为100px×100px，并设置背景图片的宽度和高度皆为50px。查看页面效果在浏览器页面中打开demo08.html，查看页面效果。实现背景图片的二倍图效果背景图片使用二倍图2.4.3实现背景图片的二倍图<body><div></div></body>例2-8：实现背景图片的二倍图效果编写HTML结构代码，实现页面结构。HTML代码2.4.3实现背景图片的二倍图<style>div

{width:

50px;height:

50px;border:

1px

solid

red;background:

url(images/100.png)

no-repeat;background-size:

50px

50px;}</style>例2-8：实现背景图片的二倍图效果编写CSS样式代码，通过background-size属性设置背景图片的二倍图效果。CSS代码2.4.3实现背景图片的二倍图在浏览器中打开demo08.html，查看背景图片的二倍图效果。背景图片使用二倍图SVG矢量图2.52.5.1什么是SVG

先定一个小目标！了解什么是SVG2.5.1什么是SVG网页中的图片可以分为两类，一类是小图标和简单的图形；另一类图片经常使用GIF、JPEG、PNG等格式，这些格式比较常见，但因为都是基于像素处理的，当放大时会失真，变得模糊。可缩放矢量图形（ScalableVectorGraphics，SVG）是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）。在2003年1月，SVG1.1被确立为W3C（万维网联盟）标准。2.5.1什么是SVG0102030405SVG是开放的标准，它是用XML编写的。SVG可被非常多的工具读取和修改（如记事本）。SVG与JPEG和GIF图像比起来，文件体积更小，且可压缩性更强。SVG矢量图形是可伸缩的，可在任何的分辨率下被高质量地打印，可在图像质量不下降的情况下被放大。SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）。开放读取和修改文件体积小可伸缩文本可选SVG矢量图的优势2.5.2SVG标签和样式

先定一个小目标！熟悉SVG标签和样式2.5.2SVG标签和样式SVG使用标签的方式定义各种图形，外层标签是<svg>，viewBox可以定义用来观察SVG视图的一个矩形区域，它的属性主要包括x、y、width、height，用数字表示，每个数字之间用空格或逗号隔开，表示定义一个在左上角(x,y)坐标位置，宽度为width，高度为height的矩形。常用属性如表所示。属性说明width用来控制SVG视图的宽度height用来控制SVG视图的高度viewBox定义用户视野的位置及大小2.5.2SVG标签和样式在<svg>标签的内部，可以使用SVG提供的一些预定义的标签来绘制图形，或者绘制文字。常用的内部标签如表所示。标签名说明<rect>矩形标签<circle>圆形标签<ellipse>椭圆形标签<line>线段标签<polyline>折线标签2.5.2SVG标签和样式常用的内部标签如表所示。标签名说明<polygon>多边形标签<path>路径标签<text>文字标签<tspan>类似<span>，用在<text>内部单独设置样式2.5.2SVG标签和样式SVG常用的内部标签还可以通过属性来设置样式，常用的属性如表所示。属性名属性值说明fillString定义填充颜色以及文字颜色fill-opacity0~1之间的浮点数定义填充颜色的透明度strokeString定义描边的颜色stroke-width大于0的浮点数定义描边的宽度stroke-opacity0~1之间的浮点数定义描边的颜色的透明度2.5.2SVG标签和样式SVG常用的内部标签还可以通过属性来设置样式，常用的属性如表所示。属性名属性值说明opacity0~1之间的浮点数定义整个图形元素的透明度transformtranslate(x,y)平移scale(x,y)缩放rotate(angle,[cx,cy])旋转skewX(angel)skewY(angel)倾斜2.5.2SVG标签和样式编写HTML代码创建demo09.html文件，外层写了一个<svg>标签，通过<circle>标签定义了圆形，编写页面结构代码。编写CSS代码设置svg的宽度和高度为100%，<svg>标签的cx和cy属性用来定义圆中心的x和y坐标，r属性用来定义圆的半径；fill属性用来设置填充颜色为#ddd。。查看页面效果在浏览器页面中打开demo09.html，查看页面效果。SVG的使用SVG图形2.5.2SVG标签和样式<body><svgwidth="100%"height="100%"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="#ddd"></svg></body>例2-9：SVG的使用编写HTML结构代码，实现页面结构。HTML代码2.5.2SVG标签和样式在浏览器中打开demo09.html，查看SVG圆形图片。SVG图形2.5.3从外部引入SVG文件

先定一个小目标！掌握从外部引入SVG文件2.5.3从外部引入SVG文件编写HTML文件创建demo10.html文件，定义<img>标签，编写页面结构代码。在HTML中引入circle.svg文件使用<img>标签的src属性引入circle.svg文件。定义circle.svg文件设置svg的宽度和高度为100%，<svg>标签的cx和cy属性用来定义圆中心的x和y坐标，r属性用来定义圆的半径；fill属性用来设置填充颜色为#ddd。从外部引入SVG文件<body><imgsrc="circle.svg"alt=""></body>例2-10：从外部引入SVG文件HTML代码2.5.3从外部引入SVG文件<?xmlversion="1.0"standalone="no"?><!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN""/Graphics/SVG/1.1/DTD/svg11.dtd">例2-10：从外部引入SVG文件定义circle.svg文件，并进行XML声明，其中standalone属性用来规定此SVG文档是“独立的”还是含有对外部文件的引用，此处设为no表示该SVG文档会引用一个外部文件（即第2行的DTD文件）。引用了外部的SVG的DTD文件，此处引用的是W3C提供的svg11.dtd，表示含有所有允许的SVG元素。XML声明2.5.3从外部引入SVG文件<svgwidth="100%"height="100%"version="1.1"xmlns="/2000/svg"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="#ddd"/></svg>例2-10：从外部引入SVG文件在circle.svg文件中添加代码，为<svg>标签添加了version（SVG版本）和xmlns（XML命名空间）属性，用来在XML文档中使用，并定义<circle>圆形。定义圆形本章小结本章主要讲解了视口的概念、如何利用Chrome浏览器模拟手机屏幕、如何利用<meta>标签设置视口、如何进行移动Web页面的样式编写、分辨率和设备像素比的基本概念、如何通过二倍图来提高图片清晰度，以及SVG矢量图的使用。通过本章的学习，读者应对移动Web开发中的基础知识有了一定的了解，为后面的课程奠定基础。第3章移动Web开发基础（下）《Bootstrap响应式Web开发》学习目标/Target

掌握HTML5新增API的使用

掌握移动端常用事件的使用

掌握移动端常用插件的使用章节概述/SummaryHTML5是HTML当前最新的版本，是新一代Web相关技术的总称。在HTML5中提供了很多新的特性，如文件读取、网络存储等。另外，目前多数移动端设备都使用触屏操作，使得用户逐渐摆脱了键盘和鼠标操作的束缚，人机交互更加方便。本章将针对HTML5常用API以及移动Web开发常用事件和插件进行详细讲解。目录/Contents010203HTML5常用API移动端常用事件移动端常用插件HTML5常用API3.1

先定一个小目标！掌握如何检测网络连接3.1.1检测网络连接3.1.1检测网络连接在HTML5之前，通过window.navigator.onLine来检查用户当前的网络状态，它会返回一个布尔值，false表示没有连接网络，true表示已连接网络。HTML5提供了online和offline两个事件，它们监听的都是window对象。其中，online在用户网络连接时调用，offline在用户网络断开时调用。需要注意的是，这种方式在不同浏览器会存在差异。3.1.1检测网络连接编写HTML+CSS代码创建demo01.html，定义<p>标签标签，并编写页面样式。编写JavaScript代码使用<script>标签引入jquery.min.js文件，并为window对象绑定online事件，处理网络连接状态的逻辑；绑定offline事件，处理网络断开时的逻辑。查看页面效果在浏览器打开demo01.html，查看页面显示效果。检测设备网络状态网络断开时的效果网络恢复连接时的效果3.1.1检测网络连接<style>body{padding:0;margin:0;background-color:#f7f7f7;}p{width:200px;height:40px;text-align:center;line-height:40px;margin:100pxauto;color:#fff;font-size:24px;background-color:#000;display:none;}</style><body><pclass="tips"></p></body>例3-1：检测网络连接状态编写HTML结构和CSS样式代码，实现页面效果。HTML+CSS代码3.1.1检测网络连接编写JavaScript代码。<scriptsrc="jquery.min.js"></script><script>window.addEventListener('online',function(){$('.tips').text('网络已连接').fadeIn(500).delay(1000).fadeOut();})window.addEventListener('offline',function(){$('.tips').text('网络已断开').fadeIn(500).delay(1000).fadeOut();})</script>例3-1：检测网络连接状态JavaScript代码3.1.1检测网络连接在浏览器中打开demo01.html，当断开网络连接时，效果如图所示。网络断开时的效果3.1.1检测网络连接在浏览器中打开demo01.html，当网络连接时，效果如图所示。网络恢复连接时的效果

先定一个小目标！掌握全屏操作的实现3.1.2全屏操作3.1.2全屏操作HTML5提供了requestFullscreen()方法允许用户自定义网页上任一元素的全屏显示，并提供了exitFullscreen()方法关闭全屏显示。这两个方法存在兼容性问题，不同浏览器需要添加不同的私有前缀。3.1.2全屏操作早期版本Chrome浏览器基于WebKit内核的浏览器需要添加webkit前缀，使用webkitRequestFullScreen()和webkitCancelFullScreen()来实现。早期版本Opera浏览器Opera浏览器需要添加o前缀，使用oRequestFullScreen()和oCancelFullScreen()来实现。早期版本火狐浏览器基于Gecko内核的浏览器需要添加moz前缀，使用mozRequestFullScreen()和mozCancelFullScreen()来实现。早期版本IE浏览器基于Trident内核的浏览器需要添加ms前缀，使用msRequestFullscreen()和msExitFullscreen()来实现，注意方法里的screen的s为小写形式。各类浏览器的全屏方法：3.1.2全屏操作编写HTML代码创建demo02.html，定义按钮和图片，实现页面结构。编写JavaScript代码单击“全屏显示”按钮，文档进入全屏状态，并修改背景色；单击“取消全屏”按钮，退出全屏界面；单击“是否全屏”按钮，根据返回的布尔值来判断当前是否为全屏状态。查看页面效果在浏览器打开demo02.html，查看页面显示效果。全屏操作页面初始效果3.1.2全屏操作<body><div><imgsrc="pic1.png"height="300"alt=""><buttonid="full">全屏显示</button><buttonid="cancelFull">取消全屏</button><buttonid="isFull">是否全屏</button></div></body>例3-2：全屏操作编写HTML结构代码，实现页面结构。HTML代码3.1.2全屏操作在浏览器中打开demo02.html，查看页面效果。页面初始效果3.1.2全屏操作<script>vardiv=document.querySelector('div');document.querySelector('#full').onclick=function(){if(div.requestFullscreen){div.requestFullscreen();//正常浏览器}elseif(div.webkitRequestFullScreen){div.webkitRequestFullScreen();//webkit}elseif(…){…}else{alert('暂不支持在您的浏览器中全屏');}};</script>例3-2：全屏操作编写JavaScript代码，实现全屏操作。全屏操作3.1.2全屏操作//取消全屏document.querySelector('#cancelFull').onclick=function(){if(document.exitFullscreen){div.exitFullscreen();//正常浏览器}elseif(document.webkitCancelFullScreen){document.webkitCancelFullScreen();//webkit}elseif(…){…}else{alert('暂不支持在您的浏览器中全屏');}};例3-2：全屏操作编写JavaScript代码，实现取消全屏操作。取消全屏3.1.2全屏操作单击图中的“取消全屏”按钮，即可恢复成原来的状态。全屏效果在浏览器中刷新页面，然后单击“全屏显示”按钮，效果如图所示。3.1.2全屏操作编写JavaScript代码，检测当前是否处于全屏状态。如果返回的值为false，则表明当前不是全屏状态，如果返回的值为true，则表明当前处于全屏状态，具体代码如下。document.querySelector('#isFull').onclick=function(){alert(document.webkitIsFullScreen); //webkit};例3-2：全屏操作是否全屏3.1.2全屏操作在浏览器中刷新页面，单击“是否全屏”按钮，效果如图所示。检测是否处于全屏状态3.1.3文件读取如果想要把图片的缩略图显示到页面中，这就需要用到HTML5给我们提供的文件读取接口来实现。该接口通过FileReader对象来读取本地存储的文件，然后使用File对象来指定读取的文件或数据。File对象可以是来自用户在一个元素上（如<input>）选择文件后返回的FileList对象，也可以是自由拖放操作生成的DataTransfer对象。dataTransfer对象只能访问文件的一些基本的信息。

先定一个小目标！掌握文件读取操作3.1.3文件读取3.1.3文件读取由于Web环境的特殊性，为了考虑文件安全问题，浏览器不允许JavaSctipt直接访问文件系统，使用<input>表单元素的文件域<inputtype="file">来实现文件的上传。input元素还有一个multiple属性（HTML5新增），可以实现一次上传多个文件。在用户选择文件以后，可以得到一个FileList对象，它代表所选的文件列表。<inputtype="file"multiple>基本语法3.1.3文件读取编写HTML代码创建demo03.html，定义表单控件，编写页面结构。编写JavaScript代码获取到页面中表单元素对象，然后在控制台中输出this.files的输出结果FileList对象。查看页面效果在浏览器打开demo03.html，在页面中随意选择一个文件，然后在控制台中查看this.files的输出结果。查看FileList对象查看FileList对象3.1.3文件读取编写HTML结构和JavaScript逻辑代码。<body><inputtype="file"multiple><script>varfile=document.querySelector('input');file.onchange=function(){//当用户选择文件后执行此事件console.log(this.files);//查看FileList对象};</script></body>例3-3：查看FileList对象HTML+JavaScript代码3.1.3文件读取在浏览器中打开demo03.html，查看FileList对象的文件，效果如图所示。查看FileList对象3.1.3文件读取FileList对象代表所选的文件列表，该对象是一个类数组的形式，其中包含一个或多个File对象。如果用户只选择了一个上传文件，那么只需要访问FileList对象的第一个元素，如果FileList对象是类数组对象，可以使用for循环遍历其内部的File对象。for(vari=0,numFiles=files.length;i<numFiles;i++){varfiles=files[i];

…}