Bootstrap CSS（一）
1.Bootstrap CSS 概覽
1.1HTML 5 文檔類型（Doctype）
Bootstrap 使用了一些 HTML5 元素和 CSS 屬性。為了讓這些正常工作，您需要使用 HTML5 文檔類型（Doctype）。 因此，請在使用 Bootstrap 項目的開頭包含下面的代碼段。
<!DOCTYPE html> <html> xxx </html>
如果在 Bootstrap 創建的網頁開頭不使用 HTML5 的文檔類型（Doctype），您可能會面臨一些瀏覽器顯示不一致的問題，甚至可能面臨一些特定情境下的不一致，以致於您的代碼不能通過 W3C 標準的驗證。
1.2移動設備優先
Bootstrap 3 的設計目標是移動設備優先，然後才是桌面設備。這實際上是一個非常及時的轉變，因為現在越來越多的用戶使用移動設備。
為了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪制和觸屏縮放，需要在網頁的 head 之中添加 viewport meta 標簽，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width 屬性控制設備的寬度。假設您的網站將被帶有不同屏幕分辨率的設備瀏覽，那麽將它設置為 device-width 可以確保它能正確呈現在不同設備上。
initial-scale=1.0 確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。
在移動設備瀏覽器上，通過為 viewport meta 標簽添加 user-scalable=no 可以禁用其縮放（zooming）功能。
1.3響應式圖像
<img src="..." class="img-responsive" alt="響應式圖像">
.img-responsive { display: inline-block; height: auto; max-width: 100%; }
這表明相關的圖像呈現為 inline-block。當您把元素的 display 屬性設置為 inline-block，元素相對於它周圍的內容以內聯形式呈現，但與內聯不同的是，這種情況下我們可以設置寬度和高度。
設置 height:auto，相關元素的高度取決於瀏覽器。
設置 max-width 為 100% 會重寫任何通過 width 屬性指定的寬度。這讓圖片對響應式布局的支持更友好。
1.4全局顯示、排版和鏈接
1.4.1基本的全局顯示
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff; }
1.4.2排版
使用 @font-family-base、 @font-size-base 和 @line-height-base 屬性作為排版樣式。
1.4.3鏈接樣式
通過屬性 @link-color 設置全局鏈接的顏色。
對於鏈接的默認樣式，如下設置：
a:hover, a:focus { color: #2a6496; text-decoration: underline; } a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
1.5避免跨瀏覽器的不一致
Bootstrap 使用 Normalize 來建立跨瀏覽器的一致性。
Normalize.css 是一個很小的 CSS 文件，在 HTML 元素的默認樣式中提供了更好的跨瀏覽器一致性。
1.6容器（Container）
<div class="container"> ... </div>
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
把 container 的左右外邊距（margin-right、margin-left）交由瀏覽器決定，由於內邊距（padding）是固定寬度，默認情況下容器是不可嵌套的。
1.7Bootstrap 瀏覽器/設備支持
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | 不適用 | NO | 不適用 |
| iOS | YES | 不適用 | 不適用 | NO | YES |
| Mac OS X | YES | YES | 不適用 | YES | YES |
| Windows | YES | YES | YES* | YES | NO |
2.Bootstrap 網格系統
2.1什麽是網格（Grid）？
在網頁設計中，它是一種用於快速創建一致的布局和有效地使用 HTML 和 CSS 的方法。簡單地說，網頁設計中的網格用於組織內容，讓網站易於瀏覽，並降低用戶端的負載。
2.2什麽是 Bootstrap 網格系統（Grid System）？
Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，可以隨著設備或視口大小的增加而適當地擴展到 12 列。它包含了用於簡單的布局選項的預定義類，也包含了用於生成更多語義布局的功能強大的混合類。
2.3Bootstrap 網格系統（Grid System）的工作原理
網格系統通過一系列包含內容的行和列來創建頁面布局。下面列出了 Bootstrap 網格系統是如何工作的：
- 行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
- 使用行來創建列的水平組。
- 內容應該放置在列內，且唯有列可以是行的直接子元素。
- 預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格布局。LESS 混合類可用於更多語義布局。
- 列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
- 網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4。
2.4網格選項
2.5基本的網格結構
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div>
2.6響應式的列重置
以下實例包含了4個網格，但是我們在小設備瀏覽時無法確定網格顯示的位置。
為了解決這個問題，可以使用 .clearfix class和 響應式實用工具來解決，如下面實例所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實例 - 響應式的列重置</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </p> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p> </div> </div> </div> </body> </html>View Code
瀏覽器上調整窗口大小查看變化如下
2.7偏移列
.col-xs-* 類不支持偏移，但是它們可以簡單地通過使用一個空的單元格來實現該效果。.col-xs-* 類不支持偏移，但是它們可以簡單地通過使用一個空的單元格來實現該效果。在下面的實例中，我們有 <div class="col-md-6">..</div>，我們將使用 .col-md-offset-3 class 來居中這個 div。
<div class="container"> <h1>Hello, world!</h1> <div class="row" > <div class="col-xs-6 col-md-offset-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div>
2.8列排序
Bootstrap 網格系統另一個完美的特性，就是您可以很容易地以一種順序編寫列，然後以另一種順序顯示列。
您可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 範圍是從 1 到 11。
在下面的實例中，我們有兩列布局，左列很窄，作為側邊欄。我們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。
<div class="container"> <h1>Hello, world!</h1> <div class="row"> <p> 排序前 </p> <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左邊 </div> <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右邊 </div> </div> <br> <div class="row"> <p> 排序後 </p> <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左邊 </div> <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右邊 </div> </div> </div>View Code
Bootstrap CSS（一）