1 自適應的頁面（響應式頁面）
在不同的屏幕上（電腦、平板、手機），可以自動根據屏幕的大小來調整頁面，不用再專門爲不同屏幕設計。
2 使用 @media 查詢，你可以針對不同的屏幕大小定義不同的樣式。
//1 兼容移動設備
//device-width：當前設備的寬度
//initial-scale：初始的縮放比例（默認設置爲1.0，即代表不縮放）
//user-scalable：用戶是否可以手動縮放（默認設置爲no，因爲我們不希望用戶放大縮小頁面）
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
//2 加載兼容文件js（IE8既不支持HTML5也不支持CSS3 @media ）
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
//3 設置IE渲染方式默認爲最高(可選)
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
//4 @media
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
//媒體類型（mediaType ）
all 用於所有設備
print 用於打印機和打印預覽
screen 用於電腦屏幕，平板電腦，智能手機等。（最常用）
speech 應用於屏幕閱讀器等發聲設備
媒體功能（media feature)
max-width:定義輸出設備中的頁面最大可見區域寬度
min-width:定義輸出設備中的頁面最小可見區域寬度
3 佈局容器
//Bootstrap 需要爲頁面內容和柵格系統包裹一個 .container 容器。
//container 類用於固定寬度並支持響應式佈局的容器。
<div class="container">
...
</div>
//.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。
<div class="container-fluid">
...
</div>
4 柵格系統
//柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局
