CSS 框架 on EricChung的程式勇者村

新手第九步：Tailwind CSS 入門　用 class 直接堆出你要的樣式！

Fri, 17 Apr 2026 00:00:00 +0000

學完 Bootstrap，你已經體驗過 CSS 框架的威力。但 Bootstrap 有一個隱藏的痛點：所有用 Bootstrap 做的網站看起來都長得差不多。

Tailwind CSS 採用了完全不同的思路——它不給你預設好的元件，而是給你幾百個「工具類別」，讓你像積木一樣自由組合出任何你想要的樣式。

1. Tailwind 和 Bootstrap 的哲學差異

	Bootstrap	Tailwind CSS
思路	給你做好的元件，直接用	給你工具類別，自己組合
客製化程度	中（需要覆寫樣式）	高（完全自由）
HTML 可讀性	較乾淨	class 比較多
學習曲線	較平緩	需要記 class 名稱
設計一致性	容易長得一樣	每個網站可以完全不同

兩個都是好工具，端看你的需求選擇。

2. 快速上手：用 CDN 體驗 Tailwind

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!DOCTYPE html>
<html>
<head>
 <title>Tailwind 練習</title>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">

 <h1 class="text-3xl font-bold text-blue-600 text-center mb-4">
 你好，Tailwind！
 </h1>

 <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
 點我
 </button>

</body>
</html>

注意：CDN 方式適合學習和原型開發，正式專案建議用 npm 安裝以獲得完整功能（後面的 Vite 篇會介紹）。

3. Tailwind 的命名邏輯

Tailwind 的 class 名稱設計得非常直覺，只要懂幾個規律就能舉一反三：

間距（Spacing）

1
2
3
4
5
6
7


<!-- p = padding, m = margin -->
<!-- t=top, b=bottom, l=left, r=right, x=左右, y=上下 -->
<!-- 數字 0,1,2,3,4,5,6,8,10,12,16,20... 代表大小（1 = 4px） -->

<div class="p-4">內距 16px</div>
<div class="mt-8">上方外距 32px</div>
<div class="px-6 py-3">左右內距 24px，上下內距 12px</div>

顏色（Colors）

1
2
3
4
5
6


<!-- 顏色名稱-深淺（100最淺，900最深） -->
<div class="bg-blue-500 text-white">藍底白字</div>
<div class="bg-gray-100 text-gray-800">淺灰底深灰字</div>
<div class="text-red-600">紅色文字</div>

<!-- Tailwind 內建顏色：slate, gray, zinc, red, orange, yellow, green, blue, purple, pink... -->

字體（Typography）

1
2
3
4
5


<p class="text-sm">小字（14px）</p>
<p class="text-base">預設大小（16px）</p>
<p class="text-xl">大字（20px）</p>
<p class="text-4xl font-bold">超大粗體（36px）</p>
<p class="text-center italic text-gray-500">置中斜體灰色</p>

彈性布局（Flexbox）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<div class="flex justify-between items-center">
 <span>左</span>
 <span>右</span>
</div>

<div class="flex flex-col gap-4">
 <div>垂直</div>
 <div>排列</div>
 <div>有間距</div>
</div>

響應式（Responsive）

1
2
3
4
5
6
7
8


<!-- 斷點前綴：sm: md: lg: xl: 2xl: -->
<div class="text-sm md:text-base lg:text-lg">
 手機小字、平板中字、桌機大字
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <!-- 手機單欄，平板雙欄，桌機三欄 -->
</div>

互動狀態

1
2
3
4


<!-- hover:、focus:、active: 前綴 -->
<button class="bg-blue-500 hover:bg-blue-700 active:scale-95 transition-all">
 有互動效果的按鈕
</button>

4. 常用的元件範例

按鈕

1
2
3
4
5
6
7
8
9


<!-- 主要按鈕 -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-5 rounded-lg transition-colors">
 主要操作
</button>

<!-- 外框按鈕 -->
<button class="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-semibold py-2 px-5 rounded-lg transition-all">
 次要操作
</button>

卡片

1
2
3
4
5
6
7
8


<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
 <img class="w-full h-48 object-cover" src="圖片網址" alt="...">
 <div class="p-6">
 <h3 class="text-xl font-bold text-gray-800 mb-2">卡片標題</h3>
 <p class="text-gray-600 mb-4">卡片描述文字</p>
 <a href="#" class="text-blue-600 font-semibold hover:underline">閱讀更多 →</a>
 </div>
</div>

5. 給新手的實戰練習：用 Tailwind 重做作品集

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


