国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<mark id="5txnz"><small id="5txnz"><dl id="5txnz"></dl></small></mark>

學(xué)習(xí)Bootstrap 5的第一天

2年前作者：世俗ˊ分類(lèi)：Toy博客閱讀(25)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了學(xué)習(xí)Bootstrap 5的第一天。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

目錄

Bootstrap?簡(jiǎn)介

什么是 Bootstrap 5？

Bootstrap5 與3 & 4的對(duì)比

總體對(duì)比：

具體對(duì)比：

起源

為什么要使用 Bootstrap？

Bootstrap 5 包含的內(nèi)容

Bootstrap5 實(shí)例

Bootstrap5?安裝使用

使用 Bootstrap5 CDN

國(guó)內(nèi)推薦使用

國(guó)際推薦使用

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

下載 Bootstrap 5

使用下載 Bootstrap 5 的優(yōu)勢(shì)

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

1. 添加 HTML5 文檔類(lèi)型

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

3. 容器類(lèi)

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

container 實(shí)例

Container Fluid 實(shí)例

Bootstrap5 容器

固定寬度

流體容器

容器填充

容器邊框和顏色

響應(yīng)式容器

Bootstrap?簡(jiǎn)介

什么是 Bootstrap 5？

Bootstrap 5 是 Bootstrap 的最新版本，它是最流行的 HTML、CSS 和 JavaScript 框架，用于創(chuàng)建響應(yīng)式、移動(dòng)優(yōu)先的網(wǎng)站。

Bootstrap5 與3 & 4的對(duì)比

總體對(duì)比：

學(xué)習(xí)Bootstrap 5的第一天,Bootstrap,bootstrap,學(xué)習(xí),筆記

具體對(duì)比：

Bootstrap 3、4和5之間存在一些顯著的區(qū)別?？傮w來(lái)說(shuō)，Bootstrap 5是最新版本，它相較于前兩個(gè)版本在響應(yīng)式設(shè)計(jì)、組件和工具方面有所改進(jìn)，而且已經(jīng)切換到Vanilla JavaScript而不是jQuery。

響應(yīng)式設(shè)計(jì)：

Bootstrap 3：引入了柵格系統(tǒng)，使得開(kāi)發(fā)響應(yīng)式布局更加簡(jiǎn)單。
Bootstrap 4：進(jìn)一步改進(jìn)了柵格系統(tǒng)，引入了更靈活的網(wǎng)格選項(xiàng)。
Bootstrap 5：繼續(xù)優(yōu)化了響應(yīng)式設(shè)計(jì)，并引入了新的網(wǎng)格選項(xiàng)，提供了更多的斷點(diǎn)選項(xiàng)，使得開(kāi)發(fā)者可以更精確地控制不同屏幕大小的布局。

組件和工具：

Bootstrap 3：包含基本的組件和工具，如導(dǎo)航、按鈕、表單等。
Bootstrap 4：對(duì)組件進(jìn)行了重新設(shè)計(jì)和改進(jìn)，提供了更加一致和現(xiàn)代化的外觀。引入了新的組件，如卡片和導(dǎo)航。
Bootstrap 5：進(jìn)一步改進(jìn)了組件庫(kù)，并提供了更多的定制化選項(xiàng)。引入了新的組件，如通知和表單驗(yàn)證。

技術(shù)變化：

Bootstrap 3 & 4：使用 jQuery
Bootstrap 5：使用原生的JavaScript,當(dāng)然我們?nèi)绻胗靡部梢砸?jQuery。

其他區(qū)別：

Bootstrap 5：與所有現(xiàn)代瀏覽器兼容（Chrome、Firefox、Edge、Safari和Opera）。
Bootstrap 3 & 4：可能在某些瀏覽器中出現(xiàn)樣式差異或交互問(wèn)題。

總之，Bootstrap 3、4和5在響應(yīng)式設(shè)計(jì)、組件和工具方面有所不同，而且Bootstrap 5已經(jīng)切換到Vanilla JavaScript而不是jQuery。

起源

