WEB-响应式布局

1. 响应式开发原理

1. 就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而达到适配不同设备的目的
   

2. 响应式布局容器

1. 响应式需要一个父级作为布局容器，来配合自己元素实现变化效果
2. 原理就是在不同宽度的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，
   从而实现不同屏幕下，看到不同页面布局和样式变化
3. 常见的响应式尺寸划分
   超小屏幕（手机，小于768px）：设置宽度为100%
小屏幕（平板，大于等于768px）：设置宽度为750px
中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px
大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px

3. Bootstrap前端开发框架

3.1 Bootstrap简介

1. Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JavaScript的，它简洁
   灵活，使Web开发更加快捷
   中文官网：http://www.bootcss.com/
   官网：http://getbootstrap.com/
   推荐使用：http://bootstrap.css88.com/
2. Bootstrap的优点：
   a. 标准化的html + css编码规范
   b. 提供一套简洁、直观、强悍的组件
   c. 有自己的生态圈，不断的更新迭代
   d. 让开发更简单，提高了开发的效率
3. Bootstrap版本：
   a. 2.x.x停止维护，兼容性好，代码不够简洁，功能不够完善
   b. 3.x.x目前使用最多，稳定，但是放弃了IE6-IE7。对IE8支持但界面效果不好，偏向于开发响应式布局、
       移动设备优先的W额本项目
   c. 4.x.x最新版，目前还不是很流行

3.2 Bootstrap的使用

1. 控制权在框架本身，使用者要按照框架所所规定的某种规范进行开发
2. Bootstrap使用四步曲：
   a. 创建文件夹结构
   
   b. 创建html骨架结构
   

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>