HTML / CSS Part 4：RWD、Flexbox 與 Bootstrap

課程定位

本單元延續前面 HTML / CSS 的基礎，目標是讓學生能從「做出單一頁面」進一步進入「做出能適應不同螢幕尺寸的頁面」。

新聞、專題、數位長文、活動頁、資料新聞頁面，常常需要同時在桌機、平板、手機上閱讀。因此本單元會從兩個方向切入：

使用 Flexbox 建立彈性排版。
使用 Media Query 與 Bootstrap 快速建立 Responsive Web Design，簡稱 RWD。

完成本單元後，學生應該能夠：

理解 Flexbox 的主軸、交錯軸與對齊方式。
使用 Flexbox 建立常見版面，例如置中、左右欄、上下欄、側邊欄與卡片排列。
使用 Media Query 讓版面在不同螢幕尺寸下改變。
使用 Bootstrap 快速建立一個具備導覽列、Landing 區塊、內容段落、三欄價值主張、CTA 與 Footer 的單頁網站。
能看懂常見 Bootstrap class，例如 row、col、p-*、m-*、btn、card、navbar 等。

一、為什麼需要 RWD？

1. 同一個網頁會被不同裝置閱讀

傳統網頁常以桌機螢幕為主，但現在使用者可能透過以下裝置閱讀：

手機
平板
筆電
桌機大螢幕
外接螢幕

對新聞網站與數位專題而言，這件事特別重要。讀者可能在捷運上用手機打開，也可能在辦公室用電腦閱讀。如果頁面只適合桌機，在手機上可能會出現：

文字太小。
圖片超出畫面。
欄位被擠壓。
需要左右滑動才能看完整內容。
按鈕太小，不容易點擊。

2. RWD 的核心概念

RWD 是 Responsive Web Design，中文通常稱為「響應式網頁設計」或「自適應網頁設計」。

它的核心不是「幫每一種裝置做一份網頁」，而是：

用同一份 HTML，搭配不同 CSS 規則，讓版面能依照螢幕大小自動調整。

常見做法包括：

使用百分比、fr、auto、flex 等彈性單位。
使用 max-width 限制內容不要太寬。
使用 media query 在不同寬度下切換樣式。
使用 Flexbox 或 Grid 讓版面自動排列。
在手機上將多欄排版改成單欄排版。

二、Flexbox 基礎

1. Flexbox 是什麼？

Flexbox 是 CSS 的一種排版模型，全名是 Flexible Box Layout。

它很適合處理「一維排版」，也就是：

一排橫向排列。
一列垂直排列。
讓元素平均分配空間。
讓元素置中。
讓某些元素固定寬度，其餘元素吃掉剩餘空間。

Flexbox 的常見應用：

導覽列 navbar
卡片列表
左右欄排版
垂直置中
按鈕群組
側邊欄與主內容
Footer 連結列表

2. Flexbox 的基本結構

Flexbox 需要套用在「容器」上：

.container {
  display: flex;
}

HTML 範例：

<div class="container">
  <div>區塊 A</div>
  <div>區塊 B</div>
  <div>區塊 C</div>
</div>

只要父層 .container 設定 display: flex，裡面的直接子元素就會變成 flex items。

3. 主軸與交錯軸

Flexbox 最重要的概念是：

主軸 main axis
交錯軸 cross axis

預設情況下：

.container {
  display: flex;
  flex-direction: row;
}

此時主軸是水平向右，交錯軸是垂直向下。

如果改成：

.container {
  display: flex;
  flex-direction: column;
}

主軸就會變成垂直向下，交錯軸則變成水平。

這會影響 justify-content 與 align-items 的方向。

4. 常用 Flexbox 屬性

display: flex

啟用 Flexbox 排版。

.box {
  display: flex;
}

flex-direction

決定子元素排列方向。

.box {
  display: flex;
  flex-direction: row;
}

常見值：

值	說明
`row`	水平排列，預設值
`row-reverse`	水平反向排列
`column`	垂直排列
`column-reverse`	垂直反向排列

justify-content

控制主軸方向的對齊方式。

.box {
  display: flex;
  justify-content: center;
}

常見值：

值	說明
`flex-start`	靠主軸起點
`flex-end`	靠主軸終點
`center`	置中
`space-between`	第一個靠左，最後一個靠右，中間平均分配
`space-around`	每個元素左右都有空間
`space-evenly`	所有間距完全平均