Bootstrap起源于2011年，由Twitter的兩名工程師Mark Otto和Jacob Thornton合作開(kāi)發(fā)。他們發(fā)現(xiàn)當(dāng)時(shí)的網(wǎng)頁(yè)設(shè)計(jì)工具集不夠完善，缺乏一些基本的樣式和組件，而這會(huì)使得開(kāi)發(fā)人員的工作更加困難。為了解決這個(gè)問(wèn)題，他們決定創(chuàng)建一個(gè)基于HTML、CSS和JavaScript的開(kāi)源框架，提供一些基本的樣式和組件，使得開(kāi)發(fā)人員可以更快地構(gòu)建響應(yīng)式網(wǎng)站。最初，Bootstrap主要被用于Twitter的網(wǎng)頁(yè)設(shè)計(jì)。在經(jīng)過(guò)一段時(shí)間的迭代和改進(jìn)后，Bootstrap逐漸受到開(kāi)發(fā)人員的歡迎，并逐漸成為最受歡迎的前端框架之一。

為什么要使用 Bootstrap？

方便性：Bootstrap提供了一整套現(xiàn)成的組件和資源，可以快速創(chuàng)建網(wǎng)站和應(yīng)用程序的界面。開(kāi)發(fā)人員可以直接使用Bootstrap提供的HTML模板、CSS樣式和JavaScript插件，而無(wú)需從頭開(kāi)始創(chuàng)建這些組件。
響應(yīng)式設(shè)計(jì)：Bootstrap的柵格系統(tǒng)可以根據(jù)用戶(hù)設(shè)備的屏幕大小自適應(yīng)調(diào)整網(wǎng)站的布局和樣式，不論是手機(jī)還是大型臺(tái)式機(jī)，確保用戶(hù)在不同設(shè)備上的良好體驗(yàn)。這對(duì)于移動(dòng)設(shè)備的支持尤其重要，因?yàn)橐苿?dòng)設(shè)備的屏幕大小和分辨率各不相同。
瀏覽器兼容性：Bootstrap5 兼容所有主流瀏覽器（Chrome、Firefox、Edge、Safari 和 Opera）。這使得開(kāi)發(fā)人員可以不必?fù)?dān)心在不同瀏覽器中出現(xiàn)樣式或交互問(wèn)題，從而專(zhuān)注于開(kāi)發(fā)核心功能。注意：?Bootstrap5不支持 IE11 及以下版本。如果需要支持 IE11 及以下版本，請(qǐng)使用 Bootstrap4 或 Bootstrap3。但是Bootstrap4 放棄了對(duì) IE8 以及 iOS 6 的支持。如果需要對(duì)舊版本瀏覽器兼容，那么請(qǐng)使用Bootstrap3。
開(kāi)源社區(qū)：Bootstrap是一個(gè)開(kāi)源項(xiàng)目，擁有龐大的社區(qū)支持和豐富的第三方插件。這意味著開(kāi)發(fā)人員可以在社區(qū)中找到許多現(xiàn)成的解決方案和插件，以加快開(kāi)發(fā)速度并增強(qiáng)網(wǎng)站或應(yīng)用程序的功能。在這里推薦幾個(gè)開(kāi)源社區(qū)：jsDelivr，Bootstrap中文網(wǎng)

提示：目前官方團(tuán)隊(duì)仍然在維護(hù) Bootstrap 3 和 Bootstrap 4 ，我們可以繼續(xù)使用它們。但是不會(huì)得到任何新特性。?

當(dāng)然，雖然Bootstrap提供了許多便利，但也有一些局限性。例如，對(duì)于需要高度定制化設(shè)計(jì)的項(xiàng)目，Bootstrap可能不夠靈活。此外，對(duì)于一些需要特定交互效果的項(xiàng)目，Bootstrap的插件可能無(wú)法滿(mǎn)足需求。

Bootstrap 5 包含的內(nèi)容

Bootstrap 5包含了以下內(nèi)容：

基于HTML、CSS和JavaScript的組件和工具，用于創(chuàng)建響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的網(wǎng)站。
柵格系統(tǒng)：用于根據(jù)不同設(shè)備的大小調(diào)整網(wǎng)站布局的響應(yīng)式設(shè)計(jì)系統(tǒng)。
排版：包括標(biāo)題、段落、列表、表格等基本的文本排版元素。
表單：包括各種表單元素、表單控件、表單驗(yàn)證等。
按鈕：各種類(lèi)型的按鈕，包括基礎(chǔ)按鈕、下拉按鈕、工具欄按鈕等。
導(dǎo)航：包括導(dǎo)航欄、標(biāo)簽頁(yè)、面包屑、下拉菜單等導(dǎo)航相關(guān)的組件。
圖像：用于處理圖像的各種樣式和工具，如縮放、裁剪、圓角等。
模態(tài)：用于創(chuàng)建模態(tài)窗口和對(duì)話(huà)框的組件。
輪播圖：用于展示圖片或內(nèi)容的輪播組件。
工具提示：用于展示提示信息的工具提示組件。
其他組件：包括彈出窗口、卡片、圖標(biāo)等其他類(lèi)型的組件。

