Bootstrao

一、bootstrap介绍

当提到响应式布局，我们脑子里会出现bootstrap的概念，它有哪些特点呢？

（1）响应式（@media媒体布局）

（2）移动设备优先（meta name="viewport" content="width=device-width,initial-scale=1.0"）

（3）自定义css属性样式（data-*=""）

（4）栅栏布局（col-md-3）

1、响应式，什么又是响应式布局呢？

（1）概念：响应式web布局是让用户通过不同尺寸的浏览器都可以获得良好视觉的一种方法。是目前比较流行的一种布局方法。 

（2）实现原理：通过CSS3 Media Queries（媒体（设备）查询），媒体查询是让页面内容在不同的媒体环境下运行时可以展示不同的样式（这个样式当然是由我们来书写规定的）。

@media是CSS3中规定的属性，它可以实现针对不同媒体设备来设置不同的样式的目的。而且就算是在同一设备中它也可以在你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 

（3）应用：Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式。 
（4）@media的语法:

}

@media mediatype and|not|only (media feature) {
CSS-Code;
}