自動播放
自動完成
上一堂課程
完成並繼續課程
670045
精通 Bootstrap 4 - 開發超強不解釋
六角學院線上資源
六角學院線上社團
Apple M1 觀看公告
課程概觀
為什麼 Bootstrap 有這樣大的魅力 (1:57)
Bootstrap 4 與前一版的差異 (3:34)
Bootstrap 4 與前一版的差異-課程補充
新手、老手課程導覽 (1:10)
更新紀錄
字幕錯誤修正
課程補充教材
課程最終任務說明
快速上手 Bootstrap
認識 Bootstrap 的文件 (5:00)
中英文文件連結
建立開發環境 - 使用 VSCode (6:15)
VSCode Preview on Web Server 替代套件
加入 Bootstrap 及元件的組成概念 (8:25)
Bootstrap 建立第一個網頁 (7:03)
基礎內容文件要點說明
重置排版 (11:07)
文字與語意化 (8:19)
圖片與響應式 (9:08)
表格基本架構說明 (10:39)
內容章節測驗
Flex 、網格系統 及相關的排版概念
網格概念 (7:22)
Bootstrap 中的欄與列 (9:57)
Bootstrap 中的響應式中斷點 (9:49)
欄與欄寬 (3:26)
課程名稱調整說明
CSS3 Flex 的重要觀念（非常重要） (7:14)
Bootstrap 通用類別與 Flex（好用） (9:48)
Container 觀念（好用） (3:21)
Bootstrap Flex 補充說明（好用） (5:01)
通用類別中的 Spacing 妙用 (7:41)
範例：元件與 Grid 的關係 (4:13)
範例：使用 Grid 製作相簿排版 (9:15)
範例：使用 Grid 製作時間軸的排版 (9:47)
範例：使用 Grid 製作時間軸的排版-課程補充
結語：本章很重要，請多多練習 (1:16)
網格系統章節測驗
Bootstrap 通用類別 (Utilities)
下載練習範例並運行 (2:20)
課程練習網址
Grid 額外練習章節：網格系統 (9:53)
Grid 額外練習章節：媒體物件 (3:54)
Borders 邊框 (5:59)
Clearfix 清除浮動（好用） (1:24)
Close Icon 關閉圖示 (1:02)
Color 顏色（重要） (2:56)
Display 顯示屬性（重要） (4:35)
Embed 內嵌 (1:59)
通用類別 Flex（非常重要） (9:21)
通用類別 Float（好用） (2:15)
Image replacement 圖像替換 (0:47)
Image replacement 圖像替換-課程補充
Position 位置（好用） (3:23)
Screenreaders 螢幕閱讀器 (0:57)
Sizing 尺寸 (1:18)
Spacing 間隔（非常重要） (3:49)
Text 文字（非常重要） (3:04)
vertical-align 垂直對齊 (1:32)
Visibility 可見性 (0:54)
Utilities 章節測驗
Bootstrap 元件 (Components)
Bootstrap 文件概述 (4:15)
盲人如何閱讀網頁 (網頁親和性與他的工具) (6:47)
盲人如何閱讀網頁 (網頁親和性與他的工具)-課程補充
Sass 與 Bootstrap (4:29)
Alerts 警報（好用） (4:00)
Badge 標籤 (3:32)
breadcrumb 麵包屑 (2:27)
Buttons 按鈕（非常重要） (11:15)
Button group 按鈕群組 (5:58)
Card 卡片（重要） (11:18)
Carousel 輪播 (3:42)
Collapse 折疊（重要） (4:51)
Dropdowns 下拉選單（好用） (4:14)
Forms 表單（非常重要） (11:48)
表單驗證 (4:04)
Input group / Input 群組 (3:23)
Jumbotron 廣告大屏幕 (1:12)
List group 列表群組 (4:58)
Modal 互動視窗（重要） (4:15)
Navs 導覽（好用） (4:39)
Navbar 導覽列（非常重要） (7:18)
Pagination 分頁 (2:28)
Popovers, Tooltips / 彈出提示框、工具提示框（好用） (3:40)
Scrollspy 滾動監控 (2:08)
Progress 進度條 (3:19)
實作練習： Blog 網站版型
Blog 版型案例說明 (3:39)
將 Fontawesome 加到網頁上 (1:51)
將 Fontawesome 加到網頁上-課程補充
使用從零開始建立 Blog 版型 (6:29)
網格系統及內文排版 (12:11)
留言區塊排版說明 (6:02)
使用 Utilities 建立 Footer 結構 (4:15)
Blog 作業檢查 (1:05)
部落格作業說明
形象首頁版型介紹
形象版網頁頁面的介紹 (4:01)
範例檔案及相關連結
Navbar 的實作與調整 (10:36)
製作滿版的背景圖及文字輪播 (8:04)
常見的三欄式排版 (7:02)
使用格線做混合式排版 (10:18)
充滿自由的 Flex 排版 (3:58)
網頁上置放 Google Map 及表單 (10:02)
Bootstrap 簡易表單驗證 (4:48)
格線系統及背景效果 (4:04)
網頁中不同 Modal 互相切換的手法 (7:03)
修正 Modal 小錯誤 (7:29)
後台版型介紹 上線
後台版型課程介紹 (4:09)
範例檔案及相關連結
使用 Flex 伸展特性安排組件 (11:52)
為你的後台加上圖表版型 (9:13)
表格結構注意細節 (13:31)
為了你的後台加上控制列 (4:03)
為表格加上回饋式訊息 (9:44)
進階 Modal 使用，動態傳入參數 (13:08)
最後補充及作業說明 (4:21)
購物網站介面上線
Bootstrap 製作購物網頁簡介 (3:12)
範例檔案及相關連結
自定義 Dropdown 技巧（4.1.3 版以後已不需要另外加入定位） (8:30)
Jumbotron 大區塊排版技巧 (4:21)
卡片式排版與 Grid System 整齊排版手法 (12:30)
使用 List Group 切換產品類別 (6:33)
產品購買區塊製作 (11:12)
使用 Alert 元件製作多步驟提示 (4:32)
收合購物車列表及表單排版技巧 (5:36)
購物車頁面作業說明 (2:20)
Bootstrap 與 Sass
Sass 環境與運行的方法 (7:08)
本章節使用的說明文件
正式版後變數的改變 以及 Sass 錯誤的排除方式 (6:48)
選擇性載入 Bootstrap 與修改變數 (10:33)
變數修改說明及示例 (10:14)
新增自己的元件，並讀取 Bootstrap 的變數 (10:38)
如何釋出編譯後的 Sass 檔案 (2:15)
更好的 Bootstrap 版型開發
更好的版型設計 - 從版型中尋找合適的範例 (10:52)
更好的版型設計 - 從相關的資源臨摹 (5:22)
範例網站及章節程式碼
不同的排版 - 不規則格狀排版 (8:37)
不同的排版 - 高低不同的價格表 (6:32)
使用 Sass 開發屬於自己的元件 (上) (8:06)
使用 Sass 開發屬於自己的元件 (下) (13:04)
Bootstrap JavaScript 元件補充說明
JS 元件的其它操作方法概述 (3:45)
Options 與 Methods 基礎套用方法 (5:23)
使用 Events 監控元件狀態 (6:38)
Bootstrap 最終挑戰
最終作業寄送變更
最終挑戰 - 使用 Bootstrap 開發甜點電商
Buttons 按鈕（非常重要）
/courses/670045/lectures/11952768/hotmart_lecture_video_download_link/51719954
670045
完成並繼續課程