1.Bootstrap的使用場景

PC端、移動端、響應式網頁、後臺網頁等

2.注意事項：

從3.x版本開始網頁頭部必須多加一行程式碼：

<meta

name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />

意思是：預設情況下，UI佈局的寬度和移動裝置的寬度一致，縮放大小為原始大小，強制讓文件的寬度與裝置的寬度保持1:1，文件最大的寬度比例是1，且不允許使用者單擊螢幕方法瀏覽器。

3.柵格系統的主要工作原理

1).一行資料（row）必須包含在.container（固定寬度）或.container-fluid(100%寬度)中，以便為其賦予合適的對齊方式和內邊距（padding）。

2)使用（row）在水平方向建立一個列（column）。

3)具體內容應當放置在列（column）內，而且只有列（column）可以作為行（row）的直接子元素。

4)內建一大堆樣式，可以使用.row和col-xs-4（佔4個列寬度）這樣的樣式來快速建立柵格佈局。

5)通過設定padding建立列（column）之間的間隙。然後通過為第一列和最後一列設定負值的margin從而抵消掉padding的影響。

6)柵格系統中的列通過制定1-12的值表示其跨越範圍。

4.Bootstrap柵格引數

5.媒體查詢

5.1常用的引入媒體型別的方式：

1）@media方式：

@midia 媒體型別{

    選擇器{樣式程式碼...}
 

}

關鍵字

A. and關鍵字：表示同時滿足這兩者時生效

/*640px到1023px之間*/

@midia all and (min-width:640px) and (max-width:1023px){樣式程式碼...}

B. only關鍵字：用來指定某種特定的媒體型別，可以用來排除不支援媒體查詢的瀏覽器

C. not關鍵字：用來排除某種特定的媒體型別，也就是排除符合表示式的裝置

2）link方法：

<link rel="stylesheet" type="text/css" href="style1.css" media=”媒體型別”/>

6.媒體型別

7.圖片

1）響應式圖片
<img src=”...” class=”img-responsive”/>

2)圖片形狀
圓角：<img src=”...” class=”img-rounded”/>
圓形：<img src=”...” class=”img-circle”/>
圓角邊框：<img src=”...” class=”img-thumbnail”/>