在本教程中，您將學(xué)習(xí)如何使用Bootstrap 3 編譯版本創(chuàng)建基本的Bootstrap模板。
在這里，您將了解使用Bootstrap創(chuàng)建網(wǎng)頁有多么容易。在開始之前，請(qǐng)確保具有代碼編輯器以及HTML和CSS的一些使用知識(shí)。
如果您只是剛開始進(jìn)行Web開發(fā)，請(qǐng)從此處開始學(xué)習(xí)HTML基礎(chǔ)知識(shí)?
好吧，讓我們直接進(jìn)入。
有兩個(gè)版本可供下載，編譯的Bootstrap和Bootstrap源文件。您可以從此處下載Bootstrap文件。
編譯下載包含CSS和JavaScript文件的編譯和縮小版本，以及字體格式的圖標(biāo)，以便更快，更輕松地進(jìn)行Web開發(fā)，而源代碼則包含所有CSS和JavaScript的原始源文件以及文檔的本地副本。
為了更好地理解，我們將重點(diǎn)放在已編譯的Bootstrap文件上。這樣可以節(jié)省您的時(shí)間，因?yàn)槟槐孛看味紴閱为?dú)的功能而煩惱，包括單獨(dú)的文件。當(dāng)您決定將站點(diǎn)移到生產(chǎn)環(huán)境中時(shí)，由于HTTP請(qǐng)求和下載大小較小，因?yàn)樗梢跃幾g和壓縮文件，因此，它還可以提高網(wǎng)站的性能并節(jié)省寶貴的帶寬。
下載編譯的Bootstrap后，解壓縮壓縮文件夾以查看結(jié)構(gòu)。您將找到以下文件結(jié)構(gòu)和內(nèi)容。
bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
正如您看到的，Bootstrap的編譯版本提供了已編譯的CSS和JS文件（bootstrap.*），以及已編譯和縮小的CSS和JS（bootstrap.min.*）。
字體文件glyphicons-halflings-regular.*夾中有四個(gè)字體文件()。這些字體文件包含Glyphicon Halflings集中的250多個(gè)圖標(biāo)。
提示：這是Bootstrap的最基本形式，可以在任何Web項(xiàng)目中快速使用。請(qǐng)注意，Bootstrap的JavaScript插件要求包含jQuery。您可以在這里https://jquery.com/download/下載最新版本的jQuery表單。
到目前為止，您已經(jīng)了解了Bootstrap文件的結(jié)構(gòu)和用途，現(xiàn)在是時(shí)候真正使用Bootstrap了。在本節(jié)中，我們將創(chuàng)建一個(gè)基本的Bootstrap模板，其中包括我們?cè)谖募Y(jié)構(gòu)中提到的所有內(nèi)容。
讓我們逐步完成以下步驟。在本教程的最后，您將制作一個(gè)HTML文件，該文件在Web瀏覽器中顯示“ Hello world”消息。
打開您喜歡的代碼編輯器并創(chuàng)建一個(gè)新的HTML文件。從一個(gè)空窗口開始，然后鍵入以下代碼，并將其另存為“ basic.html”在您的桌面上。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic HTML File</title> </head> <body> <h1>Hello, world!</h1> </body> </html>測(cè)試看看?/?
提示：始終在文檔部分中包含視口<meta>標(biāo)簽<head>，以啟用觸摸縮放并確保在移動(dòng)設(shè)備上正確呈現(xiàn)。還包括X-UA-Compatible帶有edge模式的meta標(biāo)記，該標(biāo)記告訴Internet Explorer以可用的最高模式顯示網(wǎng)頁。
要將這個(gè)HTML文件設(shè)置為Bootstrap模板，只需添加相應(yīng)的Bootstrap CSS和JS文件即可。您應(yīng)該在頁面底部添加JavaScript文件-在關(guān)閉標(biāo)記（即）之前，以改善網(wǎng)頁的性能。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic Bootstrap Template</title> <link rel="stylesheet" type="text/css" href="/static/style/bootstrap.min.css"> <!-- Optional Bootstrap theme --> <link rel="stylesheet" href="/static/style/bootstrap-theme.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="/static/script/jquery-1.11.3.min.js"></script> <script src="/static/script/bootstrap.min.js"></script> </body> </html>測(cè)試看看?/?
我們都準(zhǔn)備好了！在添加Bootstrap的CSS和JS文件以及所需的jQuery庫之后，我們可以開始使用Bootstrap框架開發(fā)任何站點(diǎn)或應(yīng)用程序。
現(xiàn)在，將文件另存為“ bootstrap-template.html”。
注意：.html指定擴(kuò)展名很重要-某些文本編輯器（例如記事本）會(huì)自動(dòng)保存該擴(kuò)展名.txt。
在瀏覽器中打開文件。導(dǎo)航到您的文件，然后雙擊它。它將在您的默認(rèn)Web瀏覽器中打開。（如果沒有，請(qǐng)打開瀏覽器并將文件拖到其中。）
如果不想自己下載和托管引導(dǎo)或jQuery，還可以使用免費(fèi)提供的CDN（Content Delivery Network）鏈接將引導(dǎo)的CSS和JavaScript文件以及jQuery庫JavaScript文件包含在文檔中。
CDN可以通過減少加載時(shí)間來提供性能優(yōu)勢(shì)，因?yàn)樗鼈儗ootstrap的文件托管在遍布全球的多臺(tái)服務(wù)器上，并且當(dāng)用戶請(qǐng)求文件時(shí)，將從最靠近它們的服務(wù)器提供文件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional Bootstrap theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>測(cè)試看看?/?
為了實(shí)現(xiàn)子資源完整性(SRI)，在Bootstrap
CDN中增加了完整性和crossorigin屬性。它是一種安全功能，通過確保您的網(wǎng)站獲取的文件（從CDN或任何位置）在沒有意外操作的情況下交付，從而降低來自受損CDN的攻擊風(fēng)險(xiǎn)。它的工作原理是允許您提供一個(gè)獲取的文件必須匹配的加密散列。
屬性integrity和crossorigin已添加到引導(dǎo)CDN實(shí)現(xiàn)子資源完整性(SRI)。它是一項(xiàng)安全功能，使您能夠確保通過網(wǎng)站傳遞的文件（從CDN或其他任何地方）獲取的文件都未經(jīng)意外處理，從而減輕了CDN受到攻擊的風(fēng)險(xiǎn)。通過允許您提供讀取的文件必須匹配的加密散列來工作。
提示：如果您站點(diǎn)的訪問者在訪問其他站點(diǎn)時(shí)已經(jīng)從同一CDN下載了Bootstrap的文件，則會(huì)從瀏覽器的緩存中加載而不是重新下載，從而縮短了加載時(shí)間。