此外，Bootstrap 5還提供了Sass支持，開(kāi)發(fā)人員可以使用Sass變量和mixins來(lái)管理和修改網(wǎng)站的樣式。同時(shí)，Bootstrap 5也支持與其他JavaScript框架和庫(kù)的集成，如jQuery、Vue、React等。

Bootstrap5 實(shí)例

以下是一個(gè)簡(jiǎn)單的 Bootstrap 5 實(shí)例，用于創(chuàng)建一個(gè)基本的響應(yīng)式網(wǎng)頁(yè)布局：?

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Bootstrap 5 Example</title>
		<!-- 最新編譯并壓縮的 CSS -->
		<link  rel="stylesheet">

		<!-- 最新編譯的 JavaScript -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-6 offset-3">
					<h1>Hello, World!</h1>
					<p>這是一個(gè)簡(jiǎn)單的示例.</p>
				</div>
			</div>
		</div>
	</body>
</html>

在這個(gè)例子中，我們首先引入了 Bootstrap 5 的 CSS 和 JavaScript 文件。然后，我們使用 Bootstrap 提供的容器和行類(lèi)來(lái)創(chuàng)建一個(gè)基本的響應(yīng)式網(wǎng)頁(yè)布局。在容器內(nèi)，我們使用一個(gè)帶有 col-6 和 offset-3 類(lèi)的行來(lái)創(chuàng)建一個(gè)寬度為容器寬度的一半、左邊距為容器寬度三分之一的區(qū)域，并在其中放置了一個(gè)標(biāo)題和一段文本。最后，我們引入了 Bootstrap 5 的 JavaScript 文件，以添加所需的交互功能。

注意：

.col-6：表示該元素占據(jù)了容器寬度的 6/12，也就是一半。

.offset-3：表示該元素在水平方向上向右偏移了 3/12 的寬度。

Bootstrap5?安裝使用

我們可以通過(guò)以下兩種方式來(lái)安裝 Bootstrap5：

使用 Bootstrap5 CDN

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

國(guó)內(nèi)推薦使用

Staticfile CDN

<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" >
 
<!--  popper.min.js 用于彈窗、提示、下拉菜單 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

bootstrap.bundle.js （未壓縮版）或 bootstrap.bundle.min.js（壓縮版）包含了捆綁的插件如 popper.min.js 及其他依賴(lài)腳本，所以我們也可以直接使用以下代碼：

<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" >
 
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

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

<!-- 最新編譯并壓縮的 CSS -->
<link  rel="stylesheet">

<!-- 最新編譯的 JavaScript -->
<script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>

jsDelivr??CDN

<!-- 最新編譯并壓縮的 CSS -->
<link  rel="stylesheet">

<!-- 最新編譯的 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>

國(guó)際推薦使用

國(guó)際推薦使用：https://cdnjs.com/

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

快速引入：通過(guò) CDN，Bootstrap 的 CSS 和 JavaScript 文件可以直接從網(wǎng)絡(luò)上的服務(wù)器快速加載，減少了加載時(shí)間，提高了訪問(wèn)速度。
節(jié)省流量：使用 CDN 可以避免從服務(wù)器下載整個(gè) Bootstrap 文件，只下載需要的部分，從而節(jié)省流量。
自動(dòng)更新：CDN 上的文件會(huì)根據(jù)服務(wù)器的更新自動(dòng)更新，無(wú)需手動(dòng)更新本地文件。
提高網(wǎng)站性能：通過(guò)使用 CDN，文件加載速度得到了提高，減少了頁(yè)面加載時(shí)間，提高了用戶(hù)體驗(yàn)。
安全性：通過(guò)使用 CDN，可以減輕服務(wù)器壓力，提高網(wǎng)站的安全性。

