移動設備優先: 為了讓開發的網站對移動設備友好,確保適當的繪製和觸屏縮放，需要在網頁的head之中添加viewport meat標簽：如下： <metaname="viewport"content="width=device-width, initial-scale=1.0"> 響應式圖像: 通過對 ...
移動設備優先:
為了讓開發的網站對移動設備友好,確保適當的繪製和觸屏縮放，需要在網頁的head之中添加viewport meat標簽：如下：<metaname="viewport"content="width=device-width, initial-scale=1.0">
響應式圖像:
通過對圖像添加class="img-responsive"可以讓圖像對響應式佈局設計的更好；
偽元素
http://www.w3school.com.cn/css/css_pseudo_elements.asp
Bootstrap3 css有一個申請響應的媒體查詢，在不同的媒體查詢閾值範圍內都為container設置了max-width,用以匹配網格系統.
@media (min-width: 768px) {
.container {
width: 750px;
}
網格系統
提供了一套響應式、移動設備優先的流式網格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding);
使用行來創建列的水平組；
內容應該放置在列內，且唯有列可以是行的直接子元素；
預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格佈局。其中如果有多行,那麼每行都要有.row
個人總結:如果同時定義了col-sm-* col-md-* col-lg-*,那麼如果有匹配的就會採用匹配的列模式，如果視窗應用了col-lg-*,此時刪除col-lg-*,那麼視窗佈局就會採用col-md-*。
<div class="clearfix visible-xs"></div>主要用在響應式列的重置col-md-offset-*可以實現把一個列的左外邊距(margin)增加*列. 使用 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序來實現列排序，帶有.col-md-push-*的就推到左邊,帶有.col-md-pull-*推到右邊，無關他 們在html中的順序
