HTML PPT 4(A) - Bootstrap | Bootstrap 框架入門

什麼是 Bootstrap？

Bootstrap 是由 Twitter 開發的一個免費開源的前端框架，用於快速開發響應式網站和 Web 應用程序。

響應式設計： 自動適應不同設備屏幕大小（手機、平板、電腦）
預定義組件： 提供豐富的 UI 組件如按鈕、導航欄、表單等
網格系統： 強大的 12 列網格系統，輕鬆實現佈局
瀏覽器兼容： 支持所有現代瀏覽器

Bootstrap 核心概念

1. 網格系統 (Grid System)

Bootstrap 的網格系統基於彈性盒子（Flexbox），使用一系列的行（row）和列（col）來創建佈局。

使用 .container 或 .container-fluid 包含內容
使用 .row 創建水平行
使用 .col-* 創建列（* 代表屏幕尺寸）

2. 響應式斷點

Bootstrap 包含五個響應式斷點，對應不同的設備尺寸：

Extra small (.col-): < 576px （超小設備 - 手機）
Small (.col-sm-): ≥ 576px （小設備 - 平板）
Medium (.col-md-): ≥ 768px （中等設備 - 平板）
Large (.col-lg-): ≥ 992px （大設備 - 電腦）
Extra large (.col-xl-): ≥ 1200px （超大設備 - 大屏電腦）

3. 預定義組件

Bootstrap 提供了許多預定義的 UI 組件，包括：

導航欄（Navbars）
按鈕（Buttons）
表單（Forms）
表格（Tables）
警報框（Alerts）
卡片（Cards）
模態框（Modals）

Bootstrap 練習步驟

步驟 1：引入 Bootstrap

要在網頁中使用 Bootstrap，需要引入其 CSS 和 JavaScript 文件：

將 Bootstrap 鏈接 "link href" 放在自定義樣式表之前，這樣可以確保您的自定義樣式能夠覆蓋 Bootstrap 的默認樣式。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <!-- 頁面內容 -->
  
  <!-- jQuery, Popper.js, Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
        

注意：Bootstrap 的 JavaScript 功能依賴 jQuery 和 Popper.js，所以需要按正確順序引入。

jQuery 函式庫。

Bootstrap 4 的 JavaScript 元件（像是 modal、dropdown、collapse、carousel 等）是用 jQuery 實作的，所以必須先載入 jQuery。提供更簡單的 DOM 操作、事件處理、動畫…等功能。

Popper.js，用來處理「浮動元素」的位置計算。

Bootstrap 4 以下這些都需要 Popper.js 來決定「應該出現在按鈕的上、下、左、右哪一側」。

Dropdown（下拉選單）
Tooltip（提示文字）
Popover（氣泡提示）

Bootstrap JS 程式碼。

負責啟用 Bootstrap 的互動元件，它會利用 jQuery 與 Popper.js 提供的功能來實現這些效果。例如：

.modal（對話框）
.dropdown（下拉選單）
.collapse（手風琴 / 收合區塊，像 navbar 的摺疊）
.carousel（輪播）
.alert 的關閉按鈕

步驟 2：使用容器 (Container)

Bootstrap 提供兩種容器類型：

.container: 固定寬度容器，具有響應式間距
.container-fluid: 全寬容器，跨越整個視口寬度

<div class="container">
  <!-- 固定寬度內容 -->
</div>

<div class="container-fluid">
  <!-- 全寬內容 -->
</div>
        

步驟 3：創建網格佈局

使用 Bootstrap 的網格系統創建響應式佈局：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <!-- 佔據中等設備及以上屏幕的 4/12 宽度 -->
    </div>
    <div class="col-md-8">
      <!-- 佔據中等設備及以上屏幕的 8/12 宽度 -->
    </div>
  </div>
</div>
        

4 列

8 列

步驟 4：使用預定義組件

Bootstrap 提供了許多預定義組件，可以直接使用：

導航欄 (Navbar)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">網站名稱</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">首頁</a>
      </li>
    </ul>
  </div>
</nav>
        

表格 (Table)

<table class="table table-dark table-hover">
  <thead>
    <tr>
      <th>標題 1</th>
      <th>標題 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>數據 1</td>
      <td>數據 2</td>
    </tr>
  </tbody>
</table>
        

警報框 (Alert)

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>注意！</strong> 這是一個警告消息。
  <button type="button" class="close" data-dismiss="alert">×</button>
</div>
        

步驟 5：使用實用類 (Utility Classes)

Bootstrap 提供了大量的實用類來快速設置樣式：

<!-- 邊距 -->
<div class="m-2">四周邊距</div>
<div class="mt-3">頂部邊距</div>
<div class="p-4">四周內距</div>

<!-- 文字對齊 -->
<p class="text-center">居中對齊</p>
<p class="text-right">右對齊</p>

<!-- 背景色 -->
<div class="bg-primary text-white">主要顏色背景</div>
<div class="bg-success text-white">成功顏色背景</div>
        

實際練習成果預覽

點擊下面的連結查看完整的 Bootstrap 練習示例：

PPT 4 Bootstrap 最終版本參考

實際練習成果預覽

點擊下面的連結修改一下Bootstrap示例：

查看最終練習成果

常見問題與解決方法

1. 為什麼我的 Bootstrap 組件不起作用？

可能原因：

未正確引入 Bootstrap CSS 和 JS 文件
JS 文件引入順序錯誤（jQuery → Popper.js → Bootstrap）
缺少必要的 data-* 屬性（如 data-toggle, data-target 等）

2. 如何自定義 Bootstrap 樣式？

有幾種方式可以自定義 Bootstrap：

使用自定義 CSS 覆蓋默認樣式
使用 Bootstrap 的 Sass 變量和 mixins
使用 Bootstrap 官方提供的自定義工具