更新於 2024/12/10發佈於 2024/12/10閱讀時間約 7 分鐘

響應式網頁設計基礎：容器系統 (Containers)

在 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/bootstrap@5.3.0-alpha3/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/bootstrap@5.3.0-alpha3/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/bootstrap@5.3.0-alpha3/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/bootstrap@5.3.0-alpha3/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/bootstrap@5.3.0-alpha3/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/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

執行結果:

學習要點

使用 .container 確保內容居中並有響應式行為。
使用 .container-fluid 建立全寬設計。
根據頁面需求選擇適合的容器類別，甚至混合使用以達到最佳布局效果。

分享至

成為作者繼續創作的動力吧！

期權練功坊

追蹤

響應式網頁設計基礎：容器系統 (Containers)

1. 什麼是容器 (Container)?

2. 固定寬度容器

執行結果:

3. 流體容器

範例

執行結果:

4. 比較：固定寬度容器 vs 流體容器

5. 實際應用：混合容器

範例

執行結果:

學習要點

作者的相關文章

金融工程師的筆記的其他內容

你可能也想看

發表回應

響應式網頁設計基礎：容器系統 (Containers)

1. 什麼是容器 (Container)?

2. 固定寬度容器

執行結果:

3. 流體容器

範例

執行結果:

4. 比較：固定寬度容器 vs 流體容器

5. 實際應用：混合容器

範例

執行結果:

學習要點

作者的相關文章

金融工程師的筆記 的其他內容

你可能也想看

發表回應

金融工程師的筆記的其他內容