自動播放
自動完成
上一堂課程
完成並繼續課程
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)
Utilities 與 helpers 基本介紹
課程內容未解鎖
如果您已經購買此課程,
請您重新登入後再查看
.
購買本課程