align-items

控制交錯軸方向的對齊方式。

.box {
  display: flex;
  align-items: center;
}

常見值：

值	說明
`stretch`	拉伸填滿，預設值
`flex-start`	靠交錯軸起點
`flex-end`	靠交錯軸終點
`center`	交錯軸置中
`baseline`	依文字基線對齊

flex-wrap

控制子元素是否換行。

.box {
  display: flex;
  flex-wrap: wrap;
}

常見值：

值	說明
`nowrap`	不換行，預設值
`wrap`	空間不足時換行
`wrap-reverse`	反向換行

gap

控制 flex item 之間的間距。

.box {
  display: flex;
  gap: 16px;
}

gap 比手動幫每個元素加 margin 更直覺，也比較不容易出錯。

5. flex 屬性：grow、shrink、basis

你提到的：

flex: 1 0 auto;

它其實是三個屬性的縮寫：

flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;

flex-grow

控制「剩餘空間要不要分配給這個元素」。

.main {
  flex-grow: 1;
}

如果一個元素 flex-grow: 1，它會吃掉剩餘空間。

flex-shrink

控制「空間不足時，這個元素可不可以被壓縮」。

.sidebar {
  flex-shrink: 0;
}

如果設定 flex-shrink: 0，表示它不希望被壓縮。

flex-basis

控制元素在分配空間前的基準大小。

.sidebar {
  flex-basis: 240px;
}

這可以理解成「在 flex 運算開始前，先假設這個元素是 240px」。

6. 常見 flex 寫法

讓元素吃掉剩餘空間

.main {
  flex: 1;
}

等同於常見的彈性主內容區。

固定側欄，中間自動填滿

.layout {
  display: flex;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
}

.content {
  flex: 1;
}

水平與垂直置中

.center-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

這是 Flexbox 最常見、也最實用的用法之一。

三、Flexbox 練習：上下左右側邊欄與中間內容

練習目標

建立一個版面：

上方有 top bar。
下方有 bottom bar。
左側有 left sidebar。
右側有 right sidebar。
中間剩餘空間是主要內容區。

概念圖：

+-----------------------------------+
|              top bar              |
+---------+----------------+--------+
|  left   |     content    | right  |
| sidebar |                | sidebar|
+---------+----------------+--------+
|            bottom bar             |
+-----------------------------------+

HTML 結構

<div class="page">
  <header class="top">Top Bar</header>

  <div class="middle">
    <aside class="left">Left Sidebar</aside>
    <main class="content">Main Content</main>
    <aside class="right">Right Sidebar</aside>
  </div>

  <footer class="bottom">Bottom Bar</footer>
</div>

CSS 寫法

html,
body {
  margin: 0;
  min-height: 100%;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.top,
.bottom {
  padding: 16px;
  background: #222;
  color: white;
  text-align: center;
}

.middle {
  flex: 1;
  display: flex;
}

.left,
.right {
  width: 200px;
  padding: 16px;
  background: #eee;
  flex-shrink: 0;
}

.content {
  flex: 1;
  padding: 16px;
  background: #fff;
}

技術拆解

`.page`

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

這裡讓整個頁面至少等於瀏覽器高度。

flex-direction: column 表示 .page 裡面的三個區塊會垂直排列：

.top
.middle
.bottom

`.middle`

.middle {
  flex: 1;
  display: flex;
}

.middle 的 flex: 1 表示它會吃掉 top 與 bottom 之外剩下的高度。

同時 .middle 自己也是 flex container，因此裡面的 left、content、right 會水平排列。

`.content`

.content {
  flex: 1;
}

這代表中間內容區會自動吃掉左右側邊欄之外的剩餘寬度。

四、使用 Media Query 實現 RWD

1. Media Query 是什麼？

Media Query 是 CSS 裡面根據條件套用樣式的語法。

最常見的條件是螢幕寬度：

@media (max-width: 768px) {
  .middle {
    flex-direction: column;
  }
}

意思是：

當螢幕寬度小於或等於 768px 時，套用裡面的 CSS。

2. 常見 Breakpoints

常見斷點可以這樣理解：

裝置類型	大約寬度
手機	小於 576px
大手機 / 小平板	576px 以上
平板	768px 以上
小筆電	992px 以上
桌機	1200px 以上
大螢幕	1400px 以上

實務上不一定要死背這些尺寸。比較好的做法是：

當你的版面開始壞掉時，就在那個寬度附近加一個 breakpoint。

3. Mobile First 與 Desktop First

Desktop First

先寫桌機版，再用 max-width 修改手機版。

.card-list {
  display: flex;
}

@media (max-width: 768px) {
  .card-list {
    flex-direction: column;
  }
}

這種寫法直覺，適合初學者。

Mobile First

先寫手機版，再用 min-width 加強大螢幕版。

.card-list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .card-list {
    flex-direction: row;
  }
}

