DAY 05 | 切版實作：Bootstrap 5 網格系統與響應式佈局 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2026 iThome 鐵人賽

DAY 5

Modern Web

從 UI/UX 設計到前端實作：30 天打造專屬的任務學習計時器系列第 5 篇

DAY 05 | 切版實作：Bootstrap 5 網格系統與響應式佈局

18th鐵人賽

aria_carrot

2026-09-18 23:19:07

60 瀏覽

分享至

🐥 新手開發日記
本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主，如果發現內容較為簡單，(沒錯！你是對的xD！)還請多多包涵。

在完成了 Figma Mockup 與核心流程圖（Happy Path）後，接下來就要正式進入程式碼實作階段，我們將運用 Bootstrap 5 的元件與網格系統進行畫面切版。

1.引入 Bootstrap 5 CDN

要使用 Bootstrap 5，最快速的方式是在 HTML 中直接引入 CDN：

CSS 樣式：放至<head>標籤內。

<link   href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

JavaScript 模組：放置於</body>結束標籤前（因為之後會使用到 Modal、Toast 與 Tab 等互動元件）。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
  crossorigin="anonymous"
></script>

(參考資料：Bootstrap 5 Introduction)

2.運用 Grid System 打造響應式佈局

為了在單一頁面呈現多功能，我們採用 Grid System（網格系統） 來切割側邊選單與主要內容區。

Bootstrap 網格核心觀念：

欄位 (Columns)：總數固定為 12 欄。
間距 (Gutter)：預設為 1.5rem（即 16px x 1.5 = 24px）。
Mobile First (行動優先)：Bootstrap 預設樣式優先套用到手機端，再透過斷點（Breakpoints）擴充更大尺寸。

斷點設定與佈局規劃：

根據設計稿需求：

小螢幕/手機版：側邊選單與內容區皆為滿版（12 欄，預設省略不寫）。
中大螢幕 (≥ 768px)：左側 Tab 選單佔 3 欄 (col-md-3)，右側內容區佔 9 欄 (col-md-9)。

主要斷點尺寸參考：

名稱	斷點
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px
xxl	≥1400px

(參考資料：Bootstrap 5 Grid System)

網格骨架實作

我們在 div 加上 .border 輔助框線，方便在瀏覽器確認是否成功依據斷點切分比例：

<div class="container my-4">
  <div class="row">
    <!-- 左側選單：手機版 100%、md 以上佔 3 欄 -->
    <div class="col-md-3 mb-3">
      <div class="border p-3">Tab 選單區</div>
    </div>
    
    <!-- 右側內容：手機版 100%、md 以上佔 9 欄 -->
    <div class="col-md-9">
      <div class="border p-3">選單內容區</div>
    </div>
  </div>
</div>

[介面呈現]
grid system設定