bootstrap實戰練習中涉及的知識點（很有用哦！）
看的有關視訊做的筆記，對bootstrap中涉及的知識點做了一定的解析，很有用哦！（新手上路，有不合適的地方可以指出哦！）
下面進入正題：
Bootstrap是當下最流行的前端框架（介面工具集）
特點就是靈活簡介，程式碼優雅，美觀大方
其目的就是為了讓web開發更敏捷
是Twitter公司的兩名前端工程師Mark Otto和Jacob Thornton在2011年發起的，並利用課餘時間完成第一個版本的開發。
框架：庫 lib library
jQuery作為一個框架來講，提供了一套比較便捷的操作DOM的方式
把大家都需要的功能預先寫好的一些檔案，這就是一個框架
為什麼使用Bootstrap?
生態圈火，不斷地更新迭代
提供一套美觀大方的介面元件
提供一套優雅的html+css編碼規範
簡單的說：
Bootstrap讓我們的web開發更簡單，更快捷
注意：使用bootstrap並不代表不用寫css樣式，而是不用寫 絕大多數大家都會用到的樣式
瞭解：
視口的作用：在移動瀏覽器中，當頁面寬度超出裝置的寬度，瀏覽器內部虛擬了一個頁面容器縮放到裝置這麼大，然後展示。
目前大多數手機瀏覽器的視口（承載頁面的容器）寬度都是980；
視口的寬度是可以通過meta標籤設定。
width:視口的寬度
initial-scale:初始化縮放
user-scalable:是否允許使用者自行縮放（yes/no,1/0）
minimum-scale:最小縮放,一般設定了使用者不允許縮放就沒必要設定最小最大縮放了
maxmum-scale:最大縮放
meta:vp 是下面這一行的快捷寫法
<meta name="viewport" content="width=device-width, initial-scale=1.0">
條件註釋：
<!--條件註釋的作用就是當判斷條件滿足時，就會執行註釋中的HTML程式碼
不滿足時會當做註釋忽略掉-->
一般來說第三方引入的庫我們放在上面，自己寫的定義在下面
原因：容易覆蓋
/*媒體查詢 當使用min-width作為判斷條件一定要從小到大 其原因是css從上往下執行*/
可以寫兩個判斷條件
@media (min-width:768px) and (max-width:992px){
/*這裡的程式碼只有當條件滿足時才會執行*/
.container{
width: 750px;
}
}
建議以後在HTML中將指令碼的引入放到頁面最底下
container類
用於定義一個固定寬度且居中的版心
字型圖示格式：
eot:embedded-opentype
svg:svg
ttf:truetype
woff:woff
+號選擇器就是說我找滿足這個條件他後面的兄弟元素
bbg網站可以自己製作按鈕然後生成的程式碼做bootstrap擴充套件程式碼
下面這是電腦自帶的字型，就不用@font-face
Icommon.io
上這個網站可以將自己製作的圖示匯入轉換
設定圖片的名字、字首
download下載下來
第三方依賴
jQuery
bootstrap框架中的所有js元件都依賴於jQuery實現
html5shiv
讓低版本的瀏覽器可以識別HTML5的新標籤，如header、footer、section等
respond
讓低版本得瀏覽器可以支援CSS媒體查詢功能
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
基礎css這塊只是將我們以前常用的介面元素做了樣式美化，如果需要使用，找到相應類名加到元素上
就是將我們日常使用的一些功能塊例如下拉選單提前寫好，我們使用時直接找到對應的demo,作相應調整。
製表符，這是在寫專案時所需要的
例：
約定編碼規範：
html約定：
在head中引入必要的css檔案，優先使用第三方的css,方便我們自己的樣式覆蓋
在body末尾引入必要的js檔案，優先引用第三方的js，注意js檔案之間的依賴關係，比如bootstrap.js依賴jQuery，那就應該先引用jQuery.js然後引用bootstrap.js
css約定：
除了公共級別樣式，其餘樣式全部由 模組字首
儘量使用 直接子代選擇器，少用間接子代，避免獵殺
favicon站點圖示
<link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico”>
html中插入圖表連結，可以通過emmet link:favicon插入
在我們預設的樣式表中將預設字型設定為：
構建頁面結構：
Ctrl+f查詢搜尋
Font-family：後面寫字型的時候什麼時候用引號什麼時候不用引號？
當後面有空格的時候用引號，沒有空格的時候可以不用引號
hover圖片展示:
例：
.mobile-link:hover>img{
Display:block;
}
按鈕樣式生成：線上生成按鈕網站推薦：http://blog.koalite.com/bbg/
小螢幕隱藏：
visible-xx-xx：最後一個xx是決定顯示時的display到底是啥
行內元素，行內塊級元素，塊級元素
Bootstrap擴充套件
通過bootstrap文件對導航條樣式的設定發現，其實本身是有一個類似於主題的概念
navbar-default:預設的外觀
navbar-inverse:暗色背景的樣式
所以我們希望可以通過自定義一套完整的風格
例：
navbar-itcast
.navbar-itcast{
……
}
具體程式碼參考navbar-default實現即可
小技巧：谷歌瀏覽器開發工具儲存修改
步驟：
在source中，
左邊右鍵點選會出現一行字，然後點選
點選允許
然後在下面index.html上點選,其中有一行 map to file ……
點一下會自動出現一個選項
點選，只要這兩個檔案一匹配，其他的結構會自動匹配
這樣就可以實現在瀏覽器下面修改原始碼了
在一個較小螢幕下展示一個超寬的圖片，想讓圖片居中顯示
有兩種方法：
1. 背景圖
2. position-absolute-left 50% margin-left=-width/2
background的使用：
background-size:cover;鋪滿,是按照較小的邊縮放到目標大小為止
background-size:contain;鋪滿,是按照較大的邊縮放到目標大小為止
background-size:length;就是一個具體的值 如：100px 一般來說設定兩個，一個橫向的一個縱向的
background-size:percentage;百分比 如90% 90%
圖片響應式：
目的：
各種終端都需要正常顯示圖片
移動端應該使用更小（體積）的圖片
未完，後續會不斷更新……
&n