BootStrap佈局
1、BootStrap佈局
- CSS組件主要包括柵格系統、列表組、進度條、icon圖標、導航欄等組件。
- JavaScript插件主要有動畫效果、窗體模式、下拉菜單、選項卡等
2、網格系統
- Bootstrap內置了一套響應式、移動優先的流式柵格系統，隨着屏幕設備或可視窗口（viewport）尺寸的增長，系統會自動分爲最多12列。柵格系統是經過定義容器的大小，平均分紅若干份，最大是12份，也能夠本身定義柵格份數，再調整內邊距和外邊距，最後結合媒體查詢，就能製做出強大的柵格系統。
- 柵格系統的工做原理
- 行必須放置在 .container class內，以便得到適當的對齊(alignment)和內邊距(padding)
- 使用行來建立列的水平組
- 內容應該放置在列內，且惟有列能夠是行的直接子元素
- 預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局
- 列經過內邊距(padding)來建立列內容之間的間隙，而後用第一列和最後一列設置負值margin來抵消padding的影響。該內邊距是經過 .rows 上的外邊距(margin)取負，表示第一列和最後一列的行偏移。
- 網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4
- 媒體查詢
-
/* 超小設備（手機，小於 768px） */ /* Bootstrap 中默認狀況下沒有媒體查詢 */
-
/* 小型設備（平板電腦，768px 起） * /@media (min-width: @screen-sm-min) { ... }
-
/* 中型設備（臺式電腦，992px 起） */@media (min-width: @screen-md-min) { ... }
-
/* 大型設備（大臺式電腦，1200px 起） */@media (min-width: @screen-lg-min) { ... }
-
須要適配4種類型的瀏覽器，分別是超小屏 .col-xs-、小屏 .col-sm-、中屏 .col-md-、大屏 .col-lg-
-
基本網格結構
-
-
偏移列： .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增長 * 列，其中 * 範圍是從 1 到 11
-
列排序[交換]： .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 範圍是從 1 到 11[互換順序]
-
嵌套列
-
爲了在內容中嵌套默認的網格，請添加一個新的 .row，並在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12
-
超小屏 .col-xs-、小屏 .col-sm-、中屏 .col-md-、大屏 .col-lg-
-
注意點：
-
默認柵格系統沒有邊框，若是須要則須要手動編寫樣式表添加邊框；
- 類樣式名稱必定要使用Bootstrap內置的樣式名稱，不然不能覆蓋；
- 不管是總列數大於12，仍是樣式表中設置的列數和大於12，都會將多餘的部分折到下一行，所以列數總和不能大於12，不過，若是總數小於12列，全部列是左對齊，就是從左到右排列，最後在右側留有空白；
3、CSS佈局概要
- 移動端先行
- 響應式圖片
- <img src="..." class="img-responsive" alt="響應式圖像">
- 經過添加 img-responsive class 可讓 Bootstrap 3 中的圖像對響應式佈局的支持更友好。圖片和其它元素不一樣，不一樣圖片的分辨率、寬高比例時不同的，若是隨意改變，會使圖片失真、變形等
- Normalize.css 一個很小的 CSS 文件，在 HTML 元素的默認樣式中提供了更好的跨瀏覽器一致性
- 基礎排版
- 以前用reset.css 文件用於重置掉全部的瀏覽器自帶的樣式，利於保持各瀏覽器渲染的一致性
- 排版類
- 禁用響應式佈局
- 步驟1： 刪除名稱爲viewport的meta元數據
- 步驟2：爲.container設置一個固定的寬度值，從而覆蓋框架的默認width設置，例如設置width：970px ！Important；確保這些設置所有放在默認的Bootstrap.min.css後面；
- 步驟3： 若是使用了導航組件，還須要移除全部的摺疊行爲和展開行爲
- 步驟4： 對於柵格佈局，額外增長.col-xs-*樣式，或者替換.col-md-*和.col-lg-*樣式，超小屏幕設備的柵格系統樣式能夠適用於全部分辨率的環境
- * 對於IE8來講，因爲仍然須要媒體查詢語法，因此還須要引入respond.js文件，這樣就禁用了Bootstrap對小屏幕設備的響應式支持
4、BootStrap基礎規律
- .active class 激活
- .disabled class 禁用
- 顏色
輔助css