利用 Bootstrap 進行快速 Web開發

developerworks發表於2013-12-24
bootWeb

　　瞭解如何使用 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)

<!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 網格系統模板

120131224102929

　　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 檔案
<!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">
          &copy; 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 中的瀏覽器輸出

220131224102954

　　特定於站點的 CSS

　　圖 2 中所示頁面的主要元素的佈置是正確的。但是頁面缺少讓其更吸引眼球的樣式元素，所以我將新增一些 CSS（樣例程式碼 中的 main.css）來實現這一目標。Bootstrap CSS 本身是使用 LESS 編寫的，但我通常高度推薦使用 LESS 而不是純文字的 CSS。但在這個簡單示例中，清單 3 中的純文字的 CSS 就足夠用了：

　　清單 3. 向示例 HTML (main.css) 中新增基本設計的 CSS

.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 的瀏覽器輸出

320131224103039

　結束語

　　對於我和其他許多人來說，我們的優勢是程式碼和資料，而不是視覺和其他感官設計，所以 Bootstrap 就是一個極其寶貴的工具。我可以關注一個 Web 專案的基本程式碼和資料，並將其繪成初始形狀，然後與設計人員合作來美化頁面。Bootstrap 對一些特別微妙的領域很有幫助，比如移動裝置設計和其他小螢幕設定。它還附帶了一個庫，其中包含按鈕、導航樣式和其他可重用工具。最重要的是，Bootstrap 包含的大量程式碼可減少 Web 瀏覽器和平臺之間的許多令人煩惱的變化。

　　如此多的專案都在使用 Bootstrap，以至於許多人現在可以立即識別出基於的 Bootstrap 的站點。這種識別有時候可以建立一種非獨創性的效果。一名優秀的設計人員不僅可以給使用 Bootstrap 生成的站點提供自己的不同字元，而且還可以確保該站點的基本元素和響應元素都專用於其內容和使用。但是，只有少數幾個專案開始研究這些考慮因素。Bootstrap 尤其適用於將思想的閃光點快速轉變為 Web 專案。

　下載

描述 名字 大小
樣例程式碼 wa-bootstrapcode.zip 41KB

　參考資料

　　學習

　　獲得產品和技術

  • Bootstrap：深入研究 Bootstrap 並在官方專案頁面上獲取程式碼。
  • Bootstrap Illustrator Template：藉助 Aaron K. White 提供的模板來繪製 Bootstrap 設計的網格。
  • 以最適合您的方式 評估 IBM 產品：下載產品試用版，線上試用產品，在雲環境中使用產品。或者在 SOA 沙盒 中花費幾小時來了解如何高效地實現面向服務的架構。

　　討論

  • 加入 developerWorks 社群。探索由開發人員推動的部落格、論壇、群組和維基，並與其他 developerWorks 使用者進行交流。 

相關文章