原文出處： IBM developerworks
了解如何使用 Bootstrap 快速開發網站和 Web 應用程序（包括移動友好型應用程序）。Bootstrap 以 LESS 項目為基礎，由 Twitter 的內部工程師開發，它為 Web 應用程序 UI 提供了一致的框架。
瀏覽器開發人員最后將其支持全都聚集在標准上，比如 HTML5、級聯樣式表 2 級 (CSS2) 和 CSS3。這些標准減少了瀏覽器行為自 Web 全面啟動開始以來困擾開發人員和設計人員的許多不合理變化。為了掩蓋遺留問題並適應遺留瀏覽器，一些開發人員創作出了 Web 頁面框架。這類工具使得即使是普通人也可以開發適合大多數用戶的網站。
其中一個最受歡迎的 Web 頁面框架來自一個預料之外的來源。Twitter 的開發人員厭倦了設法解決用於網頁開發的許多不同組件。他們創建了單一的框架來提供 Web 頁面設計中的最常見元素，同時支持合理的靈活性。他們以 Bootstrap（一種開源項目）的形式與全世界共享這一工具包。
Bootstrap 以 LESS 項目為基礎，增強了 CSS 語言。Bootstrap 還包括基本的 CSS 元素，這些元素用於排印、表單、按鈕、表格、網格、導航、警告等。Bootstrap 的主要目標是幫助 Web 開發人員加快其項目。這也是目前 GitHub 軟件庫中最受歡迎的項目。個人、小型團隊，甚至大型組織都在使用 Bootstrap。
本文將向您介紹如何使用 Bootstrap 快速開發網站和應用程序，包括移動友好型應用程序。本文反映了開發人員的觀點，而不是設計人員的觀點。要想從本文和 Bootstrap 中獲益，您需要掌握 HTML 和 CSS 的應用知識。我在 “在 CSS 中使用 LESS 實現更多的功能” 中介紹的 LESS 項目的一些基本知識可幫助您了解本文的主要代碼示例。
入門
下載已編譯的 Bootstrap 數據包（參見 參考資料）。我在本文中使用的是 V2.3.2。下載內容包括 Bootstrap 的關鍵元素 CSS，以及一些有用的圖像和 JavaScript 文件。您可以根據我在文中的描述為 Web 頁面提供 HTML。（參見 下載 部分，獲取本文的樣例代碼。）Bootstrap 文檔中不包含框架支持的許多設計選項的樣例 HTML。但是 Bootstrap 文檔頁面（盡管其本身已說明了 Bootstrap 的靈活性）還不足以解釋真正起作用的基本設計原則。
響應式 Web 設計
查看 Web 頁面的設備包括小型移動電話，以及大於普通台式計算機外形規格的顯示器。在響應式設計 中，一開始就在 Web 頁面中構建了靈活性，這樣用戶就可以通過所有設備查看頁面。響應式設計的核心是 CSS3 媒體查詢，這是根據設備性質（尤其是用戶的顯示器大小）來調用 CSS 規則的一種標准方法。
對於典型開發人員啟動的各種項目，我建議首先使用啟用了響應特性的固定布局。固定布局更易於組織，而且響應特性支持從一開始就培養考慮網站如何在移 動設備上運行的良好習慣。如果項目要應用於生產環境中，而且您正在與設計人員合作，那么設計人員應能夠使您的文件適用於更加適合的其他任何模型。
針對 Bootstrap 的 HTML
清單 1 是一個有用的框架 HTML 文件，用於結合使用 Bootstrap 與一個固定布局和響應特性：
清單 1. 用於 Bootstrap 項目的基本框架 HTML 文件 (listing1.html)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!doctype html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello world!</h1>
<div>
... <!-- The main HTML will go here -->
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
|
縮小版本
在 Bootstrap 下載中，請注意，每個 CSS 和 JavaScript 文件有兩個版本可用（例如 bootstrap.js 和 bootstrap.min.js）。第一種形式是一個常規文件，第二種形式是壓縮文件或 “縮小文件”。就像在本文中一樣，使用縮小版本即可實現最有效的頁面加載。
listing1.html 的開始之處的 DOCTYPE 聲明將其標記為一個 HTML5 文件。head 元素內的 meta標記控制移動的小屏幕布局。（為方便起見，我將它們稱作 meta/viewport 標記。）默認情況下，大多數移動設備按比例縮小 Web 頁面，使之適應屏幕大小，就像在桌面瀏覽器窗口中一樣。這就是為什么許多網站上的文本和圖像在手機瀏覽器中看起來很小的原因。meta/viewport 聲明中的 initial-scale=1.0 部分禁用了這一行為，告訴設備要保持頁面的原有尺寸。該聲明表示 Web 設計人員（在本例中為 Bootstrap）已經完成了實現較小屏幕的響應式設計這一任務，所以在默認情況下，沒必要采用蠻力方法。
稍后，清單 1 的 head 標記是 Bootstrap CSS 的鏈接。在文件的末尾，加載 jQuery 和 Bootstrap 實用程序 JavaScript。這些腳本在末尾運行可實現最佳性能。
設置代碼
當使用 Bootstrap（或任何 Web 支持文件集）時，您可以從多種方法中選擇用來設置 HTML 和其他代碼的方法。我建議您創建一個文件夾來存儲自己的項目，然后將 Bootstrap 文件及其完整的文件夾結構復制到項目文件夾中。將您自己的 HTML 文件放在最頂層，並將您自己的 CSS、JavaScript 和圖像文件放在相應的 Bootstrap 子文件夾中（這些文件夾的名稱分別為 css、js 和 img）。然后，整體結構如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.
|—— index.html
|—— [Also any other site HTML]
|—— css
| |—— bootstrap.min.css
| |—— bootstrap-responsive.min.css
| |—— [Also nonminimized Bootstrap files plus site-specific CSS]
|—— js
| |—— bootstrap.min.js
| |—— [Also nonminimized Bootstrap files plus site-specific JavaScript]
|—— img
|—— [The PNGs that come with Bootstrap plus site-specific images]
|
CSS 設備調整
meta/viewport 標記是當前的約定，用於將頁面調整為設備的可視瀏覽器空間。萬維網聯盟 (World Wide Web Consortium, W3C) 正在准備一種替換機制，該機制以一種新的 CSS 規則的形式出現（參見 參考資料）。清單 1 中 meta/viewport 聲明的等效 CSS 是：
|
1
2
3
4
|
@viewport {
width: extend-to-zoom 100%;
zoom: 1.0;
}
|
目前，您可以將這個代碼包含在您的 CSS 中，並在 HTML 中保留 meta/viewport 標記。當 CSS 形式受到廣泛支持時，您就可以刪除meta/viewport 聲明。
網格系統
清單 1 中的主要容器 div 表示使用 Bootstrap 的固定布局。放入該容器中的 HTML 合並到了 Bootstrap 的網格系統 中。
如果還能想起曾經看到過的大部分 Web 頁面，那么您就會認識到它們被分成了一系列的塊。位於頁面頂部的塊可能擁有一個徽標。導航可能位於左邊或右邊的塊中，而內容索引可能也適合放在那個位置。 甚至可能出現另一個塊包含一個腳注的情況。主要內容本身可能被划分成多個面板或塊。過去，Web 設計人員通過使用 CSS 盒子模型（box model）手工設置所有這些塊。
網格系統是將盒子布置（比如剛剛描述的）抽象為行和列的一種方法。Bootstrap 為此類網格提供了一個核心的 CSS。您可以通過使用特殊的類，通過嵌入 div 元素將內容放置在任何布局的盒子中。
圖 1 顯示了一個有用的模板，這個模板最初由 Aaron K. White 開發，用於可視化 Bootstrap 的網格系統並規划如何安排您的內容（參見 參考資料）。在本文中，我做了一些修改，以便在本文中更容易讀取文本。
圖 1. Aaron K. White 的 Bootstrap 網格系統模板
Bootstrap 網格系統的每一行最多有 12 塊，每兩個塊之間留有小槽來提供間隔。您可以擁有無限數量的行，每一行的高度任您設置。每個塊是 70 像素寬，小槽是 30 像素寬。Bootstrap 還為頁面正文設置一個 30 像素的左邊距。網格系統的設計目標是進行基本的布置並為您分配空間，因此，在理想情況下，您只需關注要在網格中放入什么即可。
填充 HTML 模板
在 “在 CSS 中使用 LESS 實現更多的功能” 中，我使用了一個響應式設計示例（根據 developerWorks 博主 Bob Leah 的 示例）來展示 LESS 工具如何增強 CSS 語法。Bootstrap 是一種功能強大的工具，可簡化來自該代碼的許多關注。清單 2 是來自這篇文章的 HTML（代碼 下載 中的 responsive.html），重寫該 HTML（如 listing2.html），以便在 Bootstrap 的固定布局網格系統中運行它，並使用 Bootstrap 的響應特性進行補充：
清單 2. 用於 Bootstrap (listing2.html) 的示例 HTML 文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!doctype html>
<html lang="en-US">
<head>
<title>Responsive Bootstrap page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<div>
<h1>Hello world!</h1>
<div>
<div id="banner">
<!-- Photo by Jake Sutton
http://www.flickr.com/photos/44124405407@N01/510899838 -->
<img src="img/sky-slim.jpg">
</div>
</div>
<div>
<div id="main-content">
<p>Humpts dumptus in muro sedet
</p>
<p>Veni vidi vici
</p>
<p>Alea iacta est
</p>
<hr>
</div>
<div>
<div>One</div>
<div>
The quick brown fox jumps...
</div>
<div>
<div>Two</div>
<div>
Over the lazy dog...
</div>
</div>
<div>
<div>Three</div>
<div>
To get to the other side
</div>
</div>
</div>
</div>
<div>
<div id="footer">
© Nobody! This document is placed in the public domain.
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
|
在 清單 2 中，Bootstrap 刪除了我需要在較舊的響應式設計代碼中手動完成的任務。因為頁面使用了 Bootstrap 的網格系統，所以我不再需要使用專門的 CSS 來操作或調整盒子大小。仔細安排可視空間的 CSS 也不需要專門的 CSS，因為 Bootstrap 網格在各個塊之間設置了很好的默認值。此外，我不需要任何 CSS 來進行媒體查詢（media query）並在設計參數中設置響應，因為 Bootstrap 的響應特性會負責完成這些任務。
您可以在清單 2 中看到 div 標記的嵌套。嵌套的 div 使用了 Bootstrap 網格類。具有 container 類的 div 是整個固定網格布局的包裝程序。具有 row 類的每個 div 在網格中定義了盒子的一行。具有 span4 類的 div 定義了一個橫跨 4 個盒子的塊。具有 span12 類的 div 定義橫跨 12 個盒子的塊 — 頁面的整個寬度。Bootstrap 有一個 spanN 類，可橫跨從 1 到 12 的任意數量 N 的盒子。
圖 2 顯示了所生成的頁面在移動瀏覽器中的外觀（運行 Android 4.1.1 的 Samsung Galaxy S3 上的 Google Chrome）：
圖 2. 清單 2 中的瀏覽器輸出
特定於站點的 CSS
圖 2 中所示頁面的主要元素的布置是正確的。但是頁面缺少讓其更吸引眼球的樣式元素，所以我將添加一些 CSS（樣例代碼 中的 main.css）來實現這一目標。Bootstrap CSS 本身是使用 LESS 編寫的，但我通常高度推薦使用 LESS 而不是純文本的 CSS。但在這個簡單示例中，清單 3 中的純文本的 CSS 就足夠用了：
清單 3. 向示例 HTML (main.css) 中添加基本設計的 CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.widget-content {
margin: 10px;
padding: 1px;
background-color: #DDDDDD;
}
.widget-title {
font-weight: bold;
padding: 10px;
background-color: #EEEEEE;
}
.widget-text {
padding: 10px;
background-color: #FCFCFC;
}
#footer {
text-align: center;
font-size: small;
}
|
當然，清單 2 中的 HTML 現在需要 清單 3 中的特定於站點的 CSS 的一個附加鏈接。在 樣例代碼 中，包含 main.css 鏈接的已更新的 HTML 位於 main.html 文件中。圖 3 顯示了結果頁面，其中的 main.css 更為美觀：
圖 3. 來自 main.html 的瀏覽器輸出
結束語
對於我和其他許多人來說，我們的優勢是代碼和數據，而不是視覺和其他感官設計，所以 Bootstrap 就是一個極其寶貴的工具。我可以關注一個 Web 項目的基本代碼和數據，並將其繪成初始形狀，然后與設計人員合作來美化頁面。Bootstrap 對一些特別微妙的領域很有幫助，比如移動設備設計和其他小屏幕設置。它還附帶了一個庫，其中包含按鈕、導航樣式和其他可重用工具。最重要的 是，Bootstrap 包含的大量代碼可減少 Web 瀏覽器和平台之間的許多令人煩惱的變化。
如此多的項目都在使用 Bootstrap，以至於許多人現在可以立即識別出基於的 Bootstrap 的站點。這種識別有時候可以創建一種非獨創性的效果。一名優秀的設計人員不僅可以給使用 Bootstrap 生成的站點提供自己的不同字符，而且還可以確保該站點的基本元素和響應元素都專用於其內容和使用。但是，只有少數幾個項目開始研究這些考慮因素。 Bootstrap 尤其適用於將思想的閃光點快速轉變為 Web 項目。
下載
| 描述 | 名字 | 大小 |
|---|---|---|
| 樣例代碼 | wa-bootstrapcode.zip | 41KB |
參考資料
學習
- CSS Device Adaptation：關注 W3C 建議的 CSS 設備適配標准。
- “在 CSS 中使用 LESS 實現更多的功能”（作者：Uche Ogbuji，developerWorks，2013 年 7 月）：了解 LESS 項目以及響應式 Web 設計的基礎知識。
- “使用 CouchDB 和 Bootstrap 設計 Web 應用程序原型”（作者：Uche Ogbuji，developerWorks，2013 年 6 月）：了解如何結合使用 Apache CouchDB 和 Bootstrap，以一種完全分離展示和數據庫層的方式快速啟動 Web 應用程序開發。
- “Get started with CSS”（作者：Daniel J. Lewis，developerWorks，2011 年 5 月）：了解標准化的 CSS 樣式設計技術，包括 CSS 2.1 和跨瀏覽器的 CSS3。
- “使用 CSS 媒體查詢創建響應式網站”（作者：Jeff Ball，developerWorks，2012 年 10 月）：了解如何對桌面網站、移動電話和模板使用 CSS 媒體查詢。
- “響應式 Web 設計”（作者：Ethan Marcotte，A List Apart，2010 年 5 月）：了解有關響應式設計的更多信息。
- Code example of Responsive web design using CSS3 Media Queries：查看由 Bob Leah 編寫的適用於本文的響應式設計的代碼示例。
- 關注 Twitter 上的 developerWorks。
- developerWorks 演示中心：觀看演示，從為初學者准備的產品安裝，到為經驗豐富的開發人員准備的高級功能。
獲得產品和技術
- Bootstrap：深入研究 Bootstrap 並在官方項目頁面上獲取代碼。
- Bootstrap Illustrator Template：借助 Aaron K. White 提供的模板來繪制 Bootstrap 設計的網格。
- 以最適合您的方式 評估 IBM 產品：下載產品試用版，在線試用產品，在雲環境中使用產品。或者在 SOA 沙盒 中花費幾小時來了解如何高效地實現面向服務的架構。