一、Bootstrap使用
1、搭建Bootstrap頁面骨架及項目目錄結構
```
├─ /weijinsuo/ ··················· 項目所在目錄
└─┬─ /css/ ······················· 我們自己的CSS文件
├─ /font/ ······················ 使用到的字體文件
├─ /img/ ······················· 使用到的圖片文件
├─ /js/ ························ 自己寫的JS腳步
├─ /lib/ ······················· 從第三方下載回來的庫【只用不改】
├─ /favicon.ico ················ 站點圖標
└─ /index.html ················· 入口文件
約定編碼規范
HTML約定：
- 在head中引入必要的CSS文件，優先引用第三方的CSS，方便我們自己的樣式覆蓋
- 在body末尾引入必要的JS文件，優先引入第三方的JS，注意JS文件之間的依賴關系，比如bootstrap.js依賴jQuery，那就應該先引用jQuery.js然后引用bootstrap.js
CSS約定：
- 除了公共級別樣式，其余樣式全部有模塊前綴
- 盡量使用直接子代選擇器，少用簡介子代，避免錯殺
2、Bootstrap第三方依賴
jQuery——Bootstrap框架中的所有JS組件都依賴於jQuery實現
html5shiv——讓低版本瀏覽器可以識別HTML5的新標簽，如header、footer、section等
respond——讓低版本瀏覽器可以支持CSS媒體查詢功能
條件注釋：當滿足if條件時，才執行里面的文件
<!--[if lt IE 9]--> <script src="lib/html5shiv/html5shiv.min.js"></script> <script src="lib/respond/respond.min.js"></script> <!--![endif]-->
3、視口
- 視口的作用：在移動瀏覽器中，當頁面寬度超出設備，瀏覽器內部虛擬的一個頁面容器，將頁面容器縮放到設備這么大，然后展示
- 目前大多手機瀏覽器的視口（承載頁面的容器）寬度都是980；
- 視口的寬度可以通過meta標簽設置
- 此屬性為移動端頁面視口的設置，當前值表示在移動端頁面的寬度為設備的寬度，並且不縮放（縮放級別為1）
- width:視口的寬度
- initial-scale:初始化縮放
- user-scalable:是否允許用戶自行縮放（值：yes/no;1/0）
- minimum-scale:用戶最小縮放initial-scale
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width initial-scale =1 user-scalable=no"> 6 <title>傳智播客</title> 7 <!--引入樣式文件--> 8 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> 9 <!--html5shiv讓瀏覽器可以識別HTML5的新標簽--> 10 <!--respond讓低版本瀏覽器可以使用CSS3的媒體查詢--> 11 <!--[if lt IE 9]--> 12 <script src="lib/html5shiv/html5shiv.min.js"></script> 13 <script src="lib/respond/respond.min.js"></script> 14 <!--![endif]--> 15 <!--自己寫的文件默認放在最下面--> 16 <link rel="stylesheet" href="css/main.css"> 17 </head> 18 <body> 19 <h1>你好，世界！</h1> 20 <!--建議腳本放在body的最下面--> 21 <!--Bootstrap的所有組件都是依賴jquery的--> 22 <script src="lib/jquery/jquery.js"></script> 23 <script src="lib/bootstrap/js/bootstrap.js"></script> 24 <script src="js/main.js"></script> 25 26 </body> 27 </html>
4、媒體查詢
根據判斷條件，決定CSS代碼是否被執行
5、Bootstrap瀏覽順序
（1）預置樣式
預制排版樣式——按鈕樣式——表格樣式——表單樣式——圖片樣式——輔助工具類——代碼樣式——柵格系統——響應式工具類
（2）預置界面組件
導航——導航條——面包屑導航——下拉菜單——按鈕式下拉菜單——按鈕組——警告框——頁頭——分頁——列表組——面板——媒體對象——進度條——Glyphicons——大屏幕——嵌入內容——內嵌
將日常使用的一些功能塊，提前寫好，我們使用時，直接找到對應的demo，做相應調整，就可以了。
（3）javascript插件
內置組件
模態對話框——下拉菜單——滾動監聽——標簽頁——工具提示——彈出框——警告框——按鈕——折疊面板——輪播圖——吸頂效果