响应式布局

响应式布局

1、响应式开发

（1）、响应式开发原理

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

（2）、响应式的布局容器

	响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

2、Bootstrap前端开发框架

（1）、Bootstrap简介

Bootstrap来自Twitter（推特），是目前最受欢迎的前端架构。Bootstrap是基于Html、CSS和Javascript的，他简洁灵活，使得web开发更加快捷。
中文官网: http://www.bootcss.com/.
官网: http://getbootstrap.com/.
推荐使用: http://bootstrap.css88.com/.
优点：

• 标准化的html+css编码规范
• 提供了一套简洁、直观、强悍的组件
• 有自己的生态圈，不断的更新迭代
• 让开发更简单，提高了开发的效率

版本

目前 3版本使用最多，也是最稳定的版本！！！

（2）、Bootstrap使用

（3）、布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，教.container，他提供了两个作次用处的类
1.container类
响应式布局的容器，固定宽高
大屏（>=1200px）宽度定为1170px
中屏（>=992px）宽度定为970px
小屏（>=768px）宽度定为750px
超小屏屏（100%）

3、Bootstrap栅格系统

（1）、简介

栅格系统英文名为“grid systems”，也有人翻译为“网络系统”，他是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统回自动划分为最多12列。
Bootstrap里面container宽度式固定的，但式不同屏幕下，container的宽度不同，我们再把container划分为12等份

（2）、使用

和element-ui的栅格使用差不多！！！

（3）、响应式工具