總之，使用 Bootstrap 5 CDN 可以提高網(wǎng)站的性能、安全性和用戶(hù)體驗(yàn)，同時(shí)也可以節(jié)省開(kāi)發(fā)和維護(hù)的時(shí)間和成本。

下載 Bootstrap 5

如果想自己下載并托管 Bootstrap 5，可以去官網(wǎng)?Bootstrap?下載 Bootstrap5 資源庫(kù)。

學(xué)習(xí)Bootstrap 5的第一天,Bootstrap,bootstrap,學(xué)習(xí),筆記

注：此外你還可以通過(guò)包的管理工具 npm、 yarn、gem、 composer 等來(lái)安裝：

npm install bootstrap
yarn add bootstrap
gem install bootstrap -v 5.1.1
composer require twbs/bootstrap:5.1.1

使用下載 Bootstrap 5 的優(yōu)勢(shì)

自定義：通過(guò)下載 Bootstrap 5，開(kāi)發(fā)人員可以自定義 Bootstrap 的 CSS 和 JavaScript 文件，以滿(mǎn)足特定的項(xiàng)目需求。這包括修改顏色、字體、布局等。
本地引用：下載 Bootstrap 5 后，可以將文件存儲(chǔ)在本地，無(wú)需每次都從 CDN 加載文件，提高了加載速度和穩(wěn)定性。
離線使用：如果項(xiàng)目在沒(méi)有互聯(lián)網(wǎng)連接的情況下進(jìn)行開(kāi)發(fā)或部署，下載 Bootstrap 5 可以確保項(xiàng)目的正常運(yùn)行。
安全性：通過(guò)下載 Bootstrap 5，可以確保使用的文件來(lái)自官方源，避免了使用可能存在安全問(wèn)題的第三方 CDN。

總之，使用下載 Bootstrap 5 可以提高項(xiàng)目的定制性和安全性，同時(shí)也可以提高加載速度和穩(wěn)定性，適用于在沒(méi)有互聯(lián)網(wǎng)連接的情況下進(jìn)行開(kāi)發(fā)和部署的項(xiàng)目。

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

1. 添加 HTML5 文檔類(lèi)型

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

請(qǐng)始終在頁(yè)面開(kāi)頭包含 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. 容器類(lèi)

Bootstrap 5 需要一個(gè)容器元素來(lái)包裹網(wǎng)站的內(nèi)容。

我們可以使用以下兩個(gè)容器類(lèi)：

.container 類(lèi)用于固定寬度并支持響應(yīng)式布局的容器。
.container-fluid 類(lèi)用于 100% 寬度，占據(jù)全部視口（viewport）的容器。

學(xué)習(xí)Bootstrap 5的第一天,Bootstrap,bootstrap,學(xué)習(xí),筆記

container 和 container-fluid 的區(qū)別：

在Bootstrap中，container類(lèi)根據(jù)屏幕寬度利用媒體查詢(xún)，已經(jīng)設(shè)定了不同的固定寬度，以適應(yīng)不同屏幕大小。而container-fluid類(lèi)則將寬度設(shè)定為auto，保持全屏大小，始終保持100%的寬度。

具體來(lái)說(shuō)：

當(dāng)屏幕寬度小于768px時(shí)，container和container-fluid的寬度都是滿(mǎn)屏的，效果相同。
當(dāng)屏幕寬度大于768px且小于992px時(shí)，container的寬度被設(shè)定為750px。
當(dāng)屏幕寬度大于992px且小于1200px時(shí)，container的寬度被設(shè)定為970px。
當(dāng)屏幕寬度大于1200px時(shí)，container的寬度被設(shè)定為1170px。

與此不同的是，container-fluid的寬度始終是100%，即全屏大小，不論屏幕大小如何變化。而且，container類(lèi)有一個(gè)特點(diǎn)，就是在不同屏幕大小下，它的左右margin會(huì)自動(dòng)調(diào)整為auto，使得容器始終保持居中。

總的來(lái)說(shuō)，選擇使用哪個(gè)類(lèi)取決于你的需求。

如果你的頁(yè)面需要適應(yīng)不同大小的屏幕，并且頁(yè)面內(nèi)容較多，那么container類(lèi)可能更適合。
如果你的頁(yè)面需要全屏顯示，并且頁(yè)面內(nèi)容較少，那么container-fluid類(lèi)可能更適合。

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

