Skip to content

建立 2026-09-15 更新 2026-09-15

影音教學

Bootstrap 官方以文件與範例為主，沒有像 GitHub 那樣的完整 YouTube 課程。發佈與改版短片集中在 Bootstrap Blog → Videos。下面先放官方入口，再嵌入 YouTube 上口碑清楚、可跟做的教學。介面細節若和你電腦上的 5.3 文件不同，以 getbootstrap.com 為準。

完整播放清單仍以 YouTube 為準：

官方資源（請先收藏）

官方文件與範例

Get started 是引入方式與 JS 元件清單。Examples 可直接複製版型。Icons 是官方圖示。Blog Videos 是團隊發佈會影音（含 5.0、5.3、Icons 等短片）。

繁體中文文件

六角學院 Bootstrap 5 繁中文件 方便對照名詞；版本可能落後官方，衝突時以英文文件為準。六角另有付費課 Bootstrap 5 網頁切版整合術，不是免費 YouTube 課程。

Bootstrap 沒有官方證照考試；把官方文件當字典、用 Examples 跟做即可。

建議先看這五部

時間不多就看這五部，對應本站的 20% 核心：引入、網格、跟做一個完整頁面。

Bootstrap 5 Crash Course Tutorial #1 - Intro & Setup

來源：The Net Ninja　約 6 分鐘

VS Code 建立專案、貼 CDN、Live Server 預覽。對應 開始使用。

Bootstrap5 快速簡介

來源：CSS coke（金魚都能懂）　繁體中文

用官方網站帶路：文件怎麼看、這系列會走超新手路線。適合當第一部中文導覽。

Bootstrap5 格線系統入門

來源：CSS coke　繁體中文

容器、12 欄、斷點與欄間距。對應 網格系統。

Bootstrap 5 Crash Course Tutorial #9 - Navbars

來源：The Net Ninja　約 13 分鐘

組一條會折疊的導覽列。對應 導覽列。

Bootstrap 5 Crash Course | Website Build & Deploy

來源：Traversy Media　約 1 小時 19 分

跟做一個訓練班落地頁：CDN、響應式 navbar、flex、grid、cards、Icons、accordion、modal，最後部屬。適合作為「整頁走一遍」的英文課。

Net Ninja 分段教學

下列皆來自同一播放清單 Bootstrap 5 Crash Course，單集短、主題清楚，適合對照本站各頁。也可一次播整份清單：

Colours & Typography

來源：The Net Ninja　約 10 分鐘

語意色與標題、字級。對應 顏色、文字。

Cards

來源：The Net Ninja　約 12 分鐘

用 card 排價格區塊，順便用 grid。對應 卡片。

Working with Forms

來源：The Net Ninja　約 14 分鐘

label、control、select、textarea、input group。對應 表單。

清單裡還有 Buttons、Utilities、Containers、Grid part 1／2、Accordion、Icons、Modal、Offcanvas、Dropdown、Sass 客製與 Tabs，需要時從播放清單接著看即可。

社群完整課程

官方文件把「class 叫什麼」講清楚之後，下面適合跟做較長的完整課。內容含講師個人習慣，不是官方立場；示範版本多半是 5.0–5.1，5.3 的 class 大多仍通用。

Bootstrap 5 Crash Course（Web Dev Simplified）

來源：Web Dev Simplified

一口氣講 grid、表單、常用元件與 utilities。節奏快，適合已看過本站講義、想一次複習的人。

Bootstrap CSS Framework - Full Course for Beginners

來源：freeCodeCamp.org　約 3 小時

Dawid Adach（MDBootstrap 共同創辦人）講解安裝、grid、元件與一個實作頁。長度夠當完整英文課，後半會帶到他們自己的 MDB 函式庫，那部分可略過。

Learn Bootstrap 5 and SASS by Building a Portfolio Website

來源：freeCodeCamp.org　約 5 小時

用 npm + Sass 客製變數，做一份作品集網站。想超越 CDN、改品牌色時再看；入門不必先走這條路。

繁體中文補充

金魚都能懂系列還有單集可對照本站工具類，例如 顏色、邊框。文字版鐵人賽：金魚都能懂的 Bootstrap 5。

共用項目 color 知多少

來源：CSS coke

官方 Colors 文件怎麼查、文字色與背景色怎麼套。對應 顏色。

共用項目 border

來源：CSS coke

邊線、色彩、圓角，以及跟其他元件組合。對應 邊框。

還可以去哪裡練