CSS RWD - 框架
Hello there, 動手開發網頁的夢想家們！今天，我們將踏上一段令人興奮的旅程，進入 CSS 响應式網頁設計（RWD）框架的世界。作為你們親切友善的電腦老師，我很高興能夠引導你們進入這個迷人的主題。如果你是編程新手，別擔心——我們會從基礎開始，逐步學習。所以，來一杯咖啡，放鬆身心，讓我們一起進入這個領域！
什麼是 CSS RWD 框架？
在我們探索特定的框架之前，讓我們先了解 CSS RWD 框架是什麼，以及為什麼它在現代網頁開發中如此重要。
CSS RWD 框架是預先編寫好的、標準化的 CSS 代碼包，幫助開發者快速有效地創建響應式網站。它們提供了經過預設樣式的組件和網格系統，能夠自動調整以適應不同的屏幕尺寸。
可以把這些框架想像成一套巨大的樂高積木。與其從頭開始建造一切，你手上有現成的積木，可以輕鬆地組合起來，創建一個美觀、響應式的網站。
現在，讓我們一起探索一些流行的 CSS RWD 框架！
CSS RWD 框架 - Bootstrap
Bootstrap 無疑是最受歡迎的 CSS 框架。它由 Twitter 創建，並因其易用性和詳盡的文件而受到全球開發者的喜愛。
開始使用 Bootstrap
要使用 Bootstrap，你需要在你的 HTML 中引入它的 CSS 和 JavaScript 檔案。以下是如何操作的範例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的 Bootstrap 頁面</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的內容在這裡 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>這段代碼從內容分發網絡（CDN）引入了 Bootstrap 的 CSS 和 JavaScript 檔案。這就像點一份披薩而不是自己從頭做一樣——快速又簡單！
Bootstrap 網格系統
Bootstrap 最强大的功能之一就是它的網格系統。它讓你可以輕鬆地創建響應式佈局。以下是一個例子：
<div class="container">
<div class="row">
<div class="col-sm-4">列 1</div>
<div class="col-sm-4">列 2</div>
<div class="col-sm-4">列 3</div>
</div>
</div>這段代碼在小屏幕上創建了一行有三個相等寬度的列。在超小屏幕上，這些列會垂直堆疊。這就像有一個可以變形的容器，能夠根據它被查看的屏幕進行調整！
CSS RWD 框架 - Pure CSS
Pure CSS 是由 Yahoo 開發的一個輕量級、模塊化的框架。它對於那些希望採用最小主義方法的项目來說非常完美。
開始使用 Pure CSS
要使用 Pure CSS，在 HTML 檔案的 <head> 部分包含以下行：
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">Pure CSS 網格系統
Pure CSS 也提供了一個靈活的網格系統。以下是一個例子：
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">第一個三分之一</div>
<div class="pure-u-1 pure-u-md-1-3">第二個三分之一</div>
<div class="pure-u-1 pure-u-md-1-3">第三個三分之一</div>
</div>這段代碼在中型屏幕及以上的屏幕上創建了一行有三個相等列的網格。在小屏幕上，每個列會佔滿整個寬度。
CSS RWD 框架 - Skeleton
Skeleton 是一個超輕量级的框架，非常适合小型项目或当你只需要基本的響應式網格系統時使用。
開始使用 Skeleton
要使用 Skeleton，在 HTML 檔案的 <head> 部分包含以下行：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">Skeleton 網格系統
Skeleton 的網格簡單但有效。以下是一個例子：
<div class="container">
<div class="row">
<div class="four columns">三分之一</div>
<div class="four columns">三分之一</div>
<div class="four columns">三分之一</div>
</div>
</div>這段代碼創建了一行有三個相等寬度的列。Skeleton 的網格基於 12 列佈局，所以每個 "four columns" 佔 1/3 的行。
CSS RWD 框架 - Semantic UI
Semantic UI 以其直觀、對人類友好的 HTML 而聞名。它使用文字和自然語言原則使代碼更易於閱讀。
開始使用 Semantic UI
要使用 Semantic UI，在 HTML 檔案中包含以下行：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>Semantic UI 網格系統
Semantic UI 的網格系統非常直觀。以下是一個例子：
<div class="ui grid">
<div class="five wide column">列 1</div>
<div class="six wide column">列 2</div>
<div class="five wide column">列 3</div>
</div>這段代碼創建了一行有三個不同寬度的列。網格基於 16 列，所以 "five wide" 佔 5/16 的行，"six wide" 佔 6/16，以此類推。
CSS RWD 框架 - Foundation
Foundation 是另一個流行的框架，以其灵活性和高级功能而聞名。
開始使用 Foundation
要使用 Foundation，在 HTML 檔案中包含以下行：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"></script>Foundation 網格系統
Foundation 的網格系統非常强大。以下是一個例子：
<div class="grid-x grid-padding-x">
<div class="cell small-4">單元格 1</div>
<div class="cell small-4">單元格 2</div>
<div class="cell small-4">單元格 3</div>
</div>這段代碼創建了一行有三個相等寬度的列。grid-x 类创建了一个水平网格，而 grid-padding-x 类在列之间添加了空白。
框架功能比較
為了幫助你選擇適合你需求的框架，這裡是一個我們討論過的框架的比較表：
| 框架 | 檔案大小 | 學習曲線 | 定制性 | 社區支持 |
|---|---|---|---|---|
| Bootstrap | 大 | 易 | 高 | 出色 |
| Pure CSS | 小 | 易 | 中等 | 良好 |
| Skeleton | 微小 | 非常易 | 低 | 一般 |
| Semantic UI | 大 | 中等 | 高 | 非常好 |
| Foundation | 大 | 中等 | 高 | 非常好 |
記住，最适合你的框架取決於你的项目需求和個人偏好。這就像選擇汽車一樣——跑車對某些人來說可能很棒，但其他人可能需要一輛家庭車！
總結來說，CSS RWD 框架是強大的工具，可以大大加快你的網頁開發進程。它們為創建響應式網站提供了堅實的基礎，讓你可以專注於項目的獨特方面。
在你继續網頁開發的旅程中，不要害怕嘗試不同的框架。每一個都有其優點，你探索得越多，就越能夠為每個任務選擇正確的工具。
快樂編程，未來的網頁魔法師！記住，每個專家都曾經是新手，所以請繼續練習並永不停止學習！
Credits: Image by storyset