我们都知道，bootstrap是一个优秀的前端响应式框架，栅格布局，为各种终端设备提供了一个响应式的显示。其主要原理是利用css中的媒体查询@media
@media示例
样式中增加@media screen标记
<style>
.test{
width: 500px;
height: 400px;
background-color: red;
}
@media screen and (max-width: 900px){
.test{
width: 100%;
height:200px;
background-color:blue;
}
}
</style>
<body>
<div class="test"></div>
</body>
当在不超过900像素的设备上，设置横向全拼显示，高度200px;
在bootstrap项目样式中，我们可以设置如下
<style>
.test{
height: 300px;
background: red;
}
</style>
<div class="test col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
可以改变浏览器窗口进行查看。
