Bootstrap 入門
什麼是 Bootstrap？
- Bootstrap 是一個免費的前端框架，可用於更快、更輕鬆的 Web 開發
- Bootstrap 包含基於 HTML 和 CSS 的設計模板，用於排版、表單、按鈕、表格、導航、模態框、圖片輪播等，以及可選的 JavaScript 外掛
- Bootstrap 還使您能夠輕鬆建立響應式設計
什麼是響應式網頁設計？
響應式 Web 設計是指建立能夠自動調整以在所有裝置上良好顯示的網站，從小型手機到大型桌面。
Bootstrap 示例
<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 由 Mark Otto 和 Jacob Thornton 在 Twitter 開發，並於 2011 年 8 月作為開源產品在 GitHub 釋出。
2014 年 6 月，Bootstrap 成為 GitHub 上的第一名專案！
為什麼要使用 Bootstrap？
Bootstrap 的優勢
- 易於使用： 任何僅具備基本 HTML 和 CSS 知識的人都可以開始使用 Bootstrap
- 響應式功能： Bootstrap 的響應式 CSS 可適應手機、平板電腦和桌面裝置
- 移動優先方法： 在 Bootstrap 3 中，移動優先樣式是核心框架的一部分
- 瀏覽器相容性： Bootstrap 與所有現代瀏覽器（Chrome、Firefox、Internet Explorer、Edge、Safari 和 Opera）相容
Bootstrap 版本
本教程遵循Bootstrap 3，它於 2013 年釋出。但是，我們也涵蓋了新版本；Bootstrap 4（2018 年釋出）和Bootstrap 5（2021 年釋出）。
Bootstrap 5是Bootstrap的最新版本；擁有新元件、更快的樣式表、更強的響應性等。它支援所有主要瀏覽器和平臺的最新穩定版本。但是，不支援 Internet Explorer 11 及更早版本。
Bootstrap 5 與 Bootstrap 3 和 4 的主要區別在於，Bootstrap 5 已切換到JavaScript而不是jQuery。
注意：Bootstrap 3和 Bootstrap 4 仍由團隊支援關鍵錯誤修復和文件更改，並且可以安全地繼續使用它們。但是，不會向它們新增新功能。
在哪裡獲取 Bootstrap？
有兩種方法可以在您自己的網站上開始使用 Bootstrap。
您可以
- 從 getbootstrap.com 下載 Bootstrap
- 從 CDN 包含 Bootstrap
下載 Bootstrap
如果您想自己下載並託管 Bootstrap，請訪問getbootstrap.com，並按照那裡的說明進行操作。
Bootstrap CDN
如果您不想自己下載和託管 Bootstrap，可以從 CDN（內容分發網路）包含它。
MaxCDN 為 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支援。您還必須包含 jQuery
MaxCDN
<!-- 最新編譯和壓縮的 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery 庫 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 最新編譯的 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
使用 Bootstrap CDN 的一個優點
許多使用者在訪問其他網站時已經從 MaxCDN 下載了 Bootstrap。因此，當他們訪問您的網站時，它將從快取中載入，從而縮短載入時間。此外，大多數 CDN 會確保一旦使用者向其請求檔案，該檔案將從離他們最近的伺服器提供，這也將縮短載入時間。
jQuery
Bootstrap 使用jQuery來處理 JavaScript 外掛（如模態框、工具提示等）。但是，如果您只使用 Bootstrap 的 CSS 部分，則不需要 jQuery。
使用 Bootstrap 建立第一個網頁
1. 新增 HTML5 doctype
Bootstrap 使用需要 HTML5 doctype 的 HTML 元素和 CSS 屬性。
始終在頁面開頭包含 HTML5 doctype，以及 lang 屬性和正確的字元集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 是移動優先的
Bootstrap 3 被設計為響應手機裝置。移動優先樣式是核心框架的一部分。
為確保正確渲染和觸控縮放，請在<head>元素內新增以下<meta>標籤
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 部分將頁面的寬度設定為與裝置的螢幕寬度一致（這將因裝置而異）。
initial-scale=1部分設定了頁面首次由瀏覽器載入時的初始縮放級別。
3. 容器
Bootstrap 還需要一個包含元素來包裝網站內容。
有兩種容器類可供選擇
.container類提供了一個響應式的固定寬度容器.container-fluid類提供了一個全寬度容器，跨越視口的整個寬度
兩個基本的 Bootstrap 頁面
以下示例顯示了一個基本的 Bootstrap 頁面的程式碼（帶有一個響應式固定寬度容器）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>This is some text.</p>
</div>
</body>
</html>
自己動手試一試 »
以下示例顯示了一個基本的 Bootstrap 頁面的程式碼（帶有一個全寬度容器）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>This is some text.</p>
</div>
</body>
</html>
自己動手試一試 »
