在 Bootstrap 5 中，容器（Container）是響應式網頁設計的基礎結構，用於包裹網頁內容，並為內部元素提供對齊和間距。容器分為 固定寬度容器 和 流體容器 兩種形式。
1. 什麼是容器 (Container)?
- 容器是 Bootstrap 提供的核心布局工具。
- 容器確保內容在不同裝置上自動調整寬度，適配各種螢幕大小。
- 可以與 網格系統 (Grid) 一起使用來建立靈活的響應式設計。
2. 固定寬度容器
- 固定寬度容器 是指根據螢幕大小，在特定斷點設定最大寬度。
- 使用
.container類別來建立固定寬度容器。 - 當螢幕寬度小於斷點時，容器將變為流體（即全寬）。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定寬度容器</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container bg-light p-4">
<h1>固定寬度容器</h1>
<p>此容器的寬度會根據螢幕大小調整，並在特定斷點設置最大寬度。</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
執行結果:
3. 流體容器
- 流體容器 是指容器的寬度永遠為 100%，無論螢幕大小。
- 使用
.container-fluid類別來建立流體容器。
範例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流體容器</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-info text-white p-4">
<h1>流體容器</h1>
<p>此容器的寬度始終為 100%，適合全螢幕布局。</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
執行結果:
4. 比較：固定寬度容器 vs 流體容器
類別寬度行為適用場景
.container
根據螢幕大小，設置最大寬度。
適用於內容需要居中的固定寬度設計。
.container-fluid
寬度始終為 100%，覆蓋整個螢幕寬度。
適合全屏布局或需要完全覆蓋的設計。
5. 實際應用：混合容器
在實際開發中，你可以根據需要混合使用不同的容器類別。例如，在頁面頂部使用流體容器，主內容部分使用固定寬度容器。
範例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>混合容器</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 流體容器 -->
<div class="container-fluid bg-dark text-white p-3">
<h1>網站標題 (流體容器)</h1>
</div>
<!-- 固定寬度容器 -->
<div class="container bg-primary p-4 mt-3 text-white">
<h2>主要內容 (固定寬度容器)</h2>
<p>此部分內容將根據螢幕大小設置適當的最大寬度，居中顯示。</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
執行結果:
學習要點
- 使用
.container確保內容居中並有響應式行為。 - 使用
.container-fluid建立全寬設計。 - 根據頁面需求選擇適合的容器類別，甚至混合使用以達到最佳布局效果。
