亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

Bootstrap 入門

在本教程中，您將學習如何使用Bootstrap 3 編譯版本創(chuàng)建基本的Bootstrap模板。

Bootstrap 入門

在這里，您將了解使用Bootstrap創(chuàng)建網(wǎng)頁有多么容易。在開始之前，請確保具有代碼編輯器以及HTML和CSS的一些使用知識。

如果您只是剛開始進行Web開發(fā)，請從此處開始學習HTML基礎知識?

好吧，讓我們直接進入。

下載 Bootstrap 文件

有兩個版本可供下載，編譯的Bootstrap和Bootstrap源文件。您可以從此處下載Bootstrap文件。

編譯下載包含CSS和JavaScript文件的編譯和縮小版本，以及字體格式的圖標，以便更快，更輕松地進行Web開發(fā)，而源代碼則包含所有CSS和JavaScript的原始源文件以及文檔的本地副本。

為了更好地理解，我們將重點放在已編譯的Bootstrap文件上。這樣可以節(jié)省您的時間，因為您不必每次都為單獨的功能而煩惱，包括單獨的文件。當您決定將站點移到生產(chǎn)環(huán)境中時，由于HTTP請求和下載大小較小，因為它可以編譯和壓縮文件，因此，它還可以提高網(wǎng)站的性能并節(jié)省寶貴的帶寬。

了解文件結構

下載編譯的Bootstrap后，解壓縮壓縮文件夾以查看結構。您將找到以下文件結構和內(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.*夾中有四個字體文件()。這些字體文件包含Glyphicon Halflings集中的250多個圖標。

提示：這是Bootstrap的最基本形式，可以在任何Web項目中快速使用。請注意，Bootstrap的JavaScript插件要求包含jQuery。您可以在這里https://jquery.com/download/下載最新版本的jQuery表單。

使用 Bootstrap 創(chuàng)建您的第一個網(wǎng)頁

到目前為止，您已經(jīng)了解了Bootstrap文件的結構和用途，現(xiàn)在是時候真正使用Bootstrap了。在本節(jié)中，我們將創(chuàng)建一個基本的Bootstrap模板，其中包括我們在文件結構中提到的所有內(nèi)容。

讓我們逐步完成以下步驟。在本教程的最后，您將制作一個HTML文件，該文件在Web瀏覽器中顯示“ Hello world”消息。

步驟1：建立基本的HTML文件

打開您喜歡的代碼編輯器并創(chuàng)建一個新的HTML文件。從一個空窗口開始，然后鍵入以下代碼，并將其另存為“ 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>
測試看看?/?

提示：始終在文檔部分中包含視口<meta>標簽<head>，以啟用觸摸縮放并確保在移動設備上正確呈現(xiàn)。還包括X-UA-Compatible帶有edge模式的meta標記，該標記告訴Internet Explorer以可用的最高模式顯示網(wǎng)頁。

步驟2：將此HTML文件設置為Bootstrap模板

要將這個HTML文件設置為Bootstrap模板，只需添加相應的Bootstrap CSS和JS文件即可。您應該在頁面底部添加JavaScript文件-在關閉標記（即）之前，以改善網(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>
測試看看?/?

我們都準備好了！在添加Bootstrap的CSS和JS文件以及所需的jQuery庫之后，我們可以開始使用Bootstrap框架開發(fā)任何站點或應用程序。

步驟3：保存文件

現(xiàn)在，將文件另存為“ bootstrap-template.html”。

注意：.html指定擴展名很重要-某些文本編輯器（例如記事本）會自動保存該擴展名.txt。

在瀏覽器中打開文件。導航到您的文件，然后雙擊它。它將在您的默認Web瀏覽器中打開。（如果沒有，請打開瀏覽器并將文件拖到其中。）

通過CDN包含Bootstrap的文件

如果不想自己下載和托管引導或jQuery，還可以使用免費提供的CDN（Content Delivery Network）鏈接將引導的CSS和JavaScript文件以及jQuery庫JavaScript文件包含在文檔中。

CDN可以通過減少加載時間來提供性能優(yōu)勢，因為它們將Bootstrap的文件托管在遍布全球的多臺服務器上，并且當用戶請求文件時，將從最靠近它們的服務器提供文件。

<!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>
測試看看?/?

為了實現(xiàn)子資源完整性(SRI)，在Bootstrap CDN中增加了完整性和crossorigin屬性。它是一種安全功能，通過確保您的網(wǎng)站獲取的文件（從CDN或任何位置）在沒有意外操作的情況下交付，從而降低來自受損CDN的攻擊風險。它的工作原理是允許您提供一個獲取的文件必須匹配的加密散列。

屬性integrity和crossorigin已添加到引導CDN實現(xiàn)子資源完整性(SRI)。它是一項安全功能，使您能夠確保通過網(wǎng)站傳遞的文件（從CDN或其他任何地方）獲取的文件都未經(jīng)意外處理，從而減輕了CDN受到攻擊的風險。通過允許您提供讀取的文件必須匹配的加密散列來工作。

提示：如果您站點的訪問者在訪問其他站點時已經(jīng)從同一CDN下載了Bootstrap的文件，則會從瀏覽器的緩存中加載而不是重新下載，從而縮短了加載時間。