期權練功坊
陳Solomen
更新於 2024/12/10閱讀時間約 7 分鐘

安裝與引入 Bootstrap 5

Bootstrap 提供多種安裝方式以滿足不同開發環境的需求。以下將逐步介紹使用 CDN、npm/yarn 和本地安裝的方式，並說明如何引入 Bootstrap。

1. 使用 CDN 快速開始

CDN (Content Delivery Network) 是最快速的方式，無需下載檔案，直接透過網頁連結引入 Bootstrap 的 CSS 和 JavaScript。

步驟

  1. 引入 CSS
    • 在 <head> 中加入以下 <link> 標籤：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  1. 引入 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 的壓縮檔進行本地安裝。

步驟

  1. 下載 Bootstrap 檔案
    • 前往 Bootstrap 官方網站。
    • 下載最新的 Compiled CSS and JS 壓縮檔。
  3. 解壓縮檔案
    • 解壓後的目錄結構如下：
bootstrap/
├── css/ 
│		├── bootstrap.min.css 	
│		└── bootstrap.min.css.map 
├── js/ 
│ 	├── bootstrap.bundle.min.js 
│ 	└── bootstrap.bundle.min.js.map
  1. 引入 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 是模組化專案開發的首選，易於整合其他工具。
  • 本地安裝 適合無法訪問網路的場景，需管理檔案版本。

選擇適合的方式，依需求進行引入即可！

分享至
成為作者繼續創作的動力吧！
期權練功坊
追蹤
期權練功坊
追蹤
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

金融工程師的筆記 的其他內容

你可能也想看

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.