Bootstrap學習總結
1.Bootstap的使用模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> 2.禁止響應式佈局
Bootstrap會自動幫你針對不同的螢幕尺寸調整你的頁面，使其在各個尺寸的螢幕上表現良好。下面我們列出瞭如何禁用這一特性，就像這個非響應式佈局例項頁面一樣。
禁止響應式佈局有如下幾步：
- 移除 此 CSS 文件中提到的設定瀏覽器視口（viewport）的標籤：。
- 通過為 .container 類設定一個 width 值從而覆蓋框架的預設 width 設定，例如 width: 970px !important; 。請確保這些設定全部放在預設的 Bootstrap CSS
檔案的後面。注意，如果你把它放到媒體查詢中，也可以略去 !important 。- 如果使用了導航條，需要移除所有導航條的摺疊和展開行為。
- 對於柵格佈局，額外增加 .col-xs-* 類或替換掉 .col-md-* 和 .col-lg-*。
不要擔心，針對超小螢幕裝置的柵格系統能夠在所有解析度的環境下展開。
3.移動裝置優先
也就是說你在自己的樣式表裡面寫的樣式是先對移動端樣式起作用的，這一點很重要
在 Bootstrap 2 中，我們對框架中的某些關鍵部分增加了對移動裝置友好的樣式。而在 Bootstrap 3 中，我們重寫了整個框架，使其一開始就是對移動裝置友好的。這次不是簡單的增加一些可選的針對移動裝置的樣式，而是直接融合進了框架的核心中。也就是說，Bootstrap 是移動裝置優先的。針對移動裝置的樣式融合進了框架的每個角落，而不是增加一個額外的檔案。
為了確保適當的繪製和觸屏縮放，需要在 之中新增 viewport 元資料標籤。
<meta name="viewport" content="width=device-width, initial-scale=1">在移動裝置瀏覽器上，通過為視口（viewport）設定 meta 屬性為 user-scalable=no
可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓你的網站看上去更像原生應用的感覺。注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">4.佈局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。注意，由於 padding 等屬性的原因，這兩種 容器類不能互相巢狀。
.container 類用於固定寬度並支援響應式佈局的容器。
<div class="container">
...
</div>.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。
<div class="container-fluid">
...
</div>5.柵格系統
柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就可以放入這些建立好的佈局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：
- “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100%
寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。 - 通過“行（row）”在水平方向建立一組“列（column）”。
你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。 - 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速建立柵格佈局。Bootstrap 原始碼中定義的 mixin
也可以用來建立語義化的佈局。 - 通過為“列（column）”設定 padding 屬性，從而建立列與列之間的間隔（gutter）。通過為 .row 元素設定負值
margin 從而抵消掉為 .container 元素設定的
padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。 - 負值的 margin就是下面的示例為什麼是向外突出的原因。在柵格列中的內容排成一行。
- 柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來建立。
- 如果一“行（row）”中包含了的“列（column）”大於 12，多餘的“列（column）”所在的元素將被作為一個整體另起一行排列。
- 柵格類適用於與螢幕寬度大於或等於分界點大小的裝置 ， 並且針對小螢幕裝置覆蓋柵格類。 因此，在元素上應用任何 .col-md-*
柵格類適用於與螢幕寬度大於或等於分界點大小的裝置 ， 並且針對小螢幕裝置覆蓋柵格類。 因此，在元素上應用任何 .col-lg-* 不存在，
也影響大螢幕裝置。
6.媒體查詢
實現響應時主要在這裡實現的。
/* 超小螢幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的程式碼，因為這在 Bootstrap 中是預設的（還記得 Bootstrap 是移動裝置優先的嗎？） */
/* 小螢幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等螢幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大螢幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }也就是說通過媒體查詢我們來寫幾套不同的樣式，實現讓網站在不同的裝置上顯示不同的效果。
7.柵格引數
8.響應式工具
