如何正確引用 Bootstrap 的 CSS 與 JS 檔案？新手完整指南

初次接觸 Bootstrap 時，面對龐大的 CSS 與 JS 檔案庫，許多開發者會感到困惑：究竟該引用哪些檔案？Bootstrap 是否意味著完全不需要自己撰寫 CSS？本文將為你釐清觀念，並提供實務上的引用建議。

Bootstrap 核心檔案架構

Bootstrap 將樣式與腳本模組化，主要包含以下核心檔案：

• bootstrap.css / bootstrap.min.css：完整樣式表，包含所有元件、網格系統、工具類別等。
• bootstrap.js / bootstrap.min.js：依賴 jQuery 的互動元件邏輯（如 Modal、Dropdown、Carousel 等）。
• Popper.js：Bootstrap 4/5 中 Tooltip、Popover 定位所需的第三方庫。

引用方式：CDN vs 本地部署

1. 使用 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>

優點：無需下載、自動快取、全球加速。缺點：離線環境無法使用。

2. 本地部署（適合生產環境或離線開發）

從官網下載編譯後的壓縮檔，解壓後放入專案目錄：

project/
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.bundle.min.js
└── index.html

在 HTML 中引用：

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

常見迷思澄清

「引用 Bootstrap 就不用寫 CSS 了嗎？」

不完全是。Bootstrap 提供的是通用設計語言與基礎元件，實際專案中仍需：

• 覆寫變數（如主色調、間距、字體）以符合品牌視覺。
• 撰寫專案專屬的元件樣式或版面微調。
• 善用 Utility Classes 快速原型開發，再逐步替換為語意化的自訂類別。

正確心法：Bootstrap 是「敏捷開發的加速器」，而非「樣式的終點」。

進階建議：模組化引入

若專案體積敏感，可透過 Sass 來源碼僅編譯所需模組（如僅需 Grid 與 Button），大幅減小檔案大小。需配置建置工具（Vite、Webpack、Gulp 等）。

快速檢查清單

1. 確認 HTML5 doctype：<!DOCTYPE html>
2. 加入響應式 meta 標籤：<meta name="viewport" content="width=device-width, initial-scale=1">
3. CSS 放在 <head>，JS 放在 </body> 之前。
4. 檢查 jQuery 依賴（Bootstrap 5 已移除 jQuery 依賴，僅需 Popper）。

掌握引用細節後，你就能專注於利用 Bootstrap 強大的元件庫快速構建介面，再針對專案需求進行客製化調整。