<!DOCTYPE html>
<html lang="zh-TW">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>我的作品集</title>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 font-sans">

 <!-- 導覽列 -->
 <nav class="bg-gray-900 text-white px-8 py-4 flex justify-between items-center">
 <span class="text-xl font-bold">Eric's Portfolio</span>
 <div class="flex gap-6 text-gray-300">
 <a href="#" class="hover:text-white transition-colors">首頁</a>
 <a href="#" class="hover:text-white transition-colors">作品</a>
 <a href="#" class="hover:text-white transition-colors">聯絡</a>
 </div>
 </nav>

 <!-- Hero -->
 <div class="bg-blue-600 text-white text-center py-24 px-4">
 <h1 class="text-5xl font-bold mb-4">你好，我是前端新手</h1>
 <p class="text-xl text-blue-200 mb-8">正在努力學習 HTML、CSS 和 JavaScript</p>
 <a href="#" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-blue-50 transition-colors">
 查看我的作品
 </a>
 </div>

 <!-- 作品卡片 -->
 <div class="max-w-5xl mx-auto py-16 px-4">
 <h2 class="text-3xl font-bold text-center text-gray-800 mb-10">我的作品</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div class="bg-white rounded-xl p-6 shadow hover:shadow-md transition-shadow">
 <h3 class="text-lg font-bold text-gray-800 mb-2">計數器 App</h3>
 <p class="text-gray-500 mb-4">用原生 JavaScript 做的互動計數器。</p>
 <a href="#" class="text-blue-600 font-semibold hover:underline text-sm">查看作品 →</a>
 </div>
 <div class="bg-white rounded-xl p-6 shadow hover:shadow-md transition-shadow">
 <h3 class="text-lg font-bold text-gray-800 mb-2">個人介紹頁</h3>
 <p class="text-gray-500 mb-4">用 HTML + CSS Flexbox 做的靜態介紹頁。</p>
 <a href="#" class="text-blue-600 font-semibold hover:underline text-sm">查看作品 →</a>
 </div>
 <div class="bg-white rounded-xl p-6 shadow hover:shadow-md transition-shadow">
 <h3 class="text-lg font-bold text-gray-800 mb-2">Vue 練習</h3>
 <p class="text-gray-500 mb-4">用 Vue.js 做的響應式互動頁面。</p>
 <a href="#" class="text-blue-600 font-semibold hover:underline text-sm">查看作品 →</a>
 </div>
 </div>
 </div>

</body>
</html>

同樣的頁面，Tailwind 版和 Bootstrap 版的結果看起來截然不同，因為每個樣式都是你自己決定的。

結語：Tailwind 讓設計真的是你的設計

Tailwind CSS 的學習曲線稍高——前幾天你會一直在查 class 名稱。但一旦熟悉了，你會發現自己從「設計稿到程式碼」的速度快了很多，而且不用擔心和別人的網站「撞臉」。

接下來你可以做什麼？ 現在我們用的都是 CDN 引入，沒有辦法用到 Tailwind 的 JIT 模式或 SCSS 的完整功能。下一篇要學 Vite——現代前端的建置工具，讓你的開發環境真正「工程化」起來！

準備好打造專業開發環境了嗎？下一篇見！

新手第八步：Bootstrap 5 入門　不會設計也能做出專業版面！

Fri, 17 Apr 2026 00:00:00 +0000

每次做新專案，是不是又要從頭寫按鈕樣式、導覽列、卡片？Bootstrap 5 就是解決這個痛點的神器——它把最常用的 UI 元件全部做好了，你只要加幾個 class 名稱就能直接用。

1. Bootstrap 5 是什麼？

Bootstrap 是 Twitter 工程師開發的 CSS 框架，目前已發展到第 5 版，是全球使用量最大的 CSS 框架之一。

它幫你做好了：

Grid 格線系統：12 欄式的響應式排版
元件庫：按鈕、卡片、導覽列、Modal、輪播圖……數十種現成元件
工具類別（Utilities）：快速調整間距、顏色、對齊的 class
響應式設計：自動在手機、平板、電腦上顯示不同版面

2. 引入 Bootstrap 5：一行搞定

最快的方式是用 CDN，不需要安裝任何東西：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 練習</title>
 <!-- Bootstrap CSS -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

 <!-- 你的內容 -->

 <!-- Bootstrap JS（某些元件需要） -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

就這樣！引入之後，你的 HTML 裡只要加上 Bootstrap 定義好的 class 名稱，樣式就自動套上。

3. Grid 格線系統：響應式排版的核心

Bootstrap 把頁面分成 12 欄，你指定每個元素要佔幾欄：

1
2
3
4
5
6


<div class="container">
 <div class="row">
 <div class="col-6">左半部（佔 6/12）</div>
 <div class="col-6">右半部（佔 6/12）</div>
 </div>
</div>

響應式斷點：

class	裝置	螢幕寬度
`col-`	全部裝置	所有寬度
`col-sm-`	手機（橫放）	≥ 576px
`col-md-`	平板	≥ 768px
`col-lg-`	桌機	≥ 992px
`col-xl-`	大螢幕	≥ 1200px

實用範例：手機單欄、平板雙欄、桌機三欄