Bootstrap 採用的就是比較接近 Mobile First 的思路。

4. 讓剛才的版面變成 RWD

在手機上，左右側邊欄不適合繼續擠在左右，所以可以改成垂直排列。

@media (max-width: 768px) {
  .middle {
    flex-direction: column;
  }

  .left,
  .right {
    width: auto;
  }
}

這樣手機版會變成：

+------------------+
|     top bar      |
+------------------+
|   left sidebar   |
+------------------+
|   main content   |
+------------------+
|  right sidebar   |
+------------------+
|    bottom bar    |
+------------------+

5. 常見 RWD 注意事項

記得加 viewport meta

在 HTML 的 <head> 裡面要加入：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果沒有這行，手機瀏覽器可能會用虛擬桌機寬度顯示網頁，導致 RWD 不如預期。

圖片不要超出容器

img {
  max-width: 100%;
  height: auto;
}

這可以避免圖片在手機上超出螢幕。

避免固定寬度過多

不建議大量使用：

width: 1200px;

比較好的寫法是：

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

這樣在大螢幕上不會太寬，在小螢幕上也能自動縮小。

五、Bootstrap 基礎

1. Bootstrap 是什麼？

Bootstrap 是一套常見的前端 CSS 框架。

它提供許多已經寫好的 class，讓我們不用從零開始寫 CSS，就可以快速建立：

格線排版
導覽列
按鈕
卡片
表單
提示訊息
間距
背景色
邊框
RWD 版面

對初學者來說，Bootstrap 的優點是可以很快做出「看起來像網站」的頁面。

對新聞系學生來說，Bootstrap 很適合拿來快速做：

活動頁
專題 landing page
資料新聞展示頁
採訪成果頁
作品集頁面
小型新聞互動頁

2. 引入 Bootstrap

可以用 CDN 引入 Bootstrap CSS。

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
>

若要使用 navbar collapse、dropdown、modal 等需要 JavaScript 的元件，還要引入 Bootstrap JS：

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>

基本 HTML 範例：

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Demo</title>
  <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
  >
</head>
<body>
  <h1>Hello Bootstrap</h1>

  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
  </script>
</body>
</html>

六、Bootstrap 常用類別

1. 顏色與背景

文字顏色

<p class="text-light">淺色文字</p>
<p class="text-dark">深色文字</p>
<p class="text-primary">主要色文字</p>
<p class="text-danger">危險或警示文字</p>

背景色

<div class="bg-dark text-light">深色背景，淺色文字</div>
<div class="bg-light text-dark">淺色背景，深色文字</div>
<div class="bg-primary text-light">主色背景</div>

常見顏色類別：

類別	常見用途
`primary`	主色、主要按鈕
`secondary`	次要資訊
`success`	成功、正向訊息
`danger`	危險、錯誤、警示
`warning`	注意
`info`	補充資訊
`light`	淺色
`dark`	深色

2. 間距：p-* 與 m-*

Bootstrap 用 p 表示 padding，用 m 表示 margin。

<div class="p-3">四周 padding</div>
<div class="m-3">四周 margin</div>

數字通常從 0 到 5：

類別	意義
`p-0`	沒有 padding
`p-1`	很小的 padding
`p-2`	小 padding
`p-3`	中等 padding
`p-4`	較大 padding
`p-5`	很大的 padding

方向縮寫：

縮寫	方向
`t`	top
`b`	bottom
`s`	start，左邊，RTL 語系時會相反
`e`	end，右邊，RTL 語系時會相反
`x`	左右
`y`	上下

範例：

<div class="pt-3">上方 padding</div>
<div class="px-4">左右 padding</div>
<div class="my-5">上下 margin</div>

3. 邊框與圓角

<div class="border rounded p-3">
  有邊框與圓角的區塊
</div>

常見類別：

<div class="border">邊框</div>
<div class="border-top">只有上邊框</div>
<div class="rounded">圓角</div>
<div class="rounded-pill">膠囊形圓角</div>

