建站教程：利用Bootstrap進行快速Web開發(fā)

2022-08-25    分類： 網(wǎng)站建設(shè)

了解如何使用 Bootstrap 快速開發(fā)網(wǎng)站和 Web 應(yīng)用程序（包括移動友好型應(yīng)用程序）。Bootstrap 以 LESS 項目為基礎(chǔ)，由 Twitter 的內(nèi)部工程師開發(fā)，它為 Web 應(yīng)用程序 UI 提供了一致的框架。

瀏覽器開發(fā)人員最后將其支持全都聚集在標(biāo)準上，比如 HTML5、級聯(lián)樣式表 2 級 (CSS2) 和 CSS3。這些標(biāo)準減少了瀏覽器行為自 Web 全面啟動開始以來困擾開發(fā)人員和設(shè)計人員的許多不合理變化。為了掩蓋遺留問題并適應(yīng)遺留瀏覽器，一些開發(fā)人員創(chuàng)作出了 Web 頁面框架。這類工具使得即使是普通人也可以開發(fā)適合大多數(shù)用戶的網(wǎng)站。

其中一個最受歡迎的 Web 頁面框架來自一個預(yù)料之外的來源。Twitter 的開發(fā)人員厭倦了設(shè)法解決用于網(wǎng)頁開發(fā)的許多不同組件。他們創(chuàng)建了單一的框架來提供 Web 頁面設(shè)計中的最常見元素，同時支持合理的靈活性。他們以 Bootstrap（一種開源項目）的形式與全世界共享這一工具包。

Bootstrap 以 LESS 項目為基礎(chǔ)，增強了 CSS 語言。Bootstrap 還包括基本的 CSS 元素，這些元素用于排印、表單、按鈕、表格、網(wǎng)格、導(dǎo)航、警告等。Bootstrap 的主要目標(biāo)是幫助 Web 開發(fā)人員加快其項目。這也是目前 GitHub 軟件庫中最受歡迎的項目。個人、小型團隊，甚至大型組織都在使用 Bootstrap。

本文將向您介紹如何使用 Bootstrap 快速開發(fā)網(wǎng)站和應(yīng)用程序，包括移動友好型應(yīng)用程序。本文反映了開發(fā)人員的觀點，而不是設(shè)計人員的觀點。要想從本文和 Bootstrap 中獲益，您需要掌握 HTML 和 CSS 的應(yīng)用知識。

入門

下載已編譯的 Bootstrap 數(shù)據(jù)包。我在本文中使用的是 V2.3.2。下載內(nèi)容包括 Bootstrap 的關(guān)鍵元素 CSS，以及一些有用的圖像和 JavaScript 文件。您可以根據(jù)我在文中的描述為 Web 頁面提供 HTML。Bootstrap 文檔中不包含框架支持的許多設(shè)計選項的樣例 HTML。但是 Bootstrap 文檔頁面（盡管其本身已說明了 Bootstrap 的靈活性）還不足以解釋真正起作用的基本設(shè)計原則。

響應(yīng)式 Web 設(shè)計

