建站教程：利用Bootstrap進行快速Web開發

2022-08-25 分類：網站建設

了解如何使用 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> ...  </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）。然后，整體結構如下所示：

CSS 設備調整

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

@viewport { width: extend-to-zoom 99.99%; 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 網格系統模板

Web開發網站策劃 Bootstrap教程 bootstrap模板

Bootstrap 網格系統的每一行最多有 12 塊，每兩個塊之間留有小槽來提供間隔。您可以擁有無限數量的行，每一行的高度任您設置。每個塊是 70 像素寬，小槽是 30 像素寬。Bootstrap 還為頁面正文設置一個 30 像素的左邊距。網格系統的設計目標是進行基本的布置并為您分配空間，因此，在理想情況下，您只需關注要在網格中放入什么即可。

填充 HTML 模板

在 “在 CSS 中使用 LESS 實現更多的功能” 中，我使用了一個響應式設計示例來展示 LESS 工具如何增強 CSS 語法。Bootstrap 是一種功能強大的工具，可簡化來自該代碼的許多關注。清單 2 是來自這篇文章的 HTML，重寫該 HTML（如 listing2.html），以便在 Bootstrap 的固定布局網格系統中運行它，并使用 Bootstrap 的響應特性進行補充：

分享題目：建站教程：利用Bootstrap進行快速Web開發
URL鏈接：http://m.newbst.com/news33/192983.html

成都網站建設公司_創新互聯，為您提供動態網站、手機網站建設、ChatGPT、App設計、標簽優化、網站設計公司

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

建站教程：利用Bootstrap進行快速Web開發