免費(fèi)AI編程助手
Bootstrap5 安裝使用
我們可以通過(guò)以下兩種方式來(lái)安裝 Bootstrap5：
- 使用 Bootstrap5 CDN。
- 從官網(wǎng) getbootstrap.com 下載 Bootstrap 5。
Bootstrap 5 CDN
國(guó)內(nèi)推薦使用 Staticfile CDN 上的庫(kù)：
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<!-- popper.min.js 用于彈窗、提示、下拉菜單 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js" rel="external nofollow" ></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js" rel="external nofollow" ></script>注意：popper.min.js 用于設(shè)置彈窗、提示、下拉菜單。
bootstrap.bundle.js （未壓縮版）或 bootstrap.bundle.min.js（壓縮版） 包含了捆綁的插件如 popper.min.js 及其他依賴腳本，所以我們也可以直接使用以下代碼：
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>此外，你還可以使用以下的 CDN 服務(wù)：
- 國(guó)內(nèi)推薦使用 : https://www.staticfile.org/
- 國(guó)際推薦使用：https://cdnjs.com/
下載 Bootstrap 5
你可以去官網(wǎng) https://getbootstrap.com/ 下載 Bootstrap5 資源庫(kù)。
注：此外你還可以通過(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?
創(chuàng)建第一個(gè) Bootstrap 5 頁(yè)面
1、添加 HTML5 doctype
Bootstrap 要求使用 HTML5 文件類型，所以需要添加 HTML5 doctype 聲明。
HTML5 doctype 在文檔頭部聲明，并設(shè)置對(duì)應(yīng)編碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>移動(dòng)設(shè)備優(yōu)先
為了讓 Bootstrap 開發(fā)的網(wǎng)站對(duì)移動(dòng)設(shè)備友好，確保適當(dāng)?shù)睦L制和觸屏縮放，需要在網(wǎng)頁(yè)的 head 之中添加 viewport meta 標(biāo)簽，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 表示寬度是設(shè)備屏幕的寬度。
initial-scale=1 表示初始的縮放比例。
容器類
Bootstrap 5 需要一個(gè)容器元素來(lái)包裹網(wǎng)站的內(nèi)容。
我們可以使用以下兩個(gè)容器類：
- .container 類用于固定寬度并支持響應(yīng)式布局的容器。
- .container-fluid 類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。
兩個(gè) Bootstrap 5 頁(yè)面
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h1>我的第一個(gè) Bootstrap 頁(yè)面</h1>
<p>這是一些文本。</p>
</div>
</body>
</html>以下實(shí)例展示了占據(jù)全部視口（viewport）的容器。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一個(gè) Bootstrap 頁(yè)面</h1>
<p>使用了 .container-fluid，100% 寬度，占據(jù)全部視口（viewport）的容器。</p>
</div>
</body>
</html>兩者的區(qū)別是container并不會(huì)占據(jù)整個(gè)瀏覽器視口，會(huì)在兩邊有留空，然后內(nèi)容是居中的，類似w3cschool頁(yè)面的布局。
而后container-fluid會(huì)占據(jù)整個(gè)瀏覽器視口，兩邊不會(huì)留空，所以不存在居中的需求，類似w3cschool手機(jī)版官網(wǎng) 頁(yè)面的布局。
從實(shí)現(xiàn)來(lái)說(shuō)：container 的行為復(fù)雜一些：
屏幕小于 768 時(shí)，容器寬度是滿屏，與 container-fluid 效果一樣
屏幕大于 768 小于 992 時(shí)，寬度設(shè)為 750
屏幕大于 992 小于 1200 時(shí)，寬度為 970
屏幕大于 1200，寬度為 1170
margin-left, margin-right 都為 auto，保持 container 容器居中。
container-fluid 的行為簡(jiǎn)單一些：
margin:0 寬度：100%
更多建議：