4. 按鈕

Bootstrap 按鈕通常使用：

<a href="#" class="btn btn-primary">主要按鈕</a>
<button class="btn btn-secondary">次要按鈕</button>

常見按鈕：

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-light">Light</button>

5. Alert

Alert 適合做提示訊息。

<div class="alert alert-warning">
  這是一則提醒訊息。
</div>

常見類型：

<div class="alert alert-success">成功訊息</div>
<div class="alert alert-info">補充資訊</div>
<div class="alert alert-warning">注意事項</div>
<div class="alert alert-danger">錯誤或警告</div>

6. Card

Card 很適合做新聞卡片、專題卡片、人物介紹、價值主張區塊。

<div class="card">
  <img src="photo.jpg" 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>

七、Bootstrap Grid：row 與 col

1. Grid 的基本概念

Bootstrap 的排版系統以 12 欄為基礎。

基本結構是：

<div class="container">
  <div class="row">
    <div class="col">第一欄</div>
    <div class="col">第二欄</div>
    <div class="col">第三欄</div>
  </div>
</div>

container 負責限制內容寬度並置中。

row 是一列。

col 是欄。

如果三個欄都寫 col，Bootstrap 會自動平均分配寬度。

2. 指定欄寬

Bootstrap 一列總共 12 欄。

<div class="row">
  <div class="col-4">佔 4 欄</div>
  <div class="col-8">佔 8 欄</div>
</div>

也就是：

col-6：一半寬度。
col-4：三分之一寬度。
col-3：四分之一寬度。
col-12：整列寬度。

3. RWD 欄位

Bootstrap 的強大之處在於可以指定不同螢幕尺寸下的欄位寬度。

<div class="row">
  <div class="col-12 col-md-4">第一欄</div>
  <div class="col-12 col-md-4">第二欄</div>
  <div class="col-12 col-md-4">第三欄</div>
</div>

意思是：

在小螢幕時，每個欄位都是 col-12，所以會變成單欄。
在 md 以上螢幕時，每個欄位是 col-md-4，所以三欄並排。

這是 Bootstrap 很常用的 RWD 寫法。

4. Bootstrap Breakpoints

Bootstrap 常見 breakpoint：

縮寫	寬度
`sm`	576px 以上
`md`	768px 以上
`lg`	992px 以上
`xl`	1200px 以上
`xxl`	1400px 以上

範例：

<div class="col-12 col-md-6 col-lg-4">
  內容
</div>

意思是：

手機：整列寬度。
平板以上：一列兩欄。
桌機以上：一列三欄。

Navbar 是網站上方常見的導覽列。

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">網站名稱</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#mainNavbar"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mainNavbar">
      <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>

重點：

navbar：宣告這是一個 navbar。
navbar-expand-lg：在 lg 以上展開，小螢幕收合。
bg-dark：深色背景。
navbar-dark：讓文字與 icon 適合深色背景。
navbar-toggler：手機版的選單按鈕。
collapse navbar-collapse：可收合的選單內容。
ms-auto：margin-start auto，讓選單推到右側。

九、完整練習：用 Bootstrap 建立一頁式網站

練習目標

使用 Bootstrap 建立一個單頁網站，包含：

Navbar
Landing block
幾個段落
三欄式價值主張
CTA 按鈕
Footer bar
Footer 中包含連結列表與一張視覺圖

這個練習可以套用到：

新聞專題介紹頁
活動宣傳頁
作品集頁面
資料新聞入口頁
社群議題倡議頁

完整範例

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>新聞專題 Landing Page</title>
  <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
  >
