Bootstrap 4 入門
什麼是 Bootstrap？
- Bootstrap 是一個免費的前端框架，可用於更快、更輕鬆的 Web 開發
- Bootstrap 包含基於 HTML 和 CSS 的設計模板，用於排版、表單、按鈕、表格、導航、模態框、圖片輪播等，以及可選的 JavaScript 外掛
- Bootstrap 還使您能夠輕鬆建立響應式設計
什麼是響應式網頁設計？
響應式 Web 設計是指建立能夠自動調整以在所有裝置上良好顯示的網站，從小型手機到大型桌面。
Bootstrap 4 示例
<div class="jumbotron text-center">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>調整此響應式頁面大小以檢視效果！</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>列 1</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>列 2</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>列 3</h3>
<p>Lorem ipsum dolor..</p>
</div>
</div>
</div>
自己動手試一試 »Bootstrap 版本
本教程遵循 Bootstrap 4，它於 2018 年釋出，是 Bootstrap 3 的升級版，擁有新的元件、更快的樣式表、更高的響應性等等。
Bootstrap 5（2021 年釋出）是 Bootstrap 的最新版本；它支援所有主要瀏覽器和平臺的最新穩定版本。但是，不支援 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 4 與所有現代瀏覽器（Chrome、Firefox、Internet Explorer 10+、Edge、Safari 和 Opera）相容
如何獲取 Bootstrap 4？
有兩種方法可以在您自己的網站上開始使用 Bootstrap 4。
您可以
- 從 CDN 包含 Bootstrap 4
- 從 getbootstrap.com 下載 Bootstrap 4
Bootstrap 4 CDN
如果您不想自己下載和託管 Bootstrap 4，您可以從 CDN（內容分發網路）中包含它。
jsDelivr 為 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支援。您還必須包含 jQuery
jsDelivr
<!-- 最新編譯和壓縮的 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<!-- jQuery 庫 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- 最新編譯的 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
使用 Bootstrap 4 CDN 的一個優點
許多使用者在訪問其他網站時已經從 jsDelivr 下載了 Bootstrap 4。因此，當他們訪問您的網站時，它將從快取中載入，從而縮短載入時間。此外，大多數 CDN 會確保一旦使用者向其請求檔案，該檔案將從離他們最近的伺服器提供，這也縮短了載入時間。
jQuery 和 Popper 嗎？
Bootstrap 4 使用 jQuery 和 Popper.js 來實現 JavaScript 元件（如模態框、工具提示、彈出框等）。但是，如果您只使用 Bootstrap 的 CSS 部分，則不需要它們。
- 可關閉的提醒
- 用於切換狀態的按鈕和複選框/單選按鈕
- 用於幻燈片、控制元件和指示器的輪播
- 用於切換內容的摺疊
- 下拉選單（還需要 Popper.js 來實現完美的定位）
- 模態框（開啟和關閉）
- 導航欄（用於可摺疊選單）
- 工具提示和彈出框（還需要 Popper.js 來實現完美的定位）
- 滾動監視器用於滾動行為和導航更新
下載 Bootstrap 4
如果您想自己下載並託管 Bootstrap 4，請訪問 https://bootstrap.tw/，並按照那裡的說明進行操作。
使用 Bootstrap 4 建立第一個網頁
1. 新增 HTML5 doctype
Bootstrap 4 使用需要 HTML5 doctype 的 HTML 元素和 CSS 屬性。
始終在頁面開頭包含 HTML5 doctype，以及 lang 屬性和正確的字元集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 4 是移動優先的
Bootstrap 4 被設計為響應移動裝置。移動優先樣式是核心框架的一部分。
為確保正確渲染和觸控縮放，請在<head>元素內新增以下<meta>標籤
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 部分將頁面的寬度設定為與裝置的螢幕寬度一致（這將因裝置而異）。
initial-scale=1部分設定了頁面首次由瀏覽器載入時的初始縮放級別。
3. 容器
Bootstrap 4 還需要一個包含元素來包裝網站內容。
有兩種容器類可供選擇
.container類提供了一個響應式的固定寬度容器.container-fluid類提供了一個全寬度容器，跨越視口的整個寬度
兩個基本的 Bootstrap 4 頁面
以下示例顯示了一個基本的 Bootstrap 4 頁面的程式碼（帶有響應式固定寬度容器）
容器示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>This is some text.</p>
</div>
</body>
</html>
自己動手試一試 »
以下示例顯示了一個基本的 Bootstrap 4 頁面的程式碼（帶有全寬容器）
容器流體示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>This is some text.</p>
</div>
</body>
</html>
自己動手試一試 »
