我們可以通過以下兩種方式來安裝 Bootstrap5：
Bootstrap 5 CDN
國內(nèi)推薦使用 Staticfile CDN 上的庫：
Bootstrap5 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>
注意：popper.min.js 用于設置彈窗、提示、下拉菜單。
bootstrap.bundle.js （未壓縮版）或 bootstrap.bundle.min.js（壓縮版） 包含了捆綁的插件如 popper.min.js 及其他依賴腳本，所以我們也可以直接使用以下代碼：
Bootstrap5 CDN
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" >
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
此外，你還可以使用以下的 CDN 服務：
下載 Bootstrap 5
你可以去官網(wǎng) https://getbootstrap.com/ 下載 Bootstrap5 資源庫。
注：此外你還可以通過包的管理工具 npm、 yarn、gem、 composer 等來安裝：
npm install bootstrap
yarn add bootstrap
gem install bootstrap -v 5.1.1
composer require twbs/bootstrap:5.1.1
創(chuàng)建第一個 Bootstrap 5 頁面
1、添加 HTML5 doctype
Bootstrap 要求使用 HTML5 文件類型，所以需要添加 HTML5 doctype 聲明。
HTML5 doctype 在文檔頭部聲明，并設置對應編碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
移動設備優(yōu)先
為了讓 Bootstrap 開發(fā)的網(wǎng)站對移動設備友好，確保適當?shù)睦L制和觸屏縮放，需要在網(wǎng)頁的 head 之中添加 viewport meta 標簽，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 表示寬度是設備屏幕的寬度。
initial-scale=1 表示初始的縮放比例。
容器類
Bootstrap 5 需要一個容器元素來包裹網(wǎng)站的內(nèi)容。
我們可以使用以下兩個容器類：
-
.container 類用于固定寬度并支持響應式布局的容器。
-
.container-fluid 類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。
兩個 Bootstrap 5 頁面
Bootstrap5 .container 實例
<div class="container">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>這是一些文本。</p>
</div>
嘗試一下 ?
以下實例展示了占據(jù)全部視口（viewport）的容器。
Bootstrap5 .container-fluid 實例
<div class="container-fluid">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>使用了 .container-fluid，100% 寬度，占據(jù)全部視口（viewport）的容器。</p>
</div>
嘗試一下 ?
本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權內(nèi)容，請
點擊舉報。