container 實(shí)例

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Bootstrap 5 Page</title>
		<!-- 最新編譯并壓縮的 CSS -->
		<link  rel="stylesheet">

		<!-- 最新編譯的 JavaScript -->
		<script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-6 offset-3">
					<h1>Hello, World!</h1>
					<p>This is a simple Bootstrap 5 example.</p>
				</div>
			</div>
		</div>
	</body>
</html>

在上面的代碼中，我們首先引入了 Bootstrap 5 的 CSS 和 JavaScript 文件。然后，我們使用 Bootstrap 提供的 .container 類(lèi)來(lái)創(chuàng)建一個(gè)容器，該容器具有響應(yīng)式的固定寬度。在容器內(nèi)，我們使用 .row 類(lèi)來(lái)創(chuàng)建一個(gè)行，并使用 .col-6 和 .offset-3 類(lèi)來(lái)創(chuàng)建一個(gè)占據(jù)容器寬度的一半、左邊距為容器寬度三分之一的區(qū)域。在這個(gè)區(qū)域中，我們放置了一個(gè)標(biāo)題和一段文本。最后，我們引入了 Bootstrap 5 的 JavaScript 文件，以添加所需的交互功能。?

Container Fluid 實(shí)例

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Bootstrap 5 Page</title>
		<!-- 新 Bootstrap5 核心 CSS 文件 -->
		<link rel="stylesheet" >

		<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-6 offset-3">
					<h1>Hello, World!</h1>
					<p>This is a simple Bootstrap 5 example.</p>
				</div>
			</div>
		</div>
	</body>
</html>

在上面的代碼中，我們使用了 container-fluid 類(lèi)來(lái)創(chuàng)建一個(gè)全寬的容器。與固定寬度的容器不同，全寬容器會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)調(diào)整大小。在容器內(nèi)，我們?nèi)匀皇褂?.row 和 .col-6 以及 .offset-3 類(lèi)來(lái)創(chuàng)建一個(gè)占據(jù)容器寬度的一半、左邊距為容器寬度三分之一的區(qū)域，并放置了一個(gè)標(biāo)題和一段文本。最后，我們引入了 Bootstrap 5 的 JavaScript 文件，以添加所需的交互功能。

Bootstrap5 容器

Bootstrap 需要一個(gè)容器元素來(lái)包裹網(wǎng)站的內(nèi)容。

我們可以使用以下兩個(gè)容器類(lèi)：

.container?類(lèi)用于固定寬度并支持響應(yīng)式布局的容器。
.container-fluid?類(lèi)用于 100% 寬度，占據(jù)全部視口（viewport）的容器。

學(xué)習(xí)Bootstrap 5的第一天,Bootstrap,bootstrap,學(xué)習(xí),筆記

固定寬度

.container?類(lèi)用于創(chuàng)建固定寬度的響應(yīng)式頁(yè)面。

注意：寬度 (max-width) 會(huì)根據(jù)屏幕寬度同比例放大或縮小。

	超級(jí)小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	特大屏幕 ≥1200px	超級(jí)大屏幕 ≥1400px
max-width	100%	540px	720px	960px	1140px	1320px

以下實(shí)例中，我們可以嘗試調(diào)整瀏覽器窗口的大小來(lái)查看容器寬度在不同屏幕中等變化：?

<!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  rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>我的第一張 Bootstrap 頁(yè)面</h1>
  <p>這部分在 .container 類(lèi)中。</p>
  <p>.container 類(lèi)提供了響應(yīng)式固定寬度的容器。</p>
  <p>調(diào)整瀏覽器窗口的大小，可查看容器寬度將在不同斷點(diǎn)處發(fā)生變化。</p>
</div>

</body>
</html>

注意：超級(jí)大屏幕 (≥1400px) 是 Bootstrap 5 新增加的， Bootstrap 4 最大的是特大屏幕 (≥1200px)。

流體容器

使用 .container-fluid 類(lèi)創(chuàng)建全寬容器，它總是跨越整個(gè)屏幕寬度（width 總是 100%）。

實(shí)例：

<!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  rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

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

</body>
</html>

容器填充

