在網頁開發中，讓頁面在手機、平板、電腦等不同設備上都能良好顯示（即“響應式佈局”）是必備技能。而Bootstrap5作爲最流行的前端框架之一，能幫我們快速實現這一目標。本文將用最簡單的方式，帶你一步步掌握Bootstrap5響應式佈局的核心用法。
一、爲什麼選擇Bootstrap5？¶
- 響應式設計：自動適配手機、平板、電腦等不同屏幕尺寸，無需手動寫複雜的CSS媒體查詢。
- 柵格系統：基於12列網格佈局，用“行（row）”和“列（col）”快速劃分頁面。
- 組件豐富：自帶導航、按鈕、卡片等常用組件，無需從零開發。
- 輕量高效：通過CDN引入，無需本地安裝，新手也能快速上手。
二、引入Bootstrap5¶
要使用Bootstrap5，首先需要在HTML中引入它的CSS和JS文件。推薦用CDN（內容分發網絡）方式，無需下載本地文件。
完整引入代碼（在<head>和</body>中）：¶
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 關鍵：讓手機瀏覽器識別屏幕寬度，避免頁面縮放錯誤 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap響應式佈局示例</title>
<!-- 引入Bootstrap5的CSS樣式 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 頁面內容在這裏 -->
<!-- 引入Bootstrap5的JS（若需下拉菜單、模態框等交互功能，需引入） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
提示：
<meta name="viewport">是響應式的關鍵，它告訴瀏覽器“以設備寬度爲基準，初始縮放1倍”，否則手機上頁面可能被放大或縮小。
三、響應式佈局核心：柵格系統¶
Bootstrap5的響應式佈局基於“12列網格系統”，通過 行（row） 和 列（col） 實現。核心邏輯是：
- 頁面寬度被分爲12等份（12列）。
- 用row包裹內容，用col-*指定列的寬度，*爲列數（1-12）。
- 通過不同的“斷點前綴”適配不同屏幕尺寸（如手機、平板、電腦）。
1. 屏幕尺寸斷點與前綴¶
Bootstrap5默認提供5個斷點（不同屏幕的最小寬度），對應前綴如下：
- xs：手機（默認，無前綴，<576px）
- sm：小平板（≥576px）
- md：中等平板（≥768px）
- lg：大平板/小電腦（≥992px）
- xl：電腦（≥1200px）
例子：
col-sm-4表示“小屏幕及以上時，列佔4列”（即12列中的4列，約佔頁面寬度33.3%）。
2. 容器（Container）¶
所有內容需用 容器 包裹，容器分爲兩種：
- container：固定寬度，在大屏幕上居中顯示（避免內容過寬）。
- container-fluid：全屏寬度，無左右邊距（適合全屏佈局）。
<div class="container"> <!-- 固定寬度容器 -->
<div class="row"> <!-- 行 -->
<div class="col"> <!-- 列（默認佔12列，即全屏） -->
內容1
</div>
<div class="col"> <!-- 列（默認佔12列，即全屏） -->
內容2
</div>
</div>
</div>
四、實戰：從手機到PC的佈局實現步驟¶
下面通過一個“頭部+導航+內容+側邊欄+底部”的完整頁面，演示如何用Bootstrap5實現響應式佈局。
步驟1：搭建基礎結構¶
先創建一個簡單的HTML頁面，引入Bootstrap5的CDN：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5響應式示例</title>
<!-- 引入Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 頁面內容開始 -->
<!-- 頁面內容結束 -->
<!-- 引入Bootstrap5 JS（需交互功能時用） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
步驟2：添加頭部（Header）和底部（Footer）¶
用bg-primary設置背景色，text-white設置文字顏色，py-3設置上下內邊距（padding）：
<!-- 頭部 -->
<header class="bg-primary text-white py-3">
<div class="container"> <!-- 容器包裹內容 -->
<h1>我的網站</h1>
</div>
</header>
<!-- 底部 -->
<footer class="bg-dark text-white py-3 text-center">
<div class="container">
<p>© 2023 我的網站</p>
</div>
</footer>
步驟3：添加導航欄（Navbar）¶
用navbar類創建導航，navbar-expand-lg讓導航在大屏幕上展開：
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="#">Logo</a>
<!-- 導航菜單 -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">首頁</a></li>
<li class="nav-item"><a class="nav-link" href="#">產品</a></li>
<li class="nav-item"><a class="nav-link" href="#">關於</a></li>
</ul>
</div>
</div>
</nav>
步驟4：內容區與側邊欄（核心響應式佈局）¶
用row包裹內容和側邊欄，通過col-*設置不同屏幕下的列寬：
- 大屏幕（lg）：內容區佔9列，側邊欄佔3列（col-lg-9和col-lg-3）。
- 小屏幕（sm）：內容區和側邊欄都佔12列（col-sm-12，自動堆疊）。
<div class="container my-4"> <!-- my-4：上下邊距 -->
<div class="row"> <!-- 行 -->
<!-- 內容區 -->
<div class="col-lg-9">
<div class="card mb-4"> <!-- 卡片組件，帶下邊距 -->
<div class="card-body">
<h2 class="card-title">主內容</h2>
<p>這裏是文章/產品列表等主要內容，在大屏幕上佔9列。</p>
</div>
</div>
</div>
<!-- 側邊欄 -->
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<h3 class="card-title">側邊欄</h3>
<p>這裏是分類、推薦等輔助內容，在大屏幕上佔3列。</p>
</div>
</div>
</div>
</div>
</div>
五、關鍵知識點總結¶
- 響應式核心：通過
col-*類的斷點前綴（sm、md、lg等），讓列在不同屏幕尺寸下自動調整寬度。 - 柵格規則：每行（row）最多12列，列數總和不超過12。
- 容器作用：用
container固定寬度，避免內容過寬；container-fluid全屏。 - 常用輔助類：
-text-center：文本居中；
-bg-*：背景色（如bg-primary）；
-mb-*/py-*：邊距/內邊距（如mb-4表示下邊距4單位）。
六、效果預覽¶
- 手機/小平板：側邊欄自動堆疊在內容區下方，所有列佔滿屏幕寬度（
col-sm-12）。 - 中等/大屏幕：內容區佔9列，側邊欄佔3列（
col-lg-9和col-lg-3），佈局緊湊有序。
總結¶
Bootstrap5的響應式佈局核心是“柵格系統+斷點設置”，通過簡單的col-*類就能快速實現多設備適配。只需引入CDN、用container包裹內容、row劃分行、col-*定義列，就能讓頁面在手機、PC等設備上“自適應”顯示。
現在就可以動手嘗試：複製上述代碼到HTML文件，調整不同屏幕尺寸下的列寬，體驗響應式佈局的神奇之處吧！