精通 Bootstrap 4 - 開發超強不解釋
4.8 (740 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,468 students enrolled

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

質感網站輕鬆不求人
4.8 (740 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,468 students enrolled
Last updated 7/2020
Traditional Chinese
Traditional Chinese
Price: $69.99
30-Day Money-Back Guarantee
This course includes
  • 11.5 hours on-demand video
  • 22 articles
  • 14 downloadable resources
  • 1 Practice Test
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 學會如何使用 Bootstrap 建立網頁及元件
  • 了解 Bootstrap 的開發模式
  • 使用 Bootstrap 尋找合適的工作
Course content
Expand all 139 lectures 11:52:47
+ 課程概觀
9 lectures 08:08
Bootstrap 4 與前一版的差異-課程補充
00:13
新手、老手課程導覽-課程補充
00:05
字幕錯誤修正
00:06
課程最終任務說明
00:10
+ 快速上手 Bootstrap
6 lectures 27:12

VSCode 網站:https://code.visualstudio.com/

插件:

Preview on Web Server
https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server

Sublime Text Keymap
https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

建立開發環境 - 使用 VSCode
06:15
VSCode Preview on Web Server 替代套件
00:21
加入 Bootstrap 及元件的組成概念
08:25
Bootstrap 建立第一個網頁
07:03
+ 基礎內容文件要點說明
4 lectures 39:13
文字與語意化
08:19
圖片與響應式
09:08
表格基本架構說明
10:39

本段測驗測試同學對於標籤運用的熟悉程度

內容章節測驗
4 questions
+ Flex 、網格系統 及相關的排版概念
14 lectures 01:28:23
網格概念
07:22
Bootstrap 中的欄與列
09:57
Bootstrap 中的響應式中斷點
09:49
欄與欄寬
03:26
Bootstrap 通用類別與 Flex ⭐
09:48
Container 觀念 ⭐
03:21
Bootstrap Flex 補充說明 ⭐
05:01
通用類別中的 Spacing 妙用
07:41
範例:元件與 Grid 的關係
04:13
範例:使用 Grid 製作相簿排版
09:15
範例:使用 Grid 製作時間軸的排版
09:47
範例:使用 Grid 製作時間軸的排版-課程補充
00:13
結語:本章很重要,請多多練習
01:16
網格系統章節測驗
5 questions
+ Bootstrap 通用類別 (Utilities)
21 lectures 01:02:01
下載練習範例並運行
02:20
課程練習網址
00:24
Grid 額外練習章節:網格系統
09:53
Grid 額外練習章節:媒體物件
03:54
Borders 邊框
05:59
Clearfix 清除浮動 ⭐
01:24
Close Icon 關閉圖示
01:02
Color 顏色 ⭐⭐
02:56
Display 顯示屬性 ⭐⭐
04:35
Embed 內嵌
01:59
通用類別 Float ⭐
02:15
Image replacement 圖像替換
00:47
Image replacement 圖像替換-課程補充
00:15
Position 位置 ⭐
03:23
Screenreaders 螢幕閱讀器
00:57
Sizing 尺寸
01:18
Spacing 間隔 ⭐⭐⭐
03:49
Text 文字 ⭐⭐⭐
03:04
vertical-align 垂直對齊
01:32
Visibility 可見性
00:54
Utilities 章節測驗
4 questions
+ Bootstrap 元件 (Components)
25 lectures 02:01:16
盲人如何閱讀網頁 (網頁親和性與他的工具)-課程補充
00:13
Alerts 警報 ⭐
04:00
Badge 標籤
03:32
breadcrumb 麵包屑
02:27
Button group 按鈕群組
05:58
Card 卡片 ⭐⭐
11:18
Carousel 輪播
03:42
Collapse 折疊 ⭐⭐
04:51
Dropdowns 下拉選單 ⭐
04:14
Forms 表單 ⭐⭐⭐
11:48
表單驗證
04:04
Input group / Input 群組
03:23
Jumbotron 廣告大屏幕
01:12
List group 列表群組
05:20
Modal 互動視窗 ⭐⭐
04:55
Navs 導覽 ⭐
04:39
Navbar 導覽列 ⭐⭐⭐
07:18
Pagination 分頁
02:28
Popovers, Tooltips / 彈出提示框、工具提示框 ⭐
03:40
Scrollspy 滾動監控
02:08
Progress 進度條
03:19
+ 實作練習: Blog 網站版型
9 lectures 37:25
Blog 版型案例說明
03:39
將 Fontawesome 加到網頁上
01:51
將 Fontawesome 加到網頁上-課程補充
00:23
使用從零開始建立 Blog 版型
06:29
網格系統及內文排版
12:11
留言區塊排版說明
06:02
使用 Utilities 建立 Footer 結構
04:15
Blog 作業檢查
01:05
部落格作業說明
01:29
+ 形象首頁版型介紹
12 lectures 01:19:18
形象版網頁頁面的介紹
04:01
範例檔案及相關連結
01:53
Navbar 的實作與調整
10:36
製作滿版的背景圖及文字輪播
08:04
常見的三欄式排版
07:02
使用格線做混合式排版
10:18
充滿自由的 Flex 排版
03:58
網頁上置放 Google Map 及表單
10:02
Bootstrap 簡易表單驗證
04:48
格線系統及背景效果
04:04
網頁中不同 Modal 互相切換的手法
07:03
修正 Modal 小錯誤
07:29
+ 後台版型介紹 上線
9 lectures 01:10:45
後台版型課程介紹
04:09
範例檔案及相關連結
00:44
使用 Flex 伸展特性安排組件
11:52
為你的後台加上圖表版型
09:13
表格結構注意細節
13:31
為了你的後台加上控制列
04:03
為表格加上回饋式訊息
09:44
進階 Modal 使用,動態傳入參數
13:08
最後補充及作業說明
04:21
Requirements
  • 對於 HTML、CSS 有基礎的了解
Description

世界上最受歡迎的前端框架 Bootstrap 出現繁體中文版教學囉~

此課程不在是念過所有元件的基礎課程,課程中會透過簡報、動畫不斷的強化同學對於網頁設計、Bootstrap 的運用觀念,並且在課程的進行中會透過許多的案例加深對於元件的使用概念,讓學習框架不再只是依循著文件內容而已。

除了基礎運用及範例外,課程中還會介紹到如何進階開發屬於品牌、產品專屬的元件庫,讓使用 Bootstrap 不再只是一層不變。

還在猶豫嗎?這是世界最受歡迎的前端框架,有了這技術製作具質感的網站再也不求人!

Who this course is for:
  • 想要快速建立網頁的同學
  • 對於 Bootstrap 有興趣的同學
  • 想要更精進 CSS 的同學