布魯斯的 Bootstrap 5 開發秘技｜極速開發電商網站 UI

系列課程帶你一次上手 2 種主流 CSS 框架，讓你靈活快速應對各種專案

帶你用最新技術做出業界常見的電商網站

快速了解 Bootstrap 4 與 Bootstrap5 的重要更新

•  移除 jQuery 和 IE 支援：這也代表使用 Bootstrap 5 建構的專案，其檔案大小將輕巧的多，頁面載入也能夠更加快速。
  
  
•  CSS 原生自定變數使用：CSS 原生自定變數的支援度在 2020 年已經超過 90% ，能做到更為細緻的樣式。
  
  
•  更多樣的色彩：除了熟悉的 primary, secondary等等，現在的顏色選擇更多了。
  
  
•  新版表格元件： 原先 Bootstrap 4 放在 Components 裡頭的 Form（表格），在 Bootstrap 5 獨立成一個類別。最明顯的新增就是 iOS、Android 上的開關樣式，可以直接套用。

想用 Bootstrap 快速架站，但卻老是因為這些問題卡關 ?

困境 1：不了解 Ｗebpack，不知道如何導入前端專案

💡解法：在課程中，會教大家如何快速上手 Ｗebpack 這個工具，提升對 Ｗebpack 的熟悉程度，進而導入 Bootstrap 到前端專案中。

困境 2：不熟悉 Bootstrap 中的 API，不知道該怎麼開發

💡解法：老師將從基礎語法教起，並且將核心概念分為「Layout 網頁排版」、「Component 網頁組件」、「Forms 網頁表單」、「Helper 網頁小幫手」、「Utility 網頁CSS工具」等章節講解，最後手把手教你做出電商網站 UI。

困境 3：當想要自訂義顏色、大小等樣式時，但不熟悉 Bootstrap，只能加上自己定義的 class 名稱去覆蓋樣式

💡解法：學習 sass，以及操作 Bootstrap 已經寫好的 sass 檔案，來自定義自己想要的樣式。

完整教授 Bootstrap 5 核心功能與技法，擺脫跟複雜的 CSS 奮鬥的苦日子

• 從零開始建立 Webpack 前端專案
• 將 Bootstrap 與 Webpack 整合
• Sass 自定義 Bootstrap

• 學習如何使用 Layout 等工具排版
• 快速利用內建 Component 建立網站

• 學習有效規劃網站 UI，節省後續寫 code 的時間
• 做出業界常見的電商 UI 版面

什麼是 Bootstrap ? 超過 86% 相關職缺都必備的技能！

Bootstrap 是一個開發網站的前端框架，核心的目標是達成 RWD 響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小，並且  Bootstrap 能在預設的框架下，提供多項模組化的版型、卡片、按鈕等元件。

你只需要配置恰當的 HTML 架構並加上幾個 Bootstrap class，就能快速的架構出美觀又功能完善的網站，節省許多設計排版的時間。

專業師資帶你輕鬆掌握框架，少踩許多開發痛點