Bootstrap 5 入門
什麼是 Bootstrap？
- Bootstrap 是一個免費的前端框架，可用於更快、更輕鬆的 Web 開發
- Bootstrap 包含基於 HTML 和 CSS 的設計模板，用於排版、表單、按鈕、表格、導航、模態框、圖片輪播等，以及可選的 JavaScript 外掛
- Bootstrap 還使您能夠輕鬆建立響應式設計
什麼是響應式網頁設計？
響應式 Web 設計是指建立能夠自動調整以在所有裝置上良好顯示的網站，從小型手機到大型桌面。
Bootstrap 5 示例
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>調整此響應式頁面大小以檢視效果！</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>列 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>列 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>列 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
自己動手試一試 »Bootstrap 版本
Bootstrap 5（2021年釋出）是 Bootstrap（2013年釋出）的最新版本；它帶來了新的元件、更快的樣式表和更好的響應性。
Bootstrap 5 支援所有主要瀏覽器和平臺的最新穩定版本。但是，不支援 Internet Explorer 11 及更低版本。
Bootstrap 5 與 Bootstrap 3 和 4 的主要區別在於，Bootstrap 5 已改用原生 JavaScript 而非 jQuery。
注意： Bootstrap 3 和 Bootstrap 4 仍然受到團隊的關鍵錯誤修復和文件更改支援，繼續使用它們是完全安全的。但是，它們將不會新增新功能。
為什麼要使用 Bootstrap？
Bootstrap 的優勢
- 易於使用： 任何僅具備基本 HTML 和 CSS 知識的人都可以開始使用 Bootstrap
- 響應式功能： Bootstrap 的響應式 CSS 可適應手機、平板電腦和桌面裝置
- 移動優先方法： 在 Bootstrap 中，移動優先樣式是核心框架的一部分
- 瀏覽器相容性： Bootstrap 5 相容所有現代瀏覽器（Chrome、Firefox、Edge、Safari 和 Opera）。注意，如果您需要支援 IE11 及更低版本，則必須使用 BS4 或 BS3。
在哪裡獲取 Bootstrap 5？
有兩種方法可以在您自己的網站上開始使用 Bootstrap 5。
您可以
- 從 CDN 引入 Bootstrap 5
- 從 getbootstrap.com 下載 Bootstrap 5
Bootstrap 5 CDN
如果您不想自己下載和託管 Bootstrap 5，可以從 CDN（內容分發網路）引入它。
jsDelivr 為 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支援
MaxCDN
<!-- 最新編譯和壓縮的 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新編譯的 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
使用 Bootstrap 5 CDN 的一個優點
許多使用者在訪問其他網站時已經從 jsDelivr 下載了 Bootstrap 5。因此，當他們訪問您的網站時，它將從快取中載入，從而加快載入時間。此外，大多數 CDN 會確保一旦使用者請求檔案，它將從離他們最近的伺服器提供，這也導致更快的載入時間。
JavaScript？
Bootstrap 5 對不同的元件（如模態框、工具提示、彈出框等）使用 JavaScript。但是，如果您只使用 Bootstrap 的 CSS 部分，則不需要它們。
下載 Bootstrap 5
如果您想自己下載和託管 Bootstrap 5，請訪問 https://bootstrap.tw/，並按照那裡的說明操作。
使用 Bootstrap 5 建立您的第一個網頁
1. 新增 HTML5 doctype
Bootstrap 5 使用 HTML5 文件型別所需的 HTML 元素和 CSS 屬性。
始終在頁面開頭包含 HTML5 文件型別，以及 lang 屬性和正確的標題和字元集
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 示例</title>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 5 是移動優先的
Bootstrap 5 旨在響應移動裝置。移動優先樣式是核心框架的一部分。
為確保正確渲染和觸控縮放，請在<head>元素內新增以下<meta>標籤
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 部分將頁面的寬度設定為與裝置的螢幕寬度一致（這將因裝置而異）。
initial-scale=1部分設定了頁面首次由瀏覽器載入時的初始縮放級別。
3. 容器
Bootstrap 5 還需要一個包含元素來包裝網站內容。
有兩種容器類可供選擇
.container類提供了一個響應式的固定寬度容器.container-fluid類提供了一個全寬度容器，跨越視口的整個寬度
兩個基本的 Bootstrap 5 頁面
以下示例顯示了基本 Bootstrap 5 頁面（帶響應式固定寬度容器）的程式碼
容器示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>這部分在 .container 類中。</p>
<p>.container 類提供了一個響應式固定寬度的容器。</p>
</div>
</body>
</html>
自己動手試一試 »
以下示例顯示了基本 Bootstrap 5 頁面（帶全寬容器）的程式碼
流體容器示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>這部分在 .container-fluid 類中。</p>
<p>.container-fluid 類提供了一個全寬容器，橫跨整個視口寬度。</p>
</div>
</body>
</html>
自己動手試一試 »
