我們都知道，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>
可以改變瀏覽器窗口進行查看。