Bootstrap 5 網頁切版整合術

挑戰 5 大範例版型

4.40 (5 reviews)
Udemy
platform
中文
language
Web Development
category
27
students
15 hours
content
Mar 2024
last update
$74.99
regular price

What you will learn

已經熟悉 HTML、CSS,想加快切版速度的開發者

對於 Bootstrap 有興趣,但還不熟悉者

除了 Bootstrap,還想要了解與其它工具整合的技術的開發者

想要大量練習不同版型,增加切版熟練度的開發者

Description

Bootstrap 是目前最主流的 CSS 前端開發工具包,在大量開發者的協作及使用者運用下,它可以適用於各種情境,無論是活動頁面、購物網站、控制台、行動版網頁一律適用。

Bootstrap 5 超豐富線上課程,基於前一版本的優化,包含 Bootstrap 5 的各項新增設計概念、強化 JavaScript、Sass 運用章節,以及提供更易於學習的整合講義。

本課程將推出全新主題設計稿,讓你在學習過程中更添加自己的成就感。


本次的課程內容包含:

  • 600 分鐘以上的基礎知識教學

  • 超過 50 頁的練習講義

  • 超過 25 式常用的網頁元件

  • 兩款實戰情境版型

  • 一款最終挑戰版型


This course includes:

  • 600+ minutes of basic knowledge

  • Over 50 pages of example practice code

  • Over 25 components that commonly used on web

  • Two layouts in practical application

  • A final challenge layout

Content

六角學院 - 線上資源

六角學院線上社團

環境建置

Bootstrap 文件介紹
Bootstrap 中英文文件連結
VSCode 基礎環境建置
VSCode 與相關資源連結
語系設置與 Bootstrap CDN
CSS 的 Class 運用
快速體驗 Bootstrap 建立一個網站

Bootstrap 文件介紹

知識點:box-sizing
知識點:CSS Variables
知識點:rem 單位
知識點:系統預設字體
CSS Reset 做了什麼
六角學院專屬「Bootstrap 練習手冊」
Bootstrap 5 練習手冊連結
文字運用
基本圖片運用
圖片區
表格運用
測驗:Bootstrap 文件介紹

Flex 與網格系統介紹

基礎格線觀念
繪圖軟體與格線之間的關聯性
響應式中斷點
格線容器
欄:上篇
欄:下篇
欄與欄的間距:Gutter 觀念說明
欄與欄的間距:Gutter
CSS Flex 與格線系統
Utilities 通用類別:間隔 Spacing
Utilities 通用類別:Flex
格線系統與 Utilities 的混合運用
格線系統:實作練習
格線系統:常見錯誤
測驗:Flex 與網格系統介紹

通用類別 Utilities 與 工具 Helpers

Utilities 與 helpers 基本介紹
課程名稱調整說明
Background - 背景色彩(重要)
Border - 邊框(重要)
Text color - 文字色彩
Display - 盒模型(非常重要)
Float - 浮動
Interactions - 互動(好用)
Overflow - 溢出
Position - 位置(重要)
Shadow - 陰影(好用)
Sizing - 尺寸(重要)
Text - 文字(好用)
Vertical alignment - 垂直對齊(好用)
Visibility - 可視性
Helper: Clearfix - 清除浮動
Helper: Colored links - 連結顏色(重要)
Helper: Ratio - 比例(好用)
Helper: Visually hidden - 視覺隱藏
Helper: Stretched link - 連結延伸(重要)
Helper: Text truncation - 文字截斷(好用)

表單運用

知識點:網頁親和性
表單運用概觀
表單元素常用的 form-control
表單 Select .form-select
表單的 Radio 與 Checkbox 運用
表單的 Range 樣式
群組式 input
表單驗證技巧
新的表單樣式!form-floating
表單排版技巧

Bootstrap 最實用的工具 - 元件

