WEEK2 – DAY3 – Bootstrap課只有三天!

「Bootstrap 三天倒數中!」

早上起床，睡眼惺忪，，發現變天，關掉鬧鐘再睡兩小時，那時我就體會到，我是不可能早起看影片的，天冷了就該回被窩睡覺!

依然是平平無奇的日常，只不過最近測速與科技執法太過猖狂，讓我不禁擔心了起來，完全不知道會不會收到罰單，尤其某些路段40的，每天騎長時間還要擔心這個，真的讓我心力憔悴，不幸收到罰單更是要一個月才會到，如果長時間某個地方沒注意到，是不是一個月會來十幾張罰單?真的只有無奈。

我查看了我會騎過所有道路的測速與科技執法，但誰知道呢?各種奇葩亂象，如果真的不小心中了，就去買一些配備與行車紀錄器吧!一想到後面還要申訴，還有要繳罰單，就一點都開心不起來。

儘管如此，人生還是要繼續過下去。

今天教了很多東西，但花費太多時間在格線系統，最後也沒教排版，我個人是覺得，先算我落後吧!上課的過程中無聊又看起了轉職專班的心得，不到三分之一的存活率，不正常的薪資，受到AI衝擊的市場，種種原因讓我又思考了現在自己的問題。

好像沒有一件事情順利，也沒有事情照我發展，感覺又回到無助又抗拒的時期了。

問題整理

• 為什麼需要使用 Bootstrap？
• 如何正確引入 Bootstrap？
• Bootstrap 的網格系統（Grid System）是什麼？
• 怎麼讓圖片隨裝置寬度自動縮放？
• Bootstrap 的斷點（Breakpoints）是如何運作的？
• 使用 .container 和 .container-fluid 有什麼差別？
• 如何使用 Bootstrap 的表格樣式？
• Bootstrap Icons 為什麼無法正確顯示？
• 如何覆蓋 Bootstrap 的預設樣式？
• Bootstrap 3、4 和 5 有哪些主要差異？
• 怎麼檢查 Bootstrap 是否正確加載？
• 使用 Bootstrap 的按鈕類別，如何改變按鈕大小和顏色？
• 如何實現響應式佈局？
• 如何結合 Bootstrap 與自訂 CSS？
• 為什麼某些元件需要 JavaScript 才能運作？

實做練習題

• 比較 Bootstrap v3、v4 和 v5 中不同的樣式與功能。
• 測試不同版本按鈕、版面配置差異。
• 在網頁中插入 Bootstrap Icons，並嘗試不同圖示。
• 使用 .container 與 .row 排版圖片與表格。
• 在響應式網頁中應用 .img-fluid 圖片類別。
• 使用表格樣式 .table 加上條紋和懸停效果，設計一個商品清單。
• 在 Grid 系統中加入巢狀結構，設計三層網格佈局。

Bootstrap 官網與下載資源

• Bootstrap 官方網站
• Compiled CSS 和 JS 資源
• 文件結構與內容介紹
• 引入方法指南

其他學習資源

• W3Schools：Bootstrap 基礎版本學習

版本比較與升級觀念

Bootstrap 各版本變化

• Bootstrap 3 與 Bootstrap 4 的主要差異
• Bootstrap 4 與 Bootstrap 5 的差異

重要觀念

• Bootstrap 3: 基於 float，支援 IE8+，語法偏向傳統。
• Bootstrap 4: 引入 Flexbox，支援 IE10+，加入更多語法簡化。
• Bootstrap 5: 移除 jQuery，支援更現代化的設計，提升 CSS 變數應用。

Bootstrap 安裝與使用

透過 CDN 快速引用

<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-q1S/2waRZvK3nZKxxoKE4SmpE4byelJjS5UIupOgupp+uwNFjKnkD0tzAFZIAyMh" crossorigin="anonymous"></script>

Bootstrap Icons 的使用

• 官方網站：Bootstrap Icons
• 引入方法：範例圖示： <i class="bi bi-airplane"></i> <svg xmlns="<http://www.w3.org/2000/svg>" width="16" height="16" fill="currentColor" class="bi bi-airplane" viewBox="0 0 16 16"> <path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849"></path> </svg>

引用本地資源

• 將下載的 Bootstrap 壓縮包解壓縮，引用 CSS 和 JS 檔案： <link rel="stylesheet" href="bootstrap.min.css"> <script src="bootstrap.bundle.min.js"></script>

Bootstrap 功能實作

彈跳式視窗 (Popover)

• 功能按鈕程式碼： <button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"> Click to toggle popover </button>
• JavaScript 啟用： const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]'); const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));

按鈕類型展示

類型	程式碼	效果
大按鈕	<button class="btn btn-lg">大按鈕</button>	大型按鈕樣式
中按鈕 (預設)	<button class="btn">按鈕</button>	預設大小
小按鈕	<button class="btn btn-sm">小按鈕</button>	小型按鈕樣式

Breakpoints (斷點)

Bootstrap 提供的可用斷點：

• 斷點用於響應式設計，根據裝置寬度自動調整版面。
• 官方文件：了解 Breakpoints

常見斷點類別：

屏幕大小範圍	類別名稱	最小寬度
Extra small	無	0px
Small	sm	576px
Medium	md	768px
Large	lg	992px
Extra large	xl	1200px
XXL	xxl	1400px

Containers (容器)

容器類型：

類別名稱	描述
.container	固定寬度容器
.container-md	根據中斷點調整的固定寬度
.container-fluid	滿版容器，寬度為 100%

範例程式碼：

<div class="container">固定寬度</div>
<div class="container-md">中等寬度容器</div>
<div class="container-fluid">滿版寬度容器</div>

Grid System (網格系統)

核心概念：

• 網格系統分為行（row）和列（col）。
• 使用 12 等分設計，根據裝置大小調整欄位。

列配置範例：

<div class="row">
    <div class="col">欄 1</div>
    <div class="col">欄 2</div>
    <div class="col">欄 3</div>
</div>

響應式設定：

• 根據螢幕大小調整欄數： <div class="row"> <div class="col-md-6">寬度 50%</div> <div class="col-md-6">寬度 50%</div> </div>

Images (圖片)

Bootstrap 圖片類別：

類別名稱	描述
.img-fluid	自動縮放圖片，確保不超出容器
.img-thumbnail	增加框線及圓角效果
.rounded	圓角圖片

範例程式碼：

<img src="path/to/image.jpg" class="img-fluid" alt="示範圖片">
<img src="path/to/image.jpg" class="img-thumbnail" alt="縮圖效果">
<img src="path/to/image.jpg" class="rounded" alt="圓角效果">

Tables (表格)

Bootstrap 提供的表格樣式：

類別名稱	描述
.table	基本表格樣式
.table-striped	條紋表格
.table-hover	滑鼠懸停效果
.table-bordered	增加邊框

範例程式碼：

<table class="table table-striped table-hover table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>名稱</th>
            <th>描述</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item 1</td>
            <td>範例描述 1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>範例描述 2</td>
        </tr>
    </tbody>
</table>

Figures (圖說文字)

結構與類別：

• 類別： 類別名稱 描述 .figure 圖說容器 .figure-img 圖片本身 .figure-caption 圖片說明文字
• 範例： <figure class="figure"> <img src="path/to/image.jpg" class="figure-img img-fluid" alt="範例圖片"> <figcaption class="figure-caption">這是圖片說明文字。</figcaption> </figure>