基礎格線觀念

1542216

Bootstrap 5 網頁切版整合術

六角學院 - 線上資源

環境建置

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 完成 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 額外元件範例

個人簡歷 - 練習使用 Sass 變數開發網頁

後台管理 - 功能性為導向的介面規劃

後台管理：章節說明 (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)

最終挑戰

補充課程：

/courses/1542216/lectures/35409808/hotmart_lecture_video_download_link/64029597

1542216