利用 Bootstrap 进行快速 Web 开发
瀏覽器開發(fā)人員最后將其支持全都聚集在標(biāo)準(zhǔn)上，比如 HTML5、級(jí)聯(lián)樣式表 2 級(jí) (CSS2) 和 CSS3。這些標(biāo)準(zhǔn)減少了瀏覽器行為自 Web 全面啟動(dòng)開始以來困擾開發(fā)人員和設(shè)計(jì)人員的許多不合理變化。為了掩蓋遺留問題并適應(yīng)遺留瀏覽器，一些開發(fā)人員創(chuàng)作出了 Web 頁面框架。這類工具使得即使是普通人也可以開發(fā)適合大多數(shù)用戶的網(wǎng)站。
其中一個(gè)最受歡迎的 Web 頁面框架來自一個(gè)預(yù)料之外的來源。Twitter 的開發(fā)人員厭倦了設(shè)法解決用于網(wǎng)頁開發(fā)的許多不同組件。他們創(chuàng)建了單一的框架來提供 Web 頁面設(shè)計(jì)中的最常見元素，同時(shí)支持合理的靈活性。他們以 Bootstrap（一種開源項(xiàng)目）的形式與全世界共享這一工具包。
Bootstrap 以 LESS 項(xiàng)目為基礎(chǔ)，增強(qiáng)了 CSS 語言。Bootstrap 還包括基本的 CSS 元素，這些元素用于排印、表單、按鈕、表格、網(wǎng)格、導(dǎo)航、警告等。Bootstrap 的主要目標(biāo)是幫助 Web 開發(fā)人員加快其項(xiàng)目。這也是目前 GitHub 軟件庫中最受歡迎的項(xiàng)目。個(gè)人、小型團(tuán)隊(duì)，甚至大型組織都在使用 Bootstrap。
本文將向您介紹如何使用 Bootstrap 快速開發(fā)網(wǎng)站和應(yīng)用程序，包括移動(dòng)友好型應(yīng)用程序。本文反映了開發(fā)人員的觀點(diǎn)，而不是設(shè)計(jì)人員的觀點(diǎn)。要想從本文和 Bootstrap 中獲益，您需要掌握 HTML 和 CSS 的應(yīng)用知識(shí)。我在 “在 CSS 中使用 LESS 實(shí)現(xiàn)更多的功能” 中介紹的 LESS 項(xiàng)目的一些基本知識(shí)可幫助您了解本文的主要代碼示例。
入門
下載已編譯的 Bootstrap 數(shù)據(jù)包（參見?參考資料）。我在本文中使用的是 V2.3.2。下載內(nèi)容包括 Bootstrap 的關(guān)鍵元素 CSS，以及一些有用的圖像和 JavaScript 文件。您可以根據(jù)我在文中的描述為 Web 頁面提供 HTML。（參見?下載?部分，獲取本文的樣例代碼。）Bootstrap 文檔中不包含框架支持的許多設(shè)計(jì)選項(xiàng)的樣例 HTML。但是 Bootstrap 文檔頁面（盡管其本身已說明了 Bootstrap 的靈活性）還不足以解釋真正起作用的基本設(shè)計(jì)原則。
響應(yīng)式 Web 設(shè)計(jì)
查看 Web 頁面的設(shè)備包括小型移動(dòng)電話，以及大于普通臺(tái)式計(jì)算機(jī)外形規(guī)格的顯示器。在響應(yīng)式設(shè)計(jì)?中，一開始就在 Web 頁面中構(gòu)建了靈活性，這樣用戶就可以通過所有設(shè)備查看頁面。響應(yīng)式設(shè)計(jì)的核心是 CSS3?媒體查詢，這是根據(jù)設(shè)備性質(zhì)（尤其是用戶的顯示器大小）來調(diào)用 CSS 規(guī)則的一種標(biāo)準(zhǔn)方法。
對(duì)于典型開發(fā)人員啟動(dòng)的各種項(xiàng)目，我建議首先使用啟用了響應(yīng)特性的固定布局。固定布局更易于組織，而且響應(yīng)特性支持從一開始就培養(yǎng)考慮網(wǎng)站如何在移動(dòng)設(shè)備上運(yùn)行的良好習(xí)慣。如果項(xiàng)目要應(yīng)用于生產(chǎn)環(huán)境中，而且您正在與設(shè)計(jì)人員合作，那么設(shè)計(jì)人員應(yīng)能夠使您的文件適用于更加適合的其他任何模型。
針對(duì) Bootstrap 的 HTML
清單 1 是一個(gè)有用的框架 HTML 文件，用于結(jié)合使用 Bootstrap 與一個(gè)固定布局和響應(yīng)特性：
清單 1. 用于 Bootstrap 項(xiàng)目的基本框架 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 class="container">... <!-- 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 下載中，請(qǐng)注意，每個(gè) CSS 和 JavaScript 文件有兩個(gè)版本可用（例如 bootstrap.js 和 bootstrap.min.js）。第一種形式是一個(gè)常規(guī)文件，第二種形式是壓縮文件或 “縮小文件”。就像在本文中一樣，使用縮小版本即可實(shí)現(xiàn)最有效的頁面加載。
listing1.html 的開始之處的?DOCTYPE?聲明將其標(biāo)記為一個(gè) HTML5 文件。head?元素內(nèi)的meta?標(biāo)記控制移動(dòng)的小屏幕布局。（為方便起見，我將它們稱作?meta/viewport?標(biāo)記。）默認(rèn)情況下，大多數(shù)移動(dòng)設(shè)備按比例縮小 Web 頁面，使之適應(yīng)屏幕大小，就像在桌面瀏覽器窗口中一樣。這就是為什么許多網(wǎng)站上的文本和圖像在手機(jī)瀏覽器中看起來很小的原因。meta/viewport?聲明中的?initial-scale=1.0?部分禁用了這一行為，告訴設(shè)備要保持頁面的原有尺寸。該聲明表示 Web 設(shè)計(jì)人員（在本例中為 Bootstrap）已經(jīng)完成了實(shí)現(xiàn)較小屏幕的響應(yīng)式設(shè)計(jì)這一任務(wù)，所以在默認(rèn)情況下，沒必要采用蠻力方法。
稍后，清單 1?的?head?標(biāo)記是 Bootstrap CSS 的鏈接。在文件的末尾，加載 jQuery 和 Bootstrap 實(shí)用程序 JavaScript。這些腳本在末尾運(yùn)行可實(shí)現(xiàn)最佳性能。
設(shè)置代碼
當(dāng)使用 Bootstrap（或任何 Web 支持文件集）時(shí)，您可以從多種方法中選擇用來設(shè)置 HTML 和其他代碼的方法。我建議您創(chuàng)建一個(gè)文件夾來存儲(chǔ)自己的項(xiàng)目，然后將 Bootstrap 文件及其完整的文件夾結(jié)構(gòu)復(fù)制到項(xiàng)目文件夾中。將您自己的 HTML 文件放在最頂層，并將您自己的 CSS、JavaScript 和圖像文件放在相應(yīng)的 Bootstrap 子文件夾中（這些文件夾的名稱分別為 css、js 和 img）。然后，整體結(jié)構(gòu)如下所示：
. |—— 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 設(shè)備調(diào)整
meta/viewport?標(biāo)記是當(dāng)前的約定，用于將頁面調(diào)整為設(shè)備的可視瀏覽器空間。萬維網(wǎng)聯(lián)盟 (World Wide Web Consortium, W3C) 正在準(zhǔn)備一種替換機(jī)制，該機(jī)制以一種新的 CSS 規(guī)則的形式出現(xiàn)（參見?參考資料）。清單 1?中?meta/viewport?聲明的等效 CSS 是：
@viewport {width: extend-to-zoom 100%;zoom: 1.0; }目前，您可以將這個(gè)代碼包含在您的 CSS 中，并在 HTML 中保留?meta/viewport?標(biāo)記。當(dāng) CSS 形式受到廣泛支持時(shí)，您就可以刪除meta/viewport?聲明。
回頁首
網(wǎng)格系統(tǒng)
清單 1?中的主要容器?div?表示使用 Bootstrap 的固定布局。放入該容器中的 HTML 合并到了 Bootstrap 的網(wǎng)格系統(tǒng)?中。
如果還能想起曾經(jīng)看到過的大部分 Web 頁面，那么您就會(huì)認(rèn)識(shí)到它們被分成了一系列的塊。位于頁面頂部的塊可能擁有一個(gè)徽標(biāo)。導(dǎo)航可能位于左邊或右邊的塊中，而內(nèi)容索引可能也適合放在那個(gè)位置。甚至可能出現(xiàn)另一個(gè)塊包含一個(gè)腳注的情況。主要內(nèi)容本身可能被劃分成多個(gè)面板或塊。過去，Web 設(shè)計(jì)人員通過使用 CSS 盒子模型（box model）手工設(shè)置所有這些塊。
網(wǎng)格系統(tǒng)是將盒子布置（比如剛剛描述的）抽象為行和列的一種方法。Bootstrap 為此類網(wǎng)格提供了一個(gè)核心的 CSS。您可以通過使用特殊的類，通過嵌入?div?元素將內(nèi)容放置在任何布局的盒子中。
圖 1 顯示了一個(gè)有用的模板，這個(gè)模板最初由 Aaron K. White 開發(fā)，用于可視化 Bootstrap 的網(wǎng)格系統(tǒng)并規(guī)劃如何安排您的內(nèi)容（參見?參考資料）。在本文中，我做了一些修改，以便在本文中更容易讀取文本。
圖 1. Aaron K. White 的 Bootstrap 網(wǎng)格系統(tǒng)模板
Bootstrap 網(wǎng)格系統(tǒng)的每一行最多有 12 塊，每兩個(gè)塊之間留有小槽來提供間隔。您可以擁有無限數(shù)量的行，每一行的高度任您設(shè)置。每個(gè)塊是 70 像素寬，小槽是 30 像素寬。Bootstrap 還為頁面正文設(shè)置一個(gè) 30 像素的左邊距。網(wǎng)格系統(tǒng)的設(shè)計(jì)目標(biāo)是進(jìn)行基本的布置并為您分配空間，因此，在理想情況下，您只需關(guān)注要在網(wǎng)格中放入什么即可。
填充 HTML 模板
在 “在 CSS 中使用 LESS 實(shí)現(xiàn)更多的功能” 中，我使用了一個(gè)響應(yīng)式設(shè)計(jì)示例（根據(jù) developerWorks 博主 Bob Leah 的?示例）來展示 LESS 工具如何增強(qiáng) CSS 語法。Bootstrap 是一種功能強(qiáng)大的工具，可簡化來自該代碼的許多關(guān)注。清單 2 是來自這篇文章的 HTML（代碼?下載?中的 responsive.html），重寫該 HTML（如 listing2.html），以便在 Bootstrap 的固定布局網(wǎng)格系統(tǒng)中運(yùn)行它，并使用 Bootstrap 的響應(yīng)特性進(jìn)行補(bǔ)充：
清單 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 class="container"><h1>Hello world!</h1><div class="row"><div id="banner" class="span12"><!-- Photo by Jake Suttonhttp://www.flickr.com/photos/44124405407@N01/510899838 --><img src="img/sky-slim.jpg"></div> </div><div class="row"><div id="main-content" class="span8"><p>Humpts dumptus in muro sedet</p><p>Veni vidi vici</p><p>Alea iacta est</p><hr></div><div class="span4"><div class="widget-title">One</div><div class="widget-text">The quick brown fox jumps...</div><div class="widget-content"><div class="widget-title">Two</div><div class="widget-text">Over the lazy dog...</div></div> <div class="widget-content"><div class="widget-title">Three</div><div class="widget-text">To get to the other side</div></div></div> </div><div class="row"><div id="footer" class="span12">© 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 刪除了我需要在較舊的響應(yīng)式設(shè)計(jì)代碼中手動(dòng)完成的任務(wù)。因?yàn)轫撁媸褂昧?Bootstrap 的網(wǎng)格系統(tǒng)，所以我不再需要使用專門的 CSS 來操作或調(diào)整盒子大小。仔細(xì)安排可視空間的 CSS 也不需要專門的 CSS，因?yàn)?Bootstrap 網(wǎng)格在各個(gè)塊之間設(shè)置了很好的默認(rèn)值。此外，我不需要任何 CSS 來進(jìn)行媒體查詢（media query）并在設(shè)計(jì)參數(shù)中設(shè)置響應(yīng)，因?yàn)?Bootstrap 的響應(yīng)特性會(huì)負(fù)責(zé)完成這些任務(wù)。
您可以在清單 2 中看到?div?標(biāo)記的嵌套。嵌套的?div?使用了 Bootstrap 網(wǎng)格類。具有?container?類的?div?是整個(gè)固定網(wǎng)格布局的包裝程序。具有?row?類的每個(gè)?div?在網(wǎng)格中定義了盒子的一行。具有?span4?類的?div?定義了一個(gè)橫跨 4 個(gè)盒子的塊。具有?span12?類的?div?定義橫跨 12 個(gè)盒子的塊 — 頁面的整個(gè)寬度。Bootstrap 有一個(gè)?spanN?類，可橫跨從 1 到 12 的任意數(shù)量?N?的盒子。
圖 2 顯示了所生成的頁面在移動(dòng)瀏覽器中的外觀（運(yùn)行 Android 4.1.1 的 Samsung Galaxy S3 上的 Google Chrome）：
圖 2. 清單 2 中的瀏覽器輸出
特定于站點(diǎn)的 CSS
圖 2?中所示頁面的主要元素的布置是正確的。但是頁面缺少讓其更吸引眼球的樣式元素，所以我將添加一些 CSS（樣例代碼?中的 main.css）來實(shí)現(xiàn)這一目標(biāo)。Bootstrap CSS 本身是使用 LESS 編寫的，但我通常高度推薦使用 LESS 而不是純文本的 CSS。但在這個(gè)簡單示例中，清單 3 中的純文本的 CSS 就足夠用了：
清單 3. 向示例 HTML (main.css) 中添加基本設(shè)計(jì)的 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; }當(dāng)然，清單 2?中的 HTML 現(xiàn)在需要?清單 3?中的特定于站點(diǎn)的 CSS 的一個(gè)附加鏈接。在?樣例代碼?中，包含 main.css 鏈接的已更新的 HTML 位于 main.html 文件中。圖 3 顯示了結(jié)果頁面，其中的 main.css 更為美觀：
圖 3. 來自 main.html 的瀏覽器輸出
回頁首
結(jié)束語
對(duì)于我和其他許多人來說，我們的優(yōu)勢是代碼和數(shù)據(jù)，而不是視覺和其他感官設(shè)計(jì)，所以 Bootstrap 就是一個(gè)極其寶貴的工具。我可以關(guān)注一個(gè) Web 項(xiàng)目的基本代碼和數(shù)據(jù)，并將其繪成初始形狀，然后與設(shè)計(jì)人員合作來美化頁面。Bootstrap 對(duì)一些特別微妙的領(lǐng)域很有幫助，比如移動(dòng)設(shè)備設(shè)計(jì)和其他小屏幕設(shè)置。它還附帶了一個(gè)庫，其中包含按鈕、導(dǎo)航樣式和其他可重用工具。最重要的是，Bootstrap 包含的大量代碼可減少 Web 瀏覽器和平臺(tái)之間的許多令人煩惱的變化。
如此多的項(xiàng)目都在使用 Bootstrap，以至于許多人現(xiàn)在可以立即識(shí)別出基于的 Bootstrap 的站點(diǎn)。這種識(shí)別有時(shí)候可以創(chuàng)建一種非獨(dú)創(chuàng)性的效果。一名優(yōu)秀的設(shè)計(jì)人員不僅可以給使用 Bootstrap 生成的站點(diǎn)提供自己的不同字符，而且還可以確保該站點(diǎn)的基本元素和響應(yīng)元素都專用于其內(nèi)容和使用。但是，只有少數(shù)幾個(gè)項(xiàng)目開始研究這些考慮因素。Bootstrap 尤其適用于將思想的閃光點(diǎn)快速轉(zhuǎn)變?yōu)?Web 項(xiàng)目。
回頁首
下載
| wa-bootstrapcode.zip | 41KB |
參考資料
學(xué)習(xí)
- CSS Device Adaptation：關(guān)注 W3C 建議的 CSS 設(shè)備適配標(biāo)準(zhǔn)。
- “在 CSS 中使用 LESS 實(shí)現(xiàn)更多的功能”（作者：Uche Ogbuji，developerWorks，2013 年 7 月）：了解 LESS 項(xiàng)目以及響應(yīng)式 Web 設(shè)計(jì)的基礎(chǔ)知識(shí)。
- “使用 CouchDB 和 Bootstrap 設(shè)計(jì) Web 應(yīng)用程序原型”（作者：Uche Ogbuji，developerWorks，2013 年 6 月）：了解如何結(jié)合使用 Apache CouchDB 和 Bootstrap，以一種完全分離展示和數(shù)據(jù)庫層的方式快速啟動(dòng) Web 應(yīng)用程序開發(fā)。
- “Get started with CSS”（作者：Daniel J. Lewis，developerWorks，2011 年 5 月）：了解標(biāo)準(zhǔn)化的 CSS 樣式設(shè)計(jì)技術(shù)，包括 CSS 2.1 和跨瀏覽器的 CSS3。
- “使用 CSS 媒體查詢創(chuàng)建響應(yīng)式網(wǎng)站”（作者：Jeff Ball，developerWorks，2012 年 10 月）：了解如何對(duì)桌面網(wǎng)站、移動(dòng)電話和模板使用 CSS 媒體查詢。
- “響應(yīng)式 Web 設(shè)計(jì)”（作者：Ethan Marcotte，A List Apart，2010 年 5 月）：了解有關(guān)響應(yīng)式設(shè)計(jì)的更多信息。
- Code example of Responsive web design using CSS3 Media Queries：查看由 Bob Leah 編寫
總結(jié)
以上是生活随笔為你收集整理的利用 Bootstrap 进行快速 Web 开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Matplotlib Tutorial(
- 下一篇： Visual Studio配置VLFea