Bootstrap 提供多種安裝方式以滿足不同開發環境的需求。以下將逐步介紹使用 CDN、npm/yarn 和本地安裝的方式，並說明如何引入 Bootstrap。
1. 使用 CDN 快速開始
CDN (Content Delivery Network) 是最快速的方式，無需下載檔案，直接透過網頁連結引入 Bootstrap 的 CSS 和 JavaScript。
步驟
- 引入 CSS
- 在 <head> 中加入以下 <link> 標籤：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
- 引入 JavaScript
- 在頁面底部加入以下 <script> 標籤：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
範例
html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap CDN</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center mt-5">使用 CDN 快速開始</h1>
<button class="btn btn-primary mt-3">點擊我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2. 使用 npm 或 yarn 安裝
如果你在使用 Node.js 進行專案開發，可以透過 npm 或 yarn 安裝 Bootstrap。
步驟
安裝 Bootstrap
- 使用 npm 安裝：
npm install bootstrap- 或使用 yarn 安裝：
yarn add bootstrap引入 CSS 和 JavaScript
- 在專案的主要 JavaScript 檔案中引入：
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
範例
// main.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
console.log('Bootstrap 已成功載入');
3. 本地安裝與檔案結構
若需在無法使用 CDN 或 npm 的環境下安裝，則可直接下載 Bootstrap 的壓縮檔進行本地安裝。
步驟
- 下載 Bootstrap 檔案
- 前往 Bootstrap 官方網站。
- 下載最新的 Compiled CSS and JS 壓縮檔。
- 解壓縮檔案
- 解壓後的目錄結構如下：
bootstrap/
├── css/
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
├── js/
│ ├── bootstrap.bundle.min.js
│ └── bootstrap.bundle.min.js.map
- 引入 CSS 和 JavaScript
- 引用方式與 CDN 類似，但將路徑改為本地檔案：
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
範例
html
複製程式碼<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 本地安裝</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center mt-5">本地安裝 Bootstrap</h1>
<button class="btn btn-success mt-3">按鈕示例</button>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
總結
- CDN 適合快速開始開發或測試。
- npm/yarn 是模組化專案開發的首選，易於整合其他工具。
- 本地安裝 適合無法訪問網路的場景，需管理檔案版本。
選擇適合的方式，依需求進行引入即可！