默認(rèn)情況下，容器有左右填充（左右內(nèi)邊距），沒(méi)有頂部或底部填充（上下內(nèi)邊距）。因此，我們常使用 spacing 工具（utilities），諸如額外的填充和邊距，使它們看起來(lái)更好。

常用的 spacing 類(lèi)

m-* 類(lèi)用于添加外邊距（margin）。例如，m-2 會(huì)給元素添加2個(gè)像素的外邊距。
p-* 類(lèi)用于添加內(nèi)邊距（padding）。例如，p-2 會(huì)給元素添加2個(gè)像素的內(nèi)邊距。
min-vh-* 類(lèi)用于根據(jù)視口高度（vh）來(lái)添加垂直外邊距或內(nèi)邊距。例如，min-vh-50 會(huì)根據(jù)視口高度的50%來(lái)添加垂直外邊距或內(nèi)邊距。
min-vw-* 類(lèi)用于根據(jù)視口寬度（vw）來(lái)添加水平外邊距或內(nèi)邊距。例如，min-vw-50 會(huì)根據(jù)視口寬度的50%來(lái)添加水平外邊距或內(nèi)邊距。
py-*：用于控制 padding-top 和 padding-bottom 的大小，相當(dāng)于同時(shí)應(yīng)用了 pt-* 和 pb-* 類(lèi)。
pt-*：用于控制元素的頂部?jī)?nèi)邊距（padding-top）。
pb-*：用于控制元素的底部?jī)?nèi)邊距（padding-bottom）。
pl-*：用于控制元素的左側(cè)內(nèi)邊距（padding-left）。
pr-*：用于控制元素的右側(cè)內(nèi)邊距（padding-right）。
my-*：用于控制外邊距（margin）和內(nèi)邊距（padding）的大小，相當(dāng)于同時(shí)應(yīng)用了 m-* 和 p-* 類(lèi)。
mt-*：用于控制元素的頂部外邊距（margin-top）。
mb-*：用于控制元素的底部外邊距（margin-bottom）。
ml-*：用于控制元素的左側(cè)外邊距（margin-left）。
mr-*：用于控制元素的右側(cè)外邊距（margin-right）。

以上每個(gè)類(lèi)別的后面都跟著一個(gè)數(shù)字，這個(gè)數(shù)字表示間距的大小。例如，pt-3 表示元素的頂部?jī)?nèi)邊距為 3 個(gè)單位。

此外，Bootstrap 還提供了一個(gè) .mx-auto 類(lèi)，用于將塊級(jí)元素水平居中。

實(shí)例：

<!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  rel="stylesheet">
		<style>
			body {  
			  font-family: Arial, sans-serif;  
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container">  
		  <div class="row">  
		    <div class="col-6 pt-3">  
		      <p>這是一個(gè)帶有頂部?jī)?nèi)邊距的列。</p>  
		    </div>  
		  </div>  
		  <div class="row">  
		    <div class="col-4 pb-5">  
		      <p>這是一個(gè)帶有底部外邊距的列。</p>  
		    </div>  
		    <div class="col-4 pl-5">  
		      <p>這是一個(gè)帶有左側(cè)外邊距的列。</p>  
		    </div>  
		    <div class="col-4 pr-5">  
		      <p>這是一個(gè)帶有右側(cè)外邊距的列。</p>  
		    </div>  
		  </div>  
		</div>
	</body>
</html>

容器邊框和顏色

Bootstrap 也提供了一些邊框（border）和顏色（bg-dark、bg-primary等）類(lèi)用于設(shè)置容器的樣式。

邊框樣式類(lèi)：

.border：給元素添加淡灰色的邊框。
.border-*：設(shè)置元素的邊框顏色，例如 .border-success、.border-danger 等。
.border-0：刪除元素的邊框。
.rounded-0：刪除元素的圓角。
.rounded-*：設(shè)置元素的圓角大小，例如 .rounded-circle、.rounded-pill 等。

顏色樣式類(lèi)：

.bg-primary、.bg-secondary、.bg-dark、.bg-light、.bg-white、.bg-body：設(shè)置元素背景色。
.text-primary、.text-secondary、.text-success、.text-danger、.text-warning、.text-info、.text-light、.text-dark、.text-body：設(shè)置元素文本顏色。
.text-white、.text-muted：設(shè)置元素文本顏色為白色或淡灰色。

具體邊框和顏色可查看官方文檔！?。?/p>

