安裝與引入 Bootstrap 5

更新於 2024/12/10發佈於 2024/12/10閱讀時間約 7 分鐘

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>