<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<!--判斷瀏覽器ie 9以下的版本執行這個代碼-->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery1.12.4.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
.row div{border: 1px solid red;margin-top: 5px;}
.row{border:1px solid #000000;}
</style>
<div class="container"> <div class="row col-md-12 visible-lg-block">3</div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">1</div> <div class="col-xs-12 col-md-6 col-md-4">2</div> </div> </div>
響應式與自適應的原理是相似的，都是檢測設備，根據不同的設備采用不同的css，而且css都是采用的百分比的，而不是固定的寬度，不同點是響應式的模板在不同的設備上看上去是不一樣的，會隨着設備的改變而改變展示樣式，而自適應不會，所有的設備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據設備采用不同的展示樣式，流式就是采用了一些設置，當寬度大於多少時怎么展示，小於多少時怎么展示，而且展示的方式向水流一樣，一部分一部分的加載，靜態的就是采用固定寬度的了。
靜態布局（Static Layout）：即傳統Web設計搜索，對於PC設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；對於移動設備，單獨設計一個布局，使用不同的域名如wap.或m.。
自適應布局（Adaptive Layout）：自適應布局（Adaptive）的特點是分別為不同的屏幕分辨率定義布局。布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨窗口大小的調整發生變化。你可以把自適應布局看作是靜態布局的一個系列。
流式布局（Liquid Layout）：流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。
響應式布局（Responsive Layout）：分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨着窗口調整而自動適配。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
靜態布局：意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫代碼的布局來布置；
自適應布局：就是說你看到的頁面，里面元素的位置會變化而大小不會變化；設置百分比寬，沒有一定（沒有固定數值，不會寫死數值）的寬；
流式布局：你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。
自適應布局：每個屏幕分辨率下面會有一個布局樣式，同時位置會變而且大小也會變。
響應式布局：一份代碼適應多個設備，響應式包括自適應，響應式布局是基於css3之上，所以 ie9 以下不支持響應式