<!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  rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container p-5 my-5 border">
  <h1>我的第一張 Bootstrap 頁(yè)面</h1>
  <p>這個(gè)容器有邊框和額外的內(nèi)邊距和外邊距。</p>
</div>

<div class="container p-5 my-5 bg-dark text-white">
  <h1>我的第一張 Bootstrap 頁(yè)面</h1>
  <p>這個(gè)容器有深色背景色和白色文本，以及額外的內(nèi)邊距和外邊距。</p>
</div>

<div class="container p-5 my-5 bg-primary text-white">
  <h1>我的第一張 Bootstrap 頁(yè)面</h1>
  <p>這個(gè)容器有藍(lán)色背景色和白色文本，以及額外的內(nèi)邊距和外邊距。</p>
</div>

</body>
</html>

響應(yīng)式容器

可以使用?.container-sm|md|lg|xl?類(lèi)來(lái)創(chuàng)建響應(yīng)式容器。容器的 max-width 屬性值會(huì)根據(jù)屏幕的大小來(lái)改變。

Class	超小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	特大屏幕 ≥1200px	超級(jí)大屏幕 ≥1400px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px

實(shí)例：?

<!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  rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container pt-3">
  <h1>響應(yīng)式容器</h1>
  <p>請(qǐng)調(diào)整瀏覽器窗口大小來(lái)查看效果。</p>
</div>

<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>

</body>
</html>

注意：mt-3 類(lèi)將 margin-top 設(shè)置為 3 個(gè)單位，border 類(lèi)則給元素添加了一個(gè)邊框。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-701942.html

到了這里，關(guān)于學(xué)習(xí)Bootstrap 5的第一天的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

