零基礎學Bootstrap5佈局：響應式網格實戰指南

Bootstrap5 是一個流行的前端框架，能幫我們快速構建響應式網頁。所謂“響應式”，就是網頁能自動適配手機、平板、電腦等不同設備的屏幕尺寸。對零基礎來說，Bootstrap 最核心的功能之一就是響應式網格系統，用它可以輕鬆實現不同屏幕下的佈局變化。接下來我們一步步學習。

一、安裝 Bootstrap5¶

剛開始學，最簡單的方式是用 CDN 引入 Bootstrap 的 CSS 和 JavaScript 文件。在 HTML 頁面的 <head> 里加入 Bootstrap 的 CSS 鏈接，在 <body> 結束前加入 JavaScript 鏈接（因爲 Bootstrap 的交互功能需要 JS 支持）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 引入 Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>零基礎學 Bootstrap5 佈局</title>
</head>
<body>

  <!-- 頁面內容 -->

  <!-- 引入 Bootstrap5 JS（依賴 Popper.js，這裏用 CDN 一起引入） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

這樣，Bootstrap5 就安裝好了，接下來可以直接用它的類名寫佈局了。

二、響應式網格系統核心概念¶

Bootstrap 的網格系統基於 “容器（container）→ 行（row）→ 列（col）” 三層結構，就像搭積木一樣：

容器（container）：包裹整個內容，讓頁面居中顯示，並且在不同屏幕下自動調整寬度（比如手機端左右留邊距，電腦端居中）。
行（row）：用來創建水平佈局，必須放在容器內，並且會自動處理列的排列。
列（col）：真正的內容區域，用來劃分頁面的寬度。Bootstrap 把頁面寬度分爲 12 列，列的大小用“佔 12 列中的幾列”表示（比如佔 4 列就是 col-4）。

三、列的斷點與佔比¶

不同設備的屏幕尺寸不同，Bootstrap 用 “斷點” 來區分屏幕大小，比如：
- xs：超小屏幕（手機，寬度 < 576px）
- sm：小屏幕（平板豎屏，≥576px）
- md：中等屏幕（平板橫屏，≥768px）
- lg：大屏幕（電腦，≥992px）
- xl：超大屏幕（寬屏電腦，≥1200px）

列的類名格式是 col-<斷點>-<佔比>，比如：
- col-md-4：在中等屏幕（≥768px）及以上，這列佔 4 列（12 列中的 4 列，即寬度的 1/3）。
- 如果不加斷點（比如 col-6），默認是所有屏幕尺寸下都佔 6 列（寬度的 1/2）。

四、實戰：用網格系統做響應式佈局¶

我們來做一個簡單的頁面，內容區用網格系統實現不同屏幕下的佈局變化。目標是：在手機上“1 列顯示”，平板上“2 列顯示”，電腦上“3 列顯示”。

示例代碼：響應式三列布局¶

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 關鍵：讓手機正確識別屏幕寬度 -->
  <title>響應式網格實戰</title>
  <!-- 引入 Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- 頂部導航欄（簡單示例） -->
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">我的網站</a>
    </div>
  </nav>

  <!-- 內容區：響應式網格 -->
  <div class="container my-4"> <!-- my-4 是 Bootstrap 自帶的“margin-top:1rem”，讓內容和導航欄有間距 -->
    <div class="row"> <!-- 行 -->
      <!-- 第一列：手機 1 列，平板 6 列，電腦 4 列 -->
      <div class="col-sm-12 col-md-6 col-lg-4 bg-white border p-3">
        <h5>欄目 1</h5>
        <p>這是第一列內容，會在手機上佔滿寬度，平板上佔一半，電腦上佔 1/3。</p>
      </div>

      <!-- 第二列：手機 1 列，平板 6 列，電腦 4 列 -->
      <div class="col-sm-12 col-md-6 col-lg-4 bg-white border p-3">
        <h5>欄目 2</h5>
        <p>這是第二列內容，和第一列結構相同，只是內容不同。</p>
      </div>

      <!-- 第三列：手機 1 列，平板 12 列，電腦 4 列 -->
      <div class="col-sm-12 col-md-12 col-lg-4 bg-white border p-3">
        <h5>欄目 3</h5>
        <p>這是第三列內容，在手機和平板上佔滿寬度，電腦上佔 1/3。</p>
      </div>
    </div>
  </div>

  <!-- 頁腳 -->
  <footer class="bg-dark text-white text-center py-3">
    <div class="container">
      <p>© 2023 我的網站 - 響應式佈局示例</p>
    </div>
  </footer>

  <!-- 引入 Bootstrap5 JS（交互功能需要） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代碼解釋：¶

col-sm-12 col-md-6 col-lg-4：
col-sm-12：手機（sm 及以上）時，佔 12 列（即屏幕寬度的 100%）。
col-md-6：平板（md 及以上）時，佔 6 列（即屏幕寬度的 50%）。
col-lg-4：電腦（lg 及以上）時，佔 4 列（即屏幕寬度的 33.3%）。
bg-white border p-3：bg-white 背景色爲白色，border 加邊框，p-3 內邊距（padding）爲 16px，這些都是 Bootstrap 自帶的“快捷樣式”，能快速美化內容。

五、常用小技巧：快速美化頁面¶

除了網格系統，Bootstrap 還有很多輔助類，能幫你快速調整樣式，比如：
- 文本居中：text-center（讓文字居中）
- 背景色：bg-primary（藍色）、bg-success（綠色）、bg-light（淺灰）等（Bootstrap 自帶顏色庫）
- 內邊距/外邊距：p-3（內邊距 1rem）、m-3（外邊距 1rem），數字越大間距越大（0-5）
- 卡片：card 類，把內容包裝成卡片樣式（更美觀）

六、總結¶

Bootstrap5 響應式網格系統的核心是 “12 列布局 + 斷點適配”，通過 col-<斷點>-<佔比> 類名就能輕鬆實現不同屏幕下的佈局變化。現在你可以：
1. 複製上面的示例代碼，在瀏覽器中打開，調整窗口大小，看看不同設備下的佈局變化。
2. 嘗試修改 col-md-6 爲 col-md-4，看看列的寬度是否變化。
3. 給列添加 bg-primary 或 text-danger 等顏色類，體驗 Bootstrap 的快捷樣式。

剛開始可能覺得類名有點多，但多寫幾次就能記住。Bootstrap 最大的優勢是“開箱即用”，不用重複寫 CSS，專注於內容本身就好。接下來可以嘗試用網格系統做更復雜的頁面，比如導航欄、圖片輪播等，慢慢熟悉它的其他功能~