开发者学堂课程【移动Web前端开发：Bootstrap-简介】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8440
Bootstrap-简介
一、Bootstrap 的介绍
1.响应式原理是什么？
通过查询 screen 的宽度来指定某个宽度区间的网页布局。
CSSS3 中的 Media Query (媒介查询)
超小屏幕(移动设备) 768pxl 以下
小屏设备768px-992px
中等屏幕 992px-1200px 宽屏设备1200px以上
2.总结：
（1）移动 web 开发和响应式开发都是现在主流的开发模式.
（2）使用的都是流式布局，来适配不同设备。
（3）由于终端设备的多样化，新建站的站点会优先用响应式来开发。
3.Bootstarp 框架：
最流行的前端 UI 框架（有预制界面组件）。
（1）简介：
Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。2010 年 6 月， Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后， Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。
4.特点：
组件简洁大方，代码规范精简，界面自定义性强。
(1).跨设备、跨浏览器
可以兼容所有现代浏览器，包括比较诟病的 IE7、8。当然，我们不再考虑 IE9 以下浏览器，没意思的。
(2).响应式布局
不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切换显示。
(3).提供的全面的组件
Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。
(4).内置 jQuery 插件
Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种常规特效。
(5).支持 HTML5、CSS3
HTML5 语义化标签和 CSS3 属性，都得到很好的支持。
(6).支持 LESS 动态样式
LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。
目的：提高web 开发效率。
bootstrap官网：
5.为什么使用 bootstrap:
（1）有自己的生态圈，不断的更新迭代。
（2）提供了—套简洁、直观、强悍的组件。
（3）标准化的 htmlt.css 编码规范。
（4）让开发更简单，提高了开发的效率。
注意:虽然界面组件样式已经定义好了，但是扩展性相对较强，还可以进行自定义操作，修改默认样式。
6.Bootstrap 版本：
（1）x.x停止维护
优点∶兼容性好
缺点∶代码不够简洁，功能不够完善。
（2）x.x目前使用最多
稳定，但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好。偏向用于开发响应式布局、移动设备优先的 WEB 项目。
（3）x.x测试阶段
更偏响应式，移动设备。