</head>
<body>

  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">新聞專題</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#mainNavbar"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="mainNavbar">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#intro">介紹</a></li>
          <li class="nav-item"><a class="nav-link" href="#features">特色</a></li>
          <li class="nav-item"><a class="nav-link" href="#action">行動</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <header class="bg-light py-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-6">
          <h1 class="display-4 fw-bold">用資料看見城市變化</h1>
          <p class="lead">
            這是一個新聞專題頁面範例，展示如何用 Bootstrap 快速建立具備 RWD 的網頁。
          </p>
          <a href="#action" class="btn btn-primary btn-lg">開始閱讀</a>
        </div>
        <div class="col-12 col-md-6 mt-4 mt-md-0">
          <img
            src="https://picsum.photos/800/500"
            class="img-fluid rounded"
            alt="專題視覺圖"
          >
        </div>
      </div>
    </div>
  </header>

  <main>
    <section id="intro" class="py-5">
      <div class="container">
        <h2>專題介紹</h2>
        <p>
          在數位新聞中，網頁不只是文章容器，也是一種敘事介面。透過 HTML、CSS 與 Bootstrap，
          我們可以快速建立清楚、易讀、可在手機與桌機閱讀的專題頁面。
        </p>
        <p>
          本頁面使用 Bootstrap 的格線系統、按鈕、導覽列、間距工具與 RWD 類別完成。
        </p>
      </div>
    </section>

    <section id="features" class="bg-light py-5">
      <div class="container">
        <h2 class="mb-4">三個價值主張</h2>
        <div class="row g-4">
          <div class="col-12 col-md-4">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">快速建立</h5>
                <p class="card-text">
                  使用 Bootstrap 提供的元件與工具類別，不必從零撰寫所有 CSS。
                </p>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-4">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">自動適應</h5>
                <p class="card-text">
                  使用 `col-12 col-md-4` 這類 RWD class，讓手機單欄、桌機三欄。
                </p>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-4">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">容易維護</h5>
                <p class="card-text">
                  統一使用框架提供的 class，可以讓頁面結構更一致，也方便後續修改。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="action" class="py-5 text-center">
      <div class="container">
        <h2>準備好開始你的專題頁面了嗎？</h2>
        <p class="lead">試著替自己的採訪題目、資料分析或報導企劃做一個 landing page。</p>
        <a href="#" class="btn btn-primary btn-lg">建立我的頁面</a>
      </div>
    </section>
  </main>

  <footer class="bg-dark text-light py-4">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-8">
          <h5>新聞專題</h5>
          <ul class="list-inline mb-0">
            <li class="list-inline-item"><a class="text-light" href="#">關於</a></li>
            <li class="list-inline-item"><a class="text-light" href="#">資料來源</a></li>
            <li class="list-inline-item"><a class="text-light" href="#">聯絡我們</a></li>
          </ul>
        </div>
        <div class="col-12 col-md-4 mt-3 mt-md-0 text-md-end">
          <img
            src="https://picsum.photos/160/90"
            class="img-fluid rounded"
            alt="footer 視覺圖"
          >
        </div>
      </div>
    </div>
  </footer>

  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
  </script>
</body>
</html>

十、補充：Bootstrap 與自己寫 CSS 的關係

Bootstrap 不是用來完全取代 CSS，而是幫你處理常見樣式。

可以這樣理解：

HTML 負責內容結構。
CSS 負責視覺設計。
Flexbox 負責彈性排版。
Media Query 負責不同螢幕尺寸的調整。
Bootstrap 提供現成的 class 與元件，讓開發速度變快。

實務上常見做法是：

先用 Bootstrap 建立大致版面。
再用自己的 CSS 微調品牌色、字型、間距、特殊版面。
對於重複出現的區塊，例如卡片、按鈕、section，建立一致的設計規則。

十一、常見錯誤與排除方式

1. 手機版沒有正常縮放

檢查 <head> 裡是否有：

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Bootstrap class 沒有效果

檢查是否有正確引入 Bootstrap CSS：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

如果 navbar 的收合選單打不開，通常是沒有引入 Bootstrap JS。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

也要確認 data-bs-target="#mainNavbar" 與 id="mainNavbar" 是否一致。

4. col 沒有照預期排列

確認結構是否是：

<div class="container">
  <div class="row">
    <div class="col">內容</div>
  </div>
</div>

col 通常應該放在 row 裡面。

5. 圖片超出畫面

可以加上：

<img src="photo.jpg" class="img-fluid" alt="說明文字">

或自己寫 CSS：

img {
  max-width: 100%;
  height: auto;
}

十二、課堂練習設計

練習一：Flexbox 置中

建立一個高度 300px 的區塊，讓裡面的文字水平與垂直置中。

需要使用：

display: flex;
align-items: center;
justify-content: center;

練習二：左右欄排版

建立一個左側欄與主內容區：

左側欄寬度 240px。
主內容吃掉剩餘空間。
手機版改成上下排列。

練習三：上下左右側邊欄

完成本講義第三部分的版面：

top bar
left sidebar
main content
right sidebar
bottom bar

並加入 media query，讓手機版變成單欄排列。

練習四：Bootstrap 三欄卡片

