自動播放
自動完成
上一堂課程
完成並繼續課程
1542216
Bootstrap 5 網頁切版整合術
六角學院 - 線上資源
六角學院線上社團
Apple M1 觀看公告
環境建置
Bootstrap 文件介紹 (6:18)
Bootstrap 中英文文件連結
VSCode 基礎環境建置 (5:11)
VSCode 與相關資源連結
語系設置與 Bootstrap CDN (10:28)
CSS 的 Class 運用 (2:36)
快速體驗 Bootstrap 建立一個網站 (9:09)
Bootstrap 文件介紹
知識點：box-sizing (5:48)
知識點：CSS Variables (4:32)
知識點：rem 單位 (8:20)
知識點：系統預設字體 (4:20)
CSS Reset 做了什麼 (5:41)
六角學院專屬「Bootstrap 練習手冊」 (3:59)
Bootstrap 5 練習手冊連結
文字運用 (13:43)
基本圖片運用 (8:06)
圖片區 (2:08)
表格運用 (16:05)
測驗：Bootstrap 文件介紹
Flex 與網格系統介紹
基礎格線觀念 (8:15)
繪圖軟體與格線之間的關聯性 (9:04)
響應式中斷點 (8:24)
格線容器 (6:29)
欄：上篇 (9:37)
欄：下篇 (5:11)
欄與欄的間距：Gutter 觀念說明 (4:54)
欄與欄的間距：Gutter (8:36)
CSS Flex 與格線系統 (6:00)
Utilities 通用類別：間隔 Spacing (8:58)
Utilities 通用類別：Flex (12:12)
格線系統與 Utilities 的混合運用 (4:58)
格線系統：實作練習 (10:21)
格線系統：常見錯誤 (6:10)
測驗：Flex 與網格系統介紹
通用類別 Utilities 與 工具 Helpers
Utilities 與 helpers 基本介紹 (3:07)
課程名稱調整說明
Background - 背景色彩（重要） (4:03)
Border - 邊框（重要） (6:22)
Text color - 文字色彩 (3:14)
Display - 盒模型（非常重要） (5:40)
Float - 浮動 (3:54)
Interactions - 互動（好用） (2:58)
Overflow - 溢出 (3:46)
Position - 位置（重要） (11:26)
Shadow - 陰影（好用） (3:21)
Sizing - 尺寸（重要） (5:58)
Text - 文字（好用） (7:06)
Vertical alignment - 垂直對齊（好用） (1:57)
Visibility - 可視性 (1:13)
Helper: Clearfix - 清除浮動 (1:42)
Helper: Colored links - 連結顏色（重要） (1:39)
Helper: Ratio - 比例（好用） (2:28)
Helper: Visually hidden - 視覺隱藏 (0:52)
Helper: Stretched link - 連結延伸（重要） (5:02)
Helper: Text truncation - 文字截斷（好用） (3:43)
測驗：通用類別 Utilities 與 工具 Helpers
表單運用
知識點：網頁親和性 (4:54)
表單運用概觀 (7:12)
表單元素常用的 form-control (4:18)
表單 Select .form-select (2:23)
表單的 Radio 與 Checkbox 運用 (6:52)
表單的 Range 樣式 (2:44)
群組式 input (7:01)
表單驗證技巧 (7:39)
新的表單樣式！form-floating (4:58)
表單排版技巧 (11:18)
Bootstrap 最實用的工具 - 元件
元件簡介 (6:45)
元件與 JavaScript 之間的關係 (3:47)
手風琴 (Accordion) (7:16)
警報 (Alerts)（好用） (7:16)
標籤 (Badges)（好用） (4:03)
麵包屑 (Breadcrumb)（好用） (1:54)
按鈕 (Buttons)（非常重要） (9:43)
按鈕群組 (Button group)（重要） (7:54)
卡片 (Cards)（非常重要） (15:47)
輪播 (Carousel) (9:12)
關閉按鈕 (Close button)（好用） (1:34)
折疊 (Collapse)（重要） (3:58)
下拉選單 (Dropdowns)（好用） (13:17)
列表群組 (List group)（好用） (8:27)
互動視窗 (Modal)（重要） (9:19)
導覽與頁籤 (Navs and tabs) (8:37)
導覽列（Navbar）（重要） (13:38)
Offcanvas - 側欄滑動導覽（好用） (4:26)
分頁 (Pagination)（好用） (2:40)
彈出提示框 (Popovers) (4:16)
進度條 (Progress)（好用） (3:56)
滾動監控 (Scrollspy) (4:12)
讀取圖示 (Spinners)（重要） (5:36)
吐司 (Toasts)（重要） (5:07)
工具提示框 (Tooltips)（好用） (3:56)
JavaScript 操作
Bootstrap JS 操作簡介 (4:37)
JavaScript 初始化行為 (6:35)
選項、方法以及事件 (11:40)
萬年不敗 jQuery (7:48)
使用 Bootstrap 完成 Blog 版型
Blog 版型 - 簡介 (5:41)
Blog 版型 - 導覽列 (6:13)
Blog 版型 - 首圖背景 (10:41)
Blog 版型 - 水平卡片排版技巧 (10:40)
Blog 版型 - 內文及側欄安排 (12:15)
Blog 版型 - Footer 製作 (2:58)
Blog 版型 - 作業說明 (1:15)
Blog 版型 - 作業範例下載
Bootstrap 與神奇的 Sass
Bootstrap 與 Sass 的關係 (5:11)
在 VSCode 中加入 Sass 環境 (4:05)
匯入 Bootstrap 並調整樣式 (7:15)
讓 Bootstrap 不要那麼肥，手動匯入元件 (3:55)
修改特定的元件的變數 (8:11)
Bootstrap 隱藏功能開關！ (3:02)
響應式文字縮放功能 (2:15)
自定義通用類別 (10:44)
使用 Bootstrap 方法，產生獨立元件 (5:28)
在 Sass 中，自訂高可用性的元件 (6:31)
學員專屬：Bootstrap 額外元件範例
學員專屬：Bootstrap 額外範例說明 (0:57)
額外元件範例資源下載
個人簡歷 - 練習使用 Sass 變數開發網頁
個人簡歷：匯入 Sass (4:04)
個人簡歷：課程相關資源
個人簡歷：Header 首圖製作 (11:04)
個人簡歷：自我介紹區塊 (6:04)
個人簡歷：三欄式卡片運用 (6:13)
個人簡歷：卡片樣式調整 (10:21)
個人簡歷：Footer 製作及表單驗證樣式調整 (11:22)
個人簡歷：整理 Sass 專案檔案 (7:39)
個人簡歷：範例作業下載
後台管理 - 功能性為導向的介面規劃
後台管理：章節說明 (2:47)
後台管理：結構規劃 (8:51)
後台管理：可收合的側欄選單 (11:41)
後台管理：側欄選單內容 (12:04)
後台管理：版型整理 (5:51)
後台管理：常見卡片區塊結構 (11:30)
後台管理：動態圖表範例程式碼 (11:30)
後台管理：表格運用 (12:42)
後台管理：訂單管理介面 (11:33)
後台管理：傳遞內容至 Modal 內 (8:27)
後台管理：單一產品頁面製作 (3:51)
後台管理：Sticky 與 scroll spy 的混合運用 (6:25)
後台管理：作業製作 (2:34)
後台管理：範例程式碼參考
Landing Page 設計稿練習
Landing Page 設計稿練習：章節簡介 (6:43)
Landing Page 設計稿練習：課程資源
Landing Page 設計稿練習：導覽列製作 (9:08)
Landing Page 設計稿練習：Header 圖片 (7:46)
Landing Page 設計稿練習：多欄式卡片 (5:40)
Landing Page 設計稿練習：特殊卡片排版 (10:09)
Landing Page 設計稿練習：表單響應式卡片排版 (16:38)
Landing Page 設計稿練習：章節練習說明 (14:18)
最終挑戰
最終作業繳交說明
最終挑戰說明 (5:53)
最終挑戰課程資源
補充課程：
2022 從設計到切版，Figma > Bootstrap 一次完成 (107:58)
彈出提示框 (Popovers)
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程