亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
收藏(0) 分享

入門

什么是 Bootstrap？

  • Bootstrap 是一個(gè)免費(fèi)的前端框架，用于更快、更輕松地進(jìn)行 Web 開發(fā)
  • Bootstrap 包括基于 HTML 和 CSS 的設(shè)計(jì)模板，用于排版、表單、按鈕、表格、導(dǎo)航、模態(tài)、圖像輪播等
  • Bootstrap 提供了豐富的 JavaScript 插件
  • Bootstrap 可使您能夠輕松地創(chuàng)建響應(yīng)式設(shè)計(jì)

什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)？

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)旨在創(chuàng)建能夠自動(dòng)調(diào)整的網(wǎng)站，以便增強(qiáng)所有設(shè)備上的使用體驗(yàn)，不論是手機(jī)還是大型臺(tái)式機(jī)。

Bootstrap 5 實(shí)例

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>我的第一張 Bootstrap 頁(yè)面</h1>
</div>

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>列 1：春日</h3>
      <p>勝日尋芳泗水濱，無邊光景一時(shí)新。</p>
      <p>等閑識(shí)得東風(fēng)面，萬紫千紅總是春。</p>
    </div>
    <div class="col-sm-4">
      <h3>列 2：初夏絕句</h3>
      <p>紛紛紅紫已成塵，布谷聲中夏令新。</p>
      <p>夾路桑麻行不盡，始知身是太平人。</p>
    </div>
    <div class="col-sm-4">
      <h3>列 3：山行</h3>
      <p>遠(yuǎn)上寒山石徑斜，白云生處有人家。</p>
      <p>停車坐愛楓林晚，霜葉紅于二月花。</p>
    </div>
  </div>
</div>

Bootstrap 版本

Bootstrap 5（2021 年發(fā)布）是 Bootstrap 的最新版本（2013 年發(fā)布）；使用新組件、更快的樣式表，提供更快的響應(yīng)能力。

Bootstrap 5 支持所有主要瀏覽器和平臺(tái)的最新的穩(wěn)定版本。但是，不支持 Internet Explorer 11 及更早的版本。

Bootstrap 5 和 Bootstrap 3 & 4 的主要區(qū)別在于 Bootstrap 5 已經(jīng)切換到 Vanilla JavaScript 而不是 jQuery。

注釋：其團(tuán)隊(duì)仍然支持 Bootstrap 3 和 Bootstrap 4 的關(guān)鍵錯(cuò)誤修復(fù)和文檔更改，繼續(xù)使用它們是完全安全的。但是不會(huì)向其中添加任何新特性。

為什么要使用 Bootstrap？

Bootstrap 的優(yōu)點(diǎn)：

  • 易于使用：任何對(duì) HTML 和 CSS 有基本了解的人都可以馬上開始使用 Bootstrap
  • 響應(yīng)式特性：Bootstrap 的響應(yīng)式 CSS 可針對(duì)手機(jī)、平板電腦和臺(tái)式機(jī)進(jìn)行調(diào)整
  • 移動(dòng)優(yōu)先的方法：在 Bootstrap 中，移動(dòng)優(yōu)先樣式是其核心框架的一部分
  • 瀏覽器兼容性：Bootstrap 5 與所有現(xiàn)代瀏覽器兼容（Chrome、Firefox、Edge、Safari 和 Opera）。

注意：如果您需要支持 IE11 及以下版本，則必須使用 BS4 或 BS3。

從哪里獲得 Bootstrap 5？

有兩種方法可以在您自己的網(wǎng)站上使用 Bootstrap 5。

您可以：

  • 包含來自 CDN 的 Bootstrap 5
  • 從 getbootstrap.com 下載 Bootstrap 5

Bootstrap 5 CDN

如果不想自己下載并托管 Bootstrap 5，則可以從 CDN（內(nèi)容交付網(wǎng)絡(luò)）中引用它。

