本章在巩固各类知识点的基础上，向读者介绍Web App类型的网站是如何被制作出来的，并拓展介绍在实际的项目开发中常见的Bootstrap框架和Swiper插件的简易使用方法。
本课要点：
一、Web App开发基础知识
1、什么是Web App
WAP网站，即wap是无线应用协议的缩写，2113一种实现移动电话与互联网结合的应用协议标准，WAP网站主要是用手机访问；
WEB即全球广域网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平5261台的分布式图形信息系统，WEB网站主要是用电脑访问。
Web App 指的是利用HTML5技术运行在手机浏览器或内置浏览器内，并且能够实现某种功能应用的移动端网站。
2、开发模式概述
目前，移动应用前端开发模式有Native App（原生APP）、Web App，以及由前两种开发模式融合后的Hybrid App（混合模式）。
1）Native App简述
自iOS和Android这两个的手机操作系统发布以来，在互联网界从此就多了一个新的名词：App（意为运行在智能的移动终端设备第三方应用程序）。
开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的Native App；一种是基于高端机的浏览器运行的Web App。
Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序，也叫本地app。一般使用的开发语言为JAVA、C++、Objective-C，通常有ios版和安卓版。
Native App因为位于平台层上方，向下访问和兼容的能力会比较好一些，可以支持在线或离线，消息推送或本地资源访问，摄像拨号功能的调取。但是由于设备碎片化，App的开发成本要高很多，维持多个版本的更新升级比较麻烦，用户的安装门槛也比较高。但是比较乐观的是，AppStore培养了一种比较好的用户付费模式。
2）Web App 简述
Web App就是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用。WAP更侧重使用网页技术在移动端做展示，包括文字、媒体文件等。而Web App更侧重“功能”，是使用网页技术实现的App。
优点：
第一、使用W3C标准的HTML语言开发，能够轻松实现跨平台，移动应用开发者不再需要考虑复杂的底层适配和跨平台开发语言的问题。与此同时，使用HTML来开发的Web App在投入上会大大的低于传统的Native App。
第二、基于当下开始普及流行的HTML5，Web App可以实现很多原本Native App才可以实现的功能，比如LBS的功能、本地数据存储、音视频播放的功能，甚至还有调用照相机和结合GPU的硬件加速功能。
第三、移动应用的迭代周期平均不到1个月，用户需要频繁的重新下载与升级。而Web App则无需用户下载，并且和传统网站一样可以动态升级。
第四、Web App有App的特性，更有Web的特性。每一个Native App在当前的用户使用场景下是相对孤立的，而Web App则可以像传统互联网网页那样相互链接，从一个Web App直接跳转到另外一个Web App。这无论是从用户的使用体验层面还是从应用之间的数据传输来看都是非常不错的选择。
3）hybrid app 简述
Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
本章节主要讲述Web App开发
3、手机屏幕基本知识
1）屏幕分辨率
像素是构成数码影像的基本单元，而屏幕分辨率通常指的是在横纵方向上的像素点数。
2）像素密度PPI
像素密度指的是屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写，像素密度越高，代表屏幕显示效果越精细。
3）网点密度DPI
网点密度（Dot Per Inch）来描述印刷品的打印精度，就是打印机可以在一英寸内打多少个点。
4）逻辑分辨率与像素倍率
物理分辨率是硬件所支持的分辨率，逻辑分辨率是软件可以达到的分辨率。逻辑分辨率乘以一个倍率得到物理分辨率，这个倍率叫做像素倍率。
常见的iOS设备屏幕参数
常见Android设备屏幕参数
二、Bootstrap框架
1、Bootstrap 是一个基于 HTML、CSS、JAVASCRIPT 的，用于快速开发 Web 应用程序和网站的前端框架。
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
Bootstrap中文网（http://www.bootcss.com）是国内获取、学习、交流的官方网站。
Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
Bootstrap 3的文件结构：
2、 Bootstrap 快速入门
使用 BootstrapCDN 从而跳过下载，将 Bootstrap 的预编译 CSS 和 JS 文件利用缓存加载到你的项目中。
内容分发网络（Content Delivery Network），CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率，其关键技术主要有内容存储和分发技术，其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
BootstrapCDN: https://www.bootcdn.cn/
所以，利用CDN，不下载也能用Bootstrap。
如何快速将 Bootstrap 引入到你的项目中？
1）CSS 文件
将 Bootstrap 的 CSS 文件以 <link> 标签的形式添加到 <head> 标签中，并放置在所有其它样式表之前就行了。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
2）JS 文件
Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说，这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。将以下 <script> 标签放到页面尾部且在 </body> 标签之前即可起作用。他们之间的顺序是： jQuery 必须排在第一位，然后是 Popper.js，最后是我们的 JavaScript 插件。
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
可以依照下面最基本的网页模板来生成自己的页面，请确保你的页面遵循了最新的设计和开发标准。也就是说，使用 HTML5 doctype 并包含 viewport meta 标签以实现正确的响应式行为。你的页面应该是这样的：
