什么是 Bootstrap？

Bootstrap 是一個開源的前端框架，用于快速開發響應式（Responsive）和美觀的網頁。它包含：

? HTML 組件（導航欄、按鈕、表單等）

? CSS 樣式（網格系統、排版、顏色等）

? JavaScript 交互（模態框、輪播圖、工具提示等）

官網：Bootstrap · The most popular HTML, CSS, and JS library in the world.

---

Bootstrap 主要特性

1. 響應式設計（Responsive）

? 適配桌面、平板、手機等不同設備

? 使用 Flexbox & Grid 布局

2. 豐富的 UI 組件

? 按鈕、表單、表格、導航欄等

3. 基于 CSS & JavaScript

? CSS 組件（顏色、排版、間距）

? JavaScript 插件（模態框、輪播圖、警告框）

4. 易用性

? 只需引入 Bootstrap 的 CSS 和 JS，即可快速構建頁面

---

如何使用 Bootstrap？

方法 1：CDN 引入（推薦）

無需下載，直接在 HTML 頭部引入：

<!-- Bootstrap 5 CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

方法 2：本地安裝

npm install bootstrap

然后在 index.html 引入：

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

---

1. 網格系統（Grid System）

Bootstrap 使用 row + col 布局，基于 12 列柵格系統：

<div class="container"><div class="row"><div class="col-md-4">列1</div><div class="col-md-4">列2</div><div class="col-md-4">列3</div></div>
</div>

col-md-4 表示：

? md（medium）屏幕 及以上占 4/12 列

? 適配桌面、平板、手機等不同屏幕尺寸

自適應布局

<div class="row"><div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div><div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div><div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div><div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div>
</div>

不同設備寬度

斷點	col-sm-*	col-md-*	col-lg-*
小屏（≤576px）	100% 寬度	50%	33.33%

---

2. 按鈕（Buttons）

Bootstrap 提供多種按鈕樣式：

<button class="btn btn-primary">主按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危險</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">信息</button>

按鈕大小

<button class="btn btn-lg btn-primary">大按鈕</button>
<button class="btn btn-sm btn-secondary">小按鈕</button>

---

3. 表單（Forms）

<form><div class="mb-3"><label class="form-label">