重置排版

670045

精通 Bootstrap 4 - 開發超強不解釋

六角學院線上資源

課程概觀

快速上手 Bootstrap

基礎內容文件要點說明

重置排版 (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 網站版型

形象首頁版型介紹

形象版網頁頁面的介紹 (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 元件補充說明

Bootstrap 最終挑戰

/courses/670045/lectures/11952664/hotmart_lecture_video_download_link/41203570

670045