由 5 個專案從基礎學會 Bootstrap 4

Contents

掌握最新版本的 Bootstrap（4.1.1），並在學習 HTML5 語義和 CSS3 的同時構建 5 個實用的主題 ( themes )

從這 11.5 小時的課程，你會學到

從頭開始學習和創建出色的高品質 Bootstrap 4 主題( themes )和用戶界面
使用自訂沙盒環境了解 Bootstrap 4 實用工具 ( utilities ) 、類( classes )、元件( componenets )和 JS 小工具( widgets )
創建一個專業的工作流程和開發伺服器，以便從源始碼建置和做 Sass 編譯
學習語義 HTML5 和現代 CSS3 技術

要求

應具備 HTML 和 CSS 的基本知識
不需要知道任何 Bootstrap 3

課程說明

本課程將確實讓你從對 Bootstrap 3 或 4一無所知到學會所有的實用工具、元件、小工具和網格，並製作出真實可用的主題 ( themes ) 和網站。你不需要知道 Bootstrap 3 才能了解此課程。如果你已經知道 Bootstrap 4，可直接跳到第 6 部分來做自訂的工作流程，做所有的專案。課程以模組化安排！

自訂 Bootstrap 沙盒

本課程的前幾部分以完全自訂的 HTML 學習環境進行。每個講座都有一個與其相關的 html 頁面，且有開始狀態。隨著講課的進行，你將與我一起學習 Bootstrap 4 提供的所有工具，包括小幫手/實用工具( utilities )、元件( components )、小工具( widgets )、彈性盒( flexbox )等。

Bootstrap 入門包

一旦你了解沙盒，我們將設置 Starter Pack ( 我為本課程創建的)。這將給你一個真實的開發工作流程，從源始碼編譯 Bootstrap 4 和編譯 Sass 。它甚至會給我們一個自動加載的開發伺服器。我們將在 5 個專案使用 Starter Pack。

5個真實的專案 / 主題

我們將使用 Starter Pack 創建 5 個實用的主題，包括

LoopLap – 社交用戶界面主題
Mizuxe – 書/產品展示主題
Blogen – 一個部落格管理區 UI
Glozzom – 有旋轉木馬和一些第三方腳本的多頁主題
Portfoligrid – 使用網格( grid )、彈性盒 ( flexbox ) 和折疊控件 (collapse widget )的投資組合主題

目標受眾

任何想要學習和掌握 Bootstrap 4 並構建實用主題( themes )的人

講師簡介

Brad Traversy Traversy Media 的全端 Web 開發者與講師

Brad Traversy 有12 年以上的程式設計經驗和近5年的教學經驗。他創立 Traversy Media ，一個成功的 Web 開發 YouTube 頻道，擅長前端框架 (從 HTML5 到 Angular 等)，以及 Node.js、PHP和 Python 等伺服器端技術。 Brad 清楚掌握如何將非常複雜的話題簡單說明，讓聽眾容易了解。通過 Brad 易懂的課程來投資你自己擴展你的職涯吧。