一、bootstrap 的使用
1.下載bootstrap
可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。當您點擊這個鏈接時，您將看到如下所示的網頁
會看到兩個按鈕：
- Download Bootstrap：下載 Bootstrap。點擊該按鈕，您可以下載 Bootstrap CSS、JavaScript 和字體的預編譯的壓縮版本。不包含文檔和最初的源代碼文件。
- Download Source：下載源代碼。點擊該按鈕，您可以直接從 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代碼。
2.使用bootstrap
使用bootstrap的時候，只需要導入bootstrap的文件就行了，有兩種方法導入
1.本地安裝
用<link>標簽調用css樣式
2.在線安裝
<!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
二、響應式設計
1.認識響應式設計
響應式設計可以使網頁適應於不同的設備，在現階段，響應式web設計的實現途徑包括：彈性網格、液態布局、使用css media query技術等。
2.設計流程
1.確定需要兼容的設備類型，屏幕尺寸
2.制作線框原型並進行測試
3.視覺設計
4.腳本實現
3.設計響應式布局結構
因為網頁會根據屏幕寬度自動調整布局，所以，不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。
1. 設置 Meta 標簽
大多數移動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標簽來進行重置。下面的視圖標簽告訴瀏覽器，使用設備的寬度作為視圖寬度並禁止初始的縮放。在<head>標簽里加入這個meta標簽。
2.通過媒介查詢來設置樣式media queries
media queries是響應式設計的核心，若要定義一個屏幕的寬度范圍以及自定義類樣式，可以這樣寫：
@media screen and (min-width: 100px) and (max-width: 640px) {
.Myclass{
...
...
}
}
三、柵格系統
1.柵格系統工作原理
1.row(行)必須包含在.container中，以便為其賦予合適的排列和內補
2.使用row在水平方向創建一組列（列寬總個數應為12個）
3.網頁內容要放在列內，只有列能作為行的直接子元素。下面的代碼就是不合理的
<div class="row"> <h1>固定布局</h1> <div class="col-md-4">列寬4個</div> <div class="col-md-8">列寬8格</div> </div>
4.可以通過padding創建列之間的間隔
.col-1{
padding-left: 15px;
padding-right: 15px;
}
5.柵格系統的列是通過制定1到12的值來指定范圍的，比如
<div class="row"> <div class="col-md-4">列寬4個</div> <div class="col-md-8">列寬8格</div> </div>
2.固定柵格與流式柵格
使用.container 和 .container-fluid分別設計
<h1>固定布局</h1> <div class="container" > <div class="row"> <div class="col-md-4">列寬4個</div> <div class="col-md-8">列寬8格</div> </div> </div> <h1>流式布局</h1> <div class="container-fluid" > <div class="row"> <div class="col-md-4">4個</div> <div class="col-md-8">8格</div> </div> </div>
效果如下：
3.列的基本操作
1.列偏移
使用offset系列類實現該功能
<div class="row"> <div class="col-md-4">列寬4個</div> <div class="col-md-6 col-md-offset-2">列寬6格 偏移2格</div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4">列寬4個 偏移4格</div> </div>
2.列排序
列排序通過push 和 pull 兩個類實現，push向右偏移，pull表示向左偏移
<div class="row"> <div class="col-md-4 col-md-push-8">左列，顯示在右側</div> <div class="col-md-6 col-md-pull-4">中間，在左側</div> <div class="col-md-2 col-md-pull-4">右列，在中間</div> </div>