響應式網頁設計基礎：容器系統 (Containers)
更新於 2024/12/10閱讀時間約 7 分鐘
在 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建立全寬設計。 - 根據頁面需求選擇適合的容器類別，甚至混合使用以達到最佳布局效果。
25會員
68內容數
留言0
查看全部
本篇參與的主題活動
你可能也想看
Google News 追蹤
本文探討了複利效應的重要性，並藉由巴菲特的投資理念，說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式，不僅能減少情緒影響，還能持續參與全球股市的發展。此外，文中介紹了使用國泰 Cube App 的便利性及低手續費，幫助投資者簡化投資流程，達成長期穩定增長的財務目標。
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
浮動（float）是早期用來創建佈局的技術。元素可以向左或向右浮動，旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
前言
上次我們初步體驗 Docker 快速佈署能力，今天我們要來講解 Dockerfile、Docker Image 與 Docker Container 這些常見的名詞，我們來了解在我們佈署的時候做哪些事情
Docker 佈署流程
首先看到如下圖上半部，在我們一個完整的佈署流程，我們會先將我
引言
在當今的技術世界中，Kubernetes 已成為容器化應用的領導平台。作為一個高效的容器編排系統，它不僅管理著容器的部署和擴展，還提供了必要的自動化支持，以保證應用的高可用性和性能。在這個框架中，自動擴展功能起著至關重要的作用，特別是在面對不斷變化的負載和需求時。
前言
上次我們針對 Docker 這樣容器化技術做了一點介紹，今天我們要來講解 Docker 架構，你是否發現在每次程式上伺服器的流程很麻煩呢 ? 是否發現你寫的程式在別的作業系統不能用呢 ? 如果你遇到這些問題，Docker 都可以幫助你解決這些問題
Docker 架構
在 Docker 這
前言
大家好我們今天要來教 Docker 這項技術，什麼是 Docker ? Docker 可以幫助我們做什麼事情 ?
Docker 是一項容器化技術，他可以降低我們在佈署 App 時，讓我們可以有效的分配作業系統資源，降低佈署作業成本，現在讓我們來了解 Docker 要解決的問題
傳統佈署遇
本文探討了複利效應的重要性，並藉由巴菲特的投資理念，說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式，不僅能減少情緒影響，還能持續參與全球股市的發展。此外，文中介紹了使用國泰 Cube App 的便利性及低手續費，幫助投資者簡化投資流程，達成長期穩定增長的財務目標。
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
浮動（float）是早期用來創建佈局的技術。元素可以向左或向右浮動，旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
前言
上次我們初步體驗 Docker 快速佈署能力，今天我們要來講解 Dockerfile、Docker Image 與 Docker Container 這些常見的名詞，我們來了解在我們佈署的時候做哪些事情
Docker 佈署流程
首先看到如下圖上半部，在我們一個完整的佈署流程，我們會先將我
引言
在當今的技術世界中，Kubernetes 已成為容器化應用的領導平台。作為一個高效的容器編排系統，它不僅管理著容器的部署和擴展，還提供了必要的自動化支持，以保證應用的高可用性和性能。在這個框架中，自動擴展功能起著至關重要的作用，特別是在面對不斷變化的負載和需求時。
前言
上次我們針對 Docker 這樣容器化技術做了一點介紹，今天我們要來講解 Docker 架構，你是否發現在每次程式上伺服器的流程很麻煩呢 ? 是否發現你寫的程式在別的作業系統不能用呢 ? 如果你遇到這些問題，Docker 都可以幫助你解決這些問題
Docker 架構
在 Docker 這
前言
大家好我們今天要來教 Docker 這項技術，什麼是 Docker ? Docker 可以幫助我們做什麼事情 ?
Docker 是一項容器化技術，他可以降低我們在佈署 App 時，讓我們可以有效的分配作業系統資源，降低佈署作業成本，現在讓我們來了解 Docker 要解決的問題
傳統佈署遇