瞭解如何使用 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 的應用知識。
入門
下載已編譯的 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 檔案
<!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）。然後，整體結構如下所示：
.|—— 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 是：
@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 實現更多的功能” 中，我使用了一個響應式設計示例來展示 LESS 工具如何增強 CSS 語法。Bootstrap 是一種功能強大的工具，可簡化來自該程式碼的許多關注。清單 2 是來自這篇文章的 HTML，重寫該 HTML（如 listing2.html），以便在 Bootstrap 的固定佈局網格系統中執行它，並使用 Bootstrap 的響應特性進行補充：