查看 Web 頁面的設(shè)備包括小型移動電話，以及大于普通臺式計算機外形規(guī)格的顯示器。在響應(yīng)式設(shè)計中，一開始就在 Web 頁面中構(gòu)建了靈活性，這樣用戶就可以通過所有設(shè)備查看頁面。響應(yīng)式設(shè)計的核心是 CSS3媒體查詢，這是根據(jù)設(shè)備性質(zhì)（尤其是用戶的顯示器大?。﹣碚{(diào)用 CSS 規(guī)則的一種標(biāo)準方法。

對于典型開發(fā)人員啟動的各種項目，我建議首先使用啟用了響應(yīng)特性的固定布局。固定布局更易于組織，而且響應(yīng)特性支持從一開始就培養(yǎng)考慮網(wǎng)站如何在移動設(shè)備上運行的良好習(xí)慣。如果項目要應(yīng)用于生產(chǎn)環(huán)境中，而且您正在與設(shè)計人員合作，那么設(shè)計人員應(yīng)能夠使您的文件適用于更加適合的其他任何模型。

針對 Bootstrap 的 HTML

清單 1 是一個有用的框架 HTML 文件，用于結(jié)合使用 Bootstrap 與一個固定布局和響應(yīng)特性：

清單 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）。一種形式是一個常規(guī)文件，第二種形式是壓縮文件或 “縮小文件”。就像在本文中一樣，使用縮小版本即可實現(xiàn)最有效的頁面加載。

listing1.html 的開始之處的DOCTYPE聲明將其標(biāo)記為一個 HTML5 文件。head元素內(nèi)的meta標(biāo)記控制移動的小屏幕布局。（為方便起見，我將它們稱作meta/viewport標(biāo)記。）默認情況下，大多數(shù)移動設(shè)備按比例縮小 Web 頁面，使之適應(yīng)屏幕大小，就像在桌面瀏覽器窗口中一樣。這就是為什么許多網(wǎng)站上的文本和圖像在手機瀏覽器中看起來很小的原因。meta/viewport聲明中的initial-scale=1.0部分禁用了這一行為，告訴設(shè)備要保持頁面的原有尺寸。該聲明表示 Web 設(shè)計人員（在本例中為 Bootstrap）已經(jīng)完成了實現(xiàn)較小屏幕的響應(yīng)式設(shè)計這一任務(wù)，所以在默認情況下，沒必要采用蠻力方法。

稍后，清單 1的head標(biāo)記是 Bootstrap CSS 的鏈接。在文件的末尾，加載 jQuery 和 Bootstrap 實用程序 JavaScript。這些腳本在末尾運行可實現(xiàn)好性能。

設(shè)置代碼

當(dāng)使用 Bootstrap（或任何 Web 支持文件集）時，您可以從多種方法中選擇用來設(shè)置 HTML 和其他代碼的方法。我建議您創(chuàng)建一個文件夾來存儲自己的項目，然后將 Bootstrap 文件及其完整的文件夾結(jié)構(gòu)復(fù)制到項目文件夾中。將您自己的 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) 正在準備一種替換機制，該機制以一種新的 CSS 規(guī)則的形式出現(xiàn)。清單 1中meta/viewport聲明的等效 CSS 是：

@viewport { width: extend-to-zoom 99.99%; zoom: 1.0;}

目前，您可以將這個代碼包含在您的 CSS 中，并在 HTML 中保留meta/viewport標(biāo)記。當(dāng) CSS 形式受到廣泛支持時，您就可以刪除meta/viewport聲明。

網(wǎng)格系統(tǒng)

清單 1中的主要容器div表示使用 Bootstrap 的固定布局。放入該容器中的 HTML 合并到了 Bootstrap 的網(wǎng)格系統(tǒng)中。

如果還能想起曾經(jīng)看到過的大部分 Web 頁面，那么您就會認識到它們被分成了一系列的塊。位于頁面頂部的塊可能擁有一個徽標(biāo)。導(dǎo)航可能位于左邊或右邊的塊中，而內(nèi)容索引可能也適合放在那個位置。甚至可能出現(xiàn)另一個塊包含一個腳注的情況。主要內(nèi)容本身可能被劃分成多個面板或塊。過去，Web 設(shè)計人員通過使用 CSS 盒子模型（box model）手工設(shè)置所有這些塊。

網(wǎng)格系統(tǒng)是將盒子布置（比如剛剛描述的）抽象為行和列的一種方法。Bootstrap 為此類網(wǎng)格提供了一個核心的 CSS。您可以通過使用特殊的類，通過嵌入div元素將內(nèi)容放置在任何布局的盒子中。

圖 1 顯示了一個有用的模板，這個模板最初由 Aaron K. White 開發(fā)，用于可視化 Bootstrap 的網(wǎng)格系統(tǒng)并規(guī)劃如何安排您的內(nèi)容。在本文中，我做了一些修改，以便在本文中更容易讀取文本。

圖 1. Aaron K. White 的 Bootstrap 網(wǎng)格系統(tǒng)模板

Web開發(fā) 網(wǎng)站策劃 Bootstrap教程 bootstrap模板

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

填充 HTML 模板

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

分享題目：建站教程：利用Bootstrap進行快速Web開發(fā)
URL鏈接：http://www.bm7419.com/news33/192983.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、手機網(wǎng)站建設(shè)、ChatGPT、App設(shè)計、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計公司

廣告

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

手機網(wǎng)站建設(shè)