BootStrap學(xué)習(xí)筆記
BootStrap模板參考API：http://v3.bootcss.com/css/ 做一個(gè)頁(yè)面最先要做一個(gè)布局 01 布局容器 .container 類(lèi)用于固定寬度并支持響應(yīng)式布局的容器：固定寬度，會(huì)有留白 .container-fluid 類(lèi)用于100% 寬度，占據(jù)全部視口（viewport）的容器 02 柵格網(wǎng)格系統(tǒng) BootStrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)
2024年01月21日
瀏覽(25)
Bootstrap學(xué)習(xí)筆記（1.0）
Bootstrap是一個(gè)用于快速開(kāi)發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap是基于HTML、CSS、JavaScript的。優(yōu)點(diǎn) 它為開(kāi)發(fā)人員創(chuàng)建接口提供了一個(gè)簡(jiǎn)潔統(tǒng)一的解決方案。它包含了功能強(qiáng)大的內(nèi)置組件，易于定值。它還提供了基于Web的定制。它是開(kāi)源的。 Bootstrap包的內(nèi)容基本結(jié)構(gòu)：
2023年04月12日
瀏覽(26)
【Bootstrap 學(xué)習(xí)筆記】Bootstrap 提供相應(yīng)插件在HTML頁(yè)面中實(shí)現(xiàn)動(dòng)態(tài)交互效果
Bootstrap 提供相應(yīng)插件在 HTML 頁(yè)面中實(shí)現(xiàn)動(dòng)態(tài)交互效果。 1）前提條件由于 Bootstrap 提供的插件都是依賴(lài)于 jQuery 的，所以必須要先引入 jQuery 文件。 Bootstrap 的每個(gè)插件都對(duì)應(yīng)具有一個(gè) JavaScript 文件，允許單獨(dú)引入到 HTML 頁(yè)面。也提供了一個(gè)完整版本（Bootstrap.js 或 Bootstrap.min
2024年02月13日
瀏覽(48)
學(xué)習(xí)Python的第一天(下載Python環(huán)境和工具Pycharm)
下載工具? PyCharm Community Edition 2023.3.4 下載環(huán)境 Python3.10.4 目錄 1.環(huán)境Python下載 1.1 Python環(huán)境變量下載網(wǎng)址:? ?1.2 下載步驟 2.工具Pycharm下載 2.1 pycharm下載網(wǎng)址? 2.2 pycharm下載步驟 Python Releases for Windows | Python.org 這里我將列舉我正在使用的版本 Python3.10.4 下載過(guò)程如果是其他版本
2024年03月26日
瀏覽(23)
python獲取一個(gè)月的第一天/最后一天
輸出將類(lèi)似于以下內(nèi)容：請(qǐng)注意，上述代碼將使用當(dāng)前的系統(tǒng)日期和時(shí)間來(lái)獲取當(dāng)前月份的第一天。你也可以手動(dòng)指定日期和時(shí)間來(lái)獲取特定月份的第一天，如下所示：輸出將類(lèi)似于以下內(nèi)容：輸出將類(lèi)似于以下內(nèi)容：請(qǐng)注意，上述代碼將使用當(dāng)前的系統(tǒng)日期和時(shí)間來(lái)獲取
2024年02月17日
瀏覽(29)
Mybatis學(xué)習(xí)筆記第一天
環(huán)境： JDK1.8 Mysql5.7 maven3.6.1 IDEA 1.1什么是Mybatis MyBatis 是一款優(yōu)秀的持久層框架它支持自定義 SQL、存儲(chǔ)過(guò)程以及高級(jí)映射。 MyBatis 免除了幾乎所有的 JDBC 代碼以及設(shè)置參數(shù)和獲取結(jié)果集的工作。 MyBatis 可以通過(guò)簡(jiǎn)單的 XML 或注解來(lái)配置和映射原始類(lèi)型、接口和 Java POJO（Plain
2024年02月07日
瀏覽(87)
MySQL學(xué)習(xí)筆記第一天
步驟1：停止MySQL服務(wù) 在卸載之前，先停止MySQL8.0的服務(wù)。按鍵盤(pán)上的“Ctrl + Alt + Delete”組合鍵，打開(kāi)“任務(wù)管理器”對(duì)話(huà)框，可以在“服務(wù)”列表找到“MySQL8.0”的服務(wù)，如果現(xiàn)在“正在運(yùn)行”狀態(tài)，可以右鍵單擊服務(wù)，選擇“停止”選項(xiàng)停止MySQL8.0的服務(wù)。步驟2：軟件的卸
2023年04月22日
瀏覽(16)
初學(xué)unity開(kāi)發(fā)學(xué)習(xí)筆記----第一天
以下是學(xué)習(xí)unity知識(shí)的心得，類(lèi)似備忘錄，肯定是存在有漏洞的地方或者專(zhuān)業(yè)名詞使用不恰當(dāng)?shù)牡胤?。。?目標(biāo)：編寫(xiě)小球wasd移動(dòng)的效果 1.下載unity hub和unity引擎: (1).前往官網(wǎng):Unity實(shí)時(shí)內(nèi)容開(kāi)發(fā)平臺(tái) -實(shí)時(shí)3D引擎、2D、VRAR可視化數(shù)據(jù) | Unity中國(guó)官網(wǎng) (2).選擇unity選項(xiàng)卡，選擇下載
2024年02月09日
瀏覽(94)
Windows網(wǎng)絡(luò)自學(xué)的第一天：創(chuàng)建線程
目錄一、創(chuàng)建線程 CreateThread函數(shù)： ?下面是示例： ?編輯 ThreadProc函數(shù)解釋?zhuān)?? ? DWORD的本質(zhì)是 unsigned long? ? PVOID的本質(zhì)是 void* 二、線程的終止 1.WaitForSingleObject()函數(shù)：示例如下： 2.ExitThread()函數(shù): 示例如下： 3.TerminateThread()函數(shù): 4.CloseHandle()函數(shù): 5.正常return 0; 三、線程的
2024年02月14日
瀏覽(19)
【每日一題 | 動(dòng)態(tài)規(guī)劃】訪問(wèn)完所有房間的第一天
【動(dòng)態(tài)規(guī)劃】【數(shù)組】【2024-03-28】 1997. 訪問(wèn)完所有房間的第一天定義狀態(tài) 定義 f[i] 表示第一次到達(dá)房間 i 的日期編號(hào)。根據(jù)題意，首次（第 1 次）訪問(wèn)房間 i 時(shí)，因?yàn)?1 是計(jì)數(shù)，所以下一次一定會(huì)訪問(wèn)房間 j = nextVisit[i] 。只有訪問(wèn)次數(shù)達(dá)到偶數(shù)才能訪問(wèn)右邊的下一個(gè)房間
2024年04月16日
瀏覽(27)

<mark id="c7siw"></mark>