1
2
3
4
5
6
7


<div class="container">
 <div class="row">
 <div class="col-12 col-md-6 col-lg-4">卡片一</div>
 <div class="col-12 col-md-6 col-lg-4">卡片二</div>
 <div class="col-12 col-md-6 col-lg-4">卡片三</div>
 </div>
</div>

4. 最常用的元件

按鈕

1
2
3
4
5


<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
<button class="btn btn-danger">危險操作</button>
<button class="btn btn-outline-primary">外框按鈕</button>
<button class="btn btn-lg btn-success">大按鈕</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container">
 <a class="navbar-brand" href="#">我的網站</a>
 <button class="navbar-toggler" type="button"
 data-bs-toggle="collapse" data-bs-target="#navMenu">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navMenu">
 <ul class="navbar-nav ms-auto">
 <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>

這段 HTML 就能做出完整的響應式導覽列，手機上會自動折疊成漢堡選單。

卡片（Card）

1
2
3
4
5
6
7
8


<div class="card" style="width: 18rem;">
 <img src="https://via.placeholder.com/280x160" class="card-img-top" alt="...">
 <div class="card-body">
 <h5 class="card-title">卡片標題</h5>
 <p class="card-text">卡片描述文字，可以放任何你想說的內容。</p>
 <a href="#" class="btn btn-primary">了解更多</a>
 </div>
</div>

5. 工具類別（Utilities）：快速調整樣式

Bootstrap 5 的另一個強項是「工具類別」，不用寫 CSS 就能調整樣式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!-- 間距 -->
<div class="mt-3">上方外距 3 單位</div>
<div class="px-4">左右內距 4 單位</div>
<div class="mb-0">下方外距 0</div>

<!-- 文字 -->
<p class="text-center">置中文字</p>
<p class="text-primary fw-bold">藍色粗體</p>
<p class="fs-4">4 號字體大小</p>

<!-- 背景與顏色 -->
<div class="bg-dark text-white p-3">深色背景白色文字</div>

<!-- Flexbox -->
<div class="d-flex justify-content-between align-items-center">
 <span>左邊</span>
 <span>右邊</span>
</div>

間距規則：m=margin，p=padding；t=top，b=bottom，s=start(left)，e=end(right)，x=左右，y=上下；數字 0~5 代表大小。

6. 給新手的實戰練習：做一個個人作品集頁面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61


<!DOCTYPE html>
<html lang="zh-TW">
<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/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

 <!-- 導覽列 -->
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container">
 <a class="navbar-brand fw-bold" href="#">Eric's Portfolio</a>
 </div>
 </nav>

 <!-- Hero 區塊 -->
 <div class="bg-primary text-white text-center py-5">
 <h1 class="display-4 fw-bold">你好，我是前端新手</h1>
 <p class="lead">正在努力學習 HTML、CSS 和 JavaScript</p>
 <a href="#" class="btn btn-light btn-lg mt-3">查看我的作品</a>
 </div>

 <!-- 作品卡片 -->
 <div class="container py-5">
 <h2 class="text-center mb-4">我的作品</h2>
 <div class="row g-4">
 <div class="col-12 col-md-4">
 <div class="card h-100 shadow-sm">
 <div class="card-body">
 <h5 class="card-title">計數器 App</h5>
 <p class="card-text">用原生 JavaScript 做的互動計數器。</p>
 <a href="#" class="btn btn-outline-primary">查看作品</a>
 </div>
 </div>
 </div>
 <div class="col-12 col-md-4">
 <div class="card h-100 shadow-sm">
 <div class="card-body">
 <h5 class="card-title">個人介紹頁</h5>
 <p class="card-text">用 HTML + CSS Flexbox 做的靜態介紹頁。</p>
 <a href="#" class="btn btn-outline-primary">查看作品</a>
 </div>
 </div>
 </div>
 <div class="col-12 col-md-4">
 <div class="card h-100 shadow-sm">
 <div class="card-body">
 <h5 class="card-title">Vue 練習</h5>
 <p class="card-text">用 Vue.js 做的響應式互動頁面。</p>
 <a href="#" class="btn btn-outline-primary">查看作品</a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

這個頁面有導覽列、Hero 區塊、三欄卡片，在手機上自動變成單欄——全部不到 60 行 HTML。

結語：框架讓你站在巨人的肩膀上

Bootstrap 5 不是讓你「偷懶」的工具，而是讓你把時間花在更有價值的地方——功能邏輯、使用者體驗、創意設計，而不是重複造輪子。

接下來你可以做什麼？ Bootstrap 雖好，但有時候你會想要更精細地控制每一個樣式，而不是被框架的設計限制住。下一篇我們來看 Tailwind CSS——一個完全不同的思路，讓你在 HTML 裡直接組合樣式，彈性超高！

準備好看看 CSS 框架的另一種哲學嗎？下一篇見！