大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公众号：Web前端之巅
- 博客园：
一、常见的响应式框架
随着Web应用变的越来越复杂，在大量的开发过程中我们发现有许多功能模块非常相似，比如轮播图、分页、选项卡、导航栏等，开发中往往会把这些具有通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，可以极大的节约开发成本，将这些通用的组件缩合到一起就形成了前端框架。
常见的响应式框架有：
1、Bootstrap
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
来自 Twitter，粉丝众多，是目前最受欢迎的前端框架。
2、Amaze UI
中国首个开源 HTML5 跨屏前端框架。
Amaze ~ 妹子UI，国人开发，后起之秀！
3、Framework7
Framework7 是一款免费、开源的移动HTML框架，主要用于开发混合手机App或者网页App，某些应用场景的体验几乎与原生开发的 iOS 和 Android 应用一模一样，同时也是一款不可获取的应用原型快速开发及展示工具。
Framework7 主要的作用就是让你有机会能够使用 HTML，CSS 和 JavaScript 简单明了地开发 iOS 和 Android 应用。Framework7 是完全开放的，它完全没有限制你进行打开脑洞的创造，同时还提供了一些解决方案。
Framework7 并不支持所有平台。为了给你带来最好的体验感受，它只专注于 iOS 和 Google Material 设计风格。
二、bootstrap
Bootstrap是当前最流行的前端UI框架(有预制界面组件)
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
Bootstrap 的所有 JavaScript 插件都依赖 jQuery。
1、BootStrap的版本了解
- 2.x.x:兼容性好 / 代码不够简洁，功能不够完善
- 3.x.x:稳定性好,放弃了IE6-IE7,对IE8的支持一般 /偏向于响应式布局开发，移动设备优先的web项目开发
- 4.x.x:测试阶段，偏向于响应式，移动设备
2、bootstrap 基本模板
<!--说明页面是html5页面--> <!DOCTYPE html> <!--页面使用的语言环境--> <html lang="zh-CN"> <head> <!--指定当前页面的字符编码--> <meta charset="utf-8"> <!--如果是IE，会使用最新的渲染引擎进行渲染--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--标准的视口设置--> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap核心样式文件 --> <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries: 这两个文件的引入是为了支持IE8下面的html5元素和媒体查询：因为在IE8下面默认不支持HTML5和媒体查询，所以需要引入两个插件--> <!-- WARNING: Respond.js doesn't work if you view the page via file:// 如果通过file://来查看文件，那么respond.js文件不能正常工作，说明必须在http://形式下访问才有用--> <!--html5shiv.min.js：为了在IE8下面支持HTML标签 respond.min.js：为了在IE8下面支持媒体查询--> <!--[if lt IE 9]> <!--只有IE9之前才会加载这两个文件 lt:less than--> <script src="../lib/html5shiv/html5shiv.min.js"></script> <script src="../lib/respond.js/respond.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) bootstrap是依赖jquery的-->