使用 Bootstrap 建立三張卡片：

手機版一列一張。
平板以上一列三張。
每張卡片有標題、內容與按鈕。

提示：

<div class="col-12 col-md-4">
  <div class="card">
    ...
  </div>
</div>

練習五：一頁式新聞專題網站

建立一個完整頁面，包含：

Navbar
Landing block
專題介紹段落
三欄式價值主張
CTA 按鈕
Footer bar

主題可以選：

校園議題
城市交通
租屋問題
氣候變遷
青年就業
社群媒體與假訊息
地方文化

十三、延伸任務

1. 修改視覺風格

嘗試改變：

背景色
按鈕顏色
圓角大小
圖片比例
Landing block 高度
卡片間距

2. 加入自己的新聞內容

把範例文字換成自己的採訪或報導內容。

建議至少包含：

一個主標題。
一個副標題。
三個重點。
一個 CTA，例如「閱讀完整報導」、「查看資料」、「參與討論」。

3. 用開發者工具觀察 RWD

使用瀏覽器 DevTools：

打開網頁。
右鍵選擇「檢查」。
切換到手機模擬模式。
觀察版面在不同寬度下如何變化。
嘗試即時修改 class 與 CSS。

十四、課堂總結

本單元的重點是：

Flexbox 可以處理彈性排列、置中、側欄與主內容分配。
Media Query 可以讓同一份 HTML 在不同螢幕尺寸下套用不同 CSS。
Bootstrap 提供現成的 grid、元件與工具類別，適合快速建立 RWD 頁面。
row 與 col 是 Bootstrap 排版核心。
col-12 col-md-4 是很常見的 RWD 寫法，代表手機單欄、平板以上三欄。
p-*、m-*、bg-*、text-*、rounded、border 可以快速調整視覺樣式。
對新聞系學生來說，這些技術可以用來快速建立數位專題、資料新聞頁面、作品集與活動頁。

新媒體內容技術與設計

New Media Techniques and Design

重設登入階段 SVG Background animated by Loading.io

HTML / CSS Part 4：RWD、Flexbox 與 Bootstrap

課程定位

一、為什麼需要 RWD？

1. 同一個網頁會被不同裝置閱讀

2. RWD 的核心概念

二、Flexbox 基礎

1. Flexbox 是什麼？

2. Flexbox 的基本結構

3. 主軸與交錯軸

4. 常用 Flexbox 屬性

display: flex

flex-direction

justify-content

align-items

flex-wrap

gap

5. flex 屬性：grow、shrink、basis

flex-grow

flex-shrink

flex-basis

6. 常見 flex 寫法

讓元素吃掉剩餘空間

固定側欄，中間自動填滿

水平與垂直置中

三、Flexbox 練習：上下左右側邊欄與中間內容

練習目標

HTML 結構

CSS 寫法

技術拆解

.page

.middle

.content

四、使用 Media Query 實現 RWD

1. Media Query 是什麼？

2. 常見 Breakpoints

3. Mobile First 與 Desktop First

Desktop First

Mobile First

4. 讓剛才的版面變成 RWD

5. 常見 RWD 注意事項

記得加 viewport meta

圖片不要超出容器

避免固定寬度過多

五、Bootstrap 基礎

1. Bootstrap 是什麼？

2. 引入 Bootstrap

六、Bootstrap 常用類別

1. 顏色與背景

文字顏色

背景色

2. 間距：p-* 與 m-*

3. 邊框與圓角

4. 按鈕

5. Alert

6. Card

七、Bootstrap Grid：row 與 col

1. Grid 的基本概念

2. 指定欄寬

3. RWD 欄位

4. Bootstrap Breakpoints

八、Bootstrap Navbar

九、完整練習：用 Bootstrap 建立一頁式網站

練習目標

完整範例

十、補充：Bootstrap 與自己寫 CSS 的關係

十一、常見錯誤與排除方式

1. 手機版沒有正常縮放

2. Bootstrap class 沒有效果

3. Navbar 手機選單打不開

4. col 沒有照預期排列

5. 圖片超出畫面

十二、課堂練習設計

練習一：Flexbox 置中

練習二：左右欄排版

練習三：上下左右側邊欄

練習四：Bootstrap 三欄卡片

練習五：一頁式新聞專題網站

十三、延伸任務

1. 修改視覺風格

2. 加入自己的新聞內容

`.page`

`.middle`

`.content`