W3School 為 Bootstrap 的 CSS 和 JavaScript 提供了 CDN 支持：

MaxCDN:

<!-- 最新編譯并壓縮的 CSS -->
<link href="http://ipnx.cn/lib/bs/bootstrap.css" rel="stylesheet">

<!-- 最新編譯的 JavaScript -->
<script src="http://ipnx.cn/lib/bs/bootstrap.js"></script>

使用 Bootstrap 5 CDN 的優(yōu)勢(shì)之一：

許多用戶在訪問另一個(gè)站點(diǎn)時(shí)已經(jīng)從 jsDelivr 下載了 Bootstrap 5。因此，當(dāng)他們?cè)L問您的網(wǎng)站時(shí)，它將從緩存中加載，從而縮短加載時(shí)間。此外，大多數(shù) CDN 將確保一旦用戶從中請(qǐng)求文件，它將從最接近他們的服務(wù)器提供服務(wù)，這也導(dǎo)致更快的加載時(shí)間。

JavaScript？

Bootstrap 5 將 JavaScript 用于不同的組件（如模態(tài)、工具提示、彈出框等）。但是，如果您只使用 Bootstrap 的 CSS 部分，那就不需要它們。

下載 Bootstrap 5

如果您想自己下載并托管 Bootstrap 5，請(qǐng)?jiān)L問 https://getbootstrap.com/，然后按照那里的說明進(jìn)行操作。

使用 Bootstrap 5 創(chuàng)建您的第一張網(wǎng)頁(yè)

1. 添加 HTML5 文檔類型

Bootstrap 5 使用的是需要 HTML5 doctype 的 HTML 元素和 CSS 屬性。

請(qǐng)始終在頁(yè)面開頭包含 HTML5 doctype，以及 lang 屬性和正確的標(biāo)題、字符集：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 實(shí)例</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 移動(dòng)優(yōu)先

Bootstrap 5 的設(shè)計(jì)目標(biāo)是響應(yīng)移動(dòng)設(shè)備。移動(dòng)優(yōu)先的樣式是核心框架的一部分。

為確保正確的渲染和觸摸縮放，請(qǐng)?jiān)?<head> 元素內(nèi)添加以下 <meta> 標(biāo)記：

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 設(shè)置了頁(yè)面的寬度以跟隨設(shè)備的 screen-width（將因設(shè)備而異）。

initial-scale=1 設(shè)置了瀏覽器首次加載頁(yè)面時(shí)的初始縮放級(jí)別。

3. 容器

Bootstrap 5 還需要一個(gè)包含元素來包裝站點(diǎn)內(nèi)容。

有兩種容器類可供選擇：

  1. .container 類提供了一個(gè)響應(yīng)式的固定寬度容器
  2. .container-fluid 類提供了一個(gè)全寬容器，跨越視口的整個(gè)寬度

兩張基本的 Bootstrap 5 頁(yè)面

container 實(shí)例

下例展示了基本 Bootstrap 5 頁(yè)面（帶有響應(yīng)式固定寬度容器）的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="http://ipnx.cn/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="http://ipnx.cn/lib/bs/bootstrap.js"></script>
</head>
<body>

<div class="container">
  <h1>我的第一張 Bootstrap 頁(yè)面</h1>
  <p>這部分在 .container 類中。</p>
  <p>.container 類提供了響應(yīng)式固定寬度的容器。</p>
</div>

</body>
</html>

Container Fluid 實(shí)例

下例展示了基本 Bootstrap 5 頁(yè)面（帶有全寬容器）的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="http://ipnx.cn/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="http://ipnx.cn/lib/bs/bootstrap.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>我的第一張 Bootstrap 頁(yè)面</h1>
  <p>這部分在 .container-fluid 類中。</p>
  <p>.container-fluid 類提供全寬容器，跨越視口的整個(gè)寬度。</p>
</div>

</body>
</html>