元件簡介
元件與 JavaScript 之間的關係
手風琴 (Accordion)
警報 (Alerts)(好用)
標籤 (Badges)(好用)
麵包屑 (Breadcrumb)(好用)
按鈕 (Buttons)(非常重要)
按鈕群組 (Button group)(重要)
卡片 (Cards)(非常重要)
輪播 (Carousel)
關閉按鈕 (Close button)(好用)
折疊 (Collapse)(重要)
下拉選單 (Dropdowns)(好用)
列表群組 (List group)(好用)
互動視窗 (Modal)(重要)
導覽與頁籤 (Navs and tabs)
導覽列(Navbar)(重要)
Offcanvas - 側欄滑動導覽(好用)
分頁 (Pagination)(好用)
彈出提示框 (Popovers)
進度條 (Progress)(好用)
滾動監控 (Scrollspy)
讀取圖示 (Spinners)(重要)
吐司 (Toasts)(重要)
工具提示框 (Tooltips)(好用)

JavaScript 操作

Bootstrap JS 操作簡介
JavaScript 初始化行為
選項、方法以及事件
萬年不敗 jQuery

使用 Bootstrap 完成 Blog 版型

Blog 版型 - 簡介
Blog 版型 - 導覽列
Blog 版型 - 首圖背景
Blog 版型 - 水平卡片排版技巧
Blog 版型 - 內文及側欄安排
Blog 版型 - Footer 製作
Blog 版型 - 作業說明
Blog 版型 - 作業範例下載

Bootstrap 與神奇的 Sass

Bootstrap 與 Sass 的關係
在 VSCode 中加入 Sass 環境
匯入 Bootstrap 並調整樣式
讓 Bootstrap 不要那麼肥,手動匯入元件
修改特定的元件的變數
Bootstrap 隱藏功能開關!
響應式文字縮放功能
自定義通用類別
使用 Bootstrap 方法,產生獨立元件
在 Sass 中,自訂高可用性的元件

學員專屬:Bootstrap 額外元件範例

學員專屬:Bootstrap 額外範例說明
額外元件範例資源下載

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

個人簡歷:匯入 Sass
個人簡歷:課程相關資源
個人簡歷:Header 首圖製作
個人簡歷:自我介紹區塊
個人簡歷:三欄式卡片運用
個人簡歷:卡片樣式調整
個人簡歷:Footer 製作及表單驗證樣式調整
個人簡歷:整理 Sass 專案檔案
個人簡歷:範例作業下載

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

後台管理:章節說明
後台管理:結構規劃
後台管理:可收合的側欄選單
後台管理:側欄選單內容
側欄選單內容的程式碼
後台管理:版型整理
後台管理:動態圖表範例程式碼
動態圖表範例程式碼
後台管理:表格運用
後台管理:訂單管理介面
後台管理:傳遞內容至 Modal 內
後台管理:單一產品頁面製作
後台管理:Sticky 與 scroll spy 的混合運用
後台管理:作業製作
後台管理:範例程式碼參考

Landing Page 設計稿練習

Landing Page 設計稿練習:章節簡介
Landing Page 設計稿練習:課程資源
Landing Page 設計稿練習:導覽列製作
Landing Page 設計稿練習:Header 圖片
Landing Page 設計稿練習:多欄式卡片
Landing Page 設計稿練習:特殊卡片排版
Landing Page 設計稿練習:表單響應式卡片排版
Landing Page 設計稿練習:章節練習說明

最終挑戰

最終作業繳交說明
最終挑戰說明
最終挑戰課程資源

Bonus lecture

Bonus lecture

Screenshots

Bootstrap 5 網頁切版整合術 - Screenshot_01Bootstrap 5 網頁切版整合術 - Screenshot_02Bootstrap 5 網頁切版整合術 - Screenshot_03Bootstrap 5 網頁切版整合術 - Screenshot_04

Charts

Price

Bootstrap 5 網頁切版整合術 - Price chart

Rating

Bootstrap 5 網頁切版整合術 - Ratings chart

Enrollment distribution

Bootstrap 5 網頁切版整合術 - Distribution chart

Related Topics

4738826
udemy ID
6/17/2022
course created date
7/10/2022
course indexed date
Bot
course submited by