如何使用Bootstrap快速開發Web前端

作為一名菜鳥程序員，曾有幸參與過幾個站點的架設，感觸最深的是，前端堆砌太痛苦了!為了讓你的站點看起來美觀一點，你可能需要一點一點的去調整各個參數，反復修改，上下求索。這還只是考慮外觀的，要是再考慮交互的話，沒有一些工具在手，還真不是正常人能干的活。

世界著名社交網站Twitter的前端程序員們當然也面臨了同樣的問題，他們在解決了自己的痛苦之后，造福世界，創造了一個叫Bootstrap的開源項目，專門用于快速開發Web應用程序和網站。不得不說，他們太偉大了。

Bootstrap是一個用于快速開發Web應用程序和網站的前端框架，基于HTML、CSS和javascript?？催@三個是不是覺得有點不明覺厲?沒錯，Bootstrap幾乎包含了前端開發中你所需要的一切東西。而且，因為偉大的Twitter前端程序員們痛定思痛推己及人造福大眾，他們把Bootstrap做的非常簡潔方便，容易上手!是不是迫不及待了。
 為什么使用Bootstrap?

移動設備優先：自Bootstrap3.0起，框架包含了貫穿于整個庫的移動設備優先的樣式。就是說，你不需要專門針對移動設備進行優化、識別，Bootstrap能夠自動以優雅的方式將你的站點展現在用戶的移動設備上!在移動互聯網大行其道的今天，這一特性實在太誘人了。

瀏覽器支持：所有的主流瀏覽器都支持Bootstrap，沒錯，包括IE在內，Firefox、Opera、Chrome、Safari等等。前端程序員另一個非常頭疼的問題應該就是瀏覽器的兼容性了，你無法想象在Windows10已經放出來的今天，仍然有人在使用IE6.0，但是Web前端是不得不考慮這個的……

容易上手：只要你具備HTML和CSS的基礎知識，你就可以開始學習和使用Bootstrap!你沒聽錯，不需要專家，就是你，你可以很快上手Bootstrap!

響應式設計：查看 Web 頁面的設備包括小型移動電話，以及大于普通臺式計算機外形規格的顯示器。在響應式設計 中，一開始就在 Web 頁面中構建了靈活性，這樣用戶就可以通過所有設備查看頁面。響應式設計的核心是 CSS3 媒體查詢，這是根據設備性質(尤其是用戶的顯示器大小)來調用 CSS 規則的一種標準方法。對于典型開發人員啟動的各種項目，我建議首先使用啟用了響應特性的固定布局。固定布局更易于組織，而且響應特性支持從一開始就培養考慮網站如何在移動設備上運行的良好習慣。如果項目要應用于生產環境中，而且您正在與設計人員合作，那么設計人員應能夠使您的文件適用于更加適合的其他任何模型。Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機。在各個平臺上，你都能夠看到優雅的響應式效果!

還有好多特性，在此簡單羅列一下，雖只是簡單羅列，但是每一項對于Web前端人員來說都是十分誘人的：

?它為開發人員創建接口提供了一個簡潔統一的解決方案。
?它包含了功能強大的內置組件，易于定制。
?它還提供了基于 Web 的定制。
?它是開源的。
? ……

如何使用Bootstrap

針對 Bootstrap 的 HTML

清單 ? 是一個有用的框架 HTML 文件，用于結合使用 Bootstrap 與一個固定布局和響應特性：

清單 ? 用于 Bootstrap 項目的基本框架 HTML 文件 (listing1.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)。然后，整體結構如下所示：

CSS 設備調整

meta/viewport 標記是當前的約定，用于將頁面調整為設備的可視瀏覽器空間。萬維網聯盟 (World Wide Web Consortium, W3C) 正在準備一種替換機制，該機制以一種新的 CSS 規則的形式出現(參見 參考資料)。清單 1 中 meta/viewport 聲明的等效 CSS 是：

目前，您可以將這個代碼包含在您的 CSS 中，并在 HTML 中保留 meta/viewport 標記。當 CSS 形式受到廣泛支持時，您就可以刪除meta/viewport 聲明。本文來自：http://cda.pinggu.org/