Bootstrap 入門：如何引用 CSS/JS 與元件使用指南

引用方式

CDN 快速開始（推薦生產）

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- JS Bundle (含 Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

本地離線（開發/內網）

1. 官網下載 Compiled CSS and JS 壓縮包。
2. 解壓至專案 lib/bootstrap/。
3. 頁面引用相對路徑：
   <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>

核心概念：Bootstrap = 預寫好的 CSS + JS 元件庫

• CSS：重置、排版、網格系統、工具類、元件樣式（按鈕、表單、卡片、導航…）。
• JS：互動元件（模態框、下拉選單、輪播圖、標籤頁、工具提示…），依賴 Popper.js 定位。
• 你**不需要從零寫 CSS**，只需在 HTML 標籤加上對應 class（如 btn btn-primary、container row col-6）即可套用樣式。

如何知道用哪個 class？

1. 官方文檔 Components、Utilities、Layout 章節：Bootstrap 5.3 文檔
2. 中文鏡像：Boot中文網、菜鳥教程
3. 瀏覽器開發者工具檢視官方範例頁面 class 結構。

常用入門範例

<div class="container mt-5">
  <div class="row">
    <div class="col-md-6"><button class="btn btn-primary w-100">主要按鈕</button></div>
    <div class="col-md-6"><button class="btn btn-secondary w-100">次要按鈕</button></div>
  </div>
</div>

避坑提醒

• Bootstrap 5 **移除 jQuery 依賴**，若舊專案用 jQuery 外掛需注意相容。
• 不要同時引用 v3/v4/v5 混用，class 名稱衝突嚴重。
• 自訂樣式請在 Bootstrap CSS **之後**引入，或用 Sass 變數覆蓋重新編譯。

多閱讀文檔、多實作範例，一週即可上手實戰。