進度條

線上程式教學課程: Bootstrap 5與Sass,製作RWD客製化響應式網站

製作RWD響應式網站已成為前端工程師基本能力,但是你有能力脫離預設外觀進行客製化嗎?疊床架屋的CSS語法你確定可以維護?本課程從Bootstrap Sass原始碼下手,讓調整前端畫面不再是你的惡夢。

最後更新時間: 2022/12

Loading

特價 NT$: 3200

原價 NT$: 4800

優惠至:2024/12/15

課程包含:

終生於平台觀看 詳情

6個章節,51堂影片

11小時以上的課程時間

本課程未在其他平台上架。


信用卡、超商、ATM、Paypal皆可付款

3、6期信用卡付款零利率 查看支援銀行

(信用卡不留卡號,Paypal需非台灣)

課程敘述

【 Bootstrap 5 使用與修改章節已經完成。】

【 Sass 進階部分預計將於 7月底完成,課程每周持續進行更新】

 

來看看範例實作的成果吧!
https://progressbartw.github.io/bootstrap3/
(此範例為Bootstrap 3 課程完結範例,Bootstrap 5 課程會建立在此之上講授更多內容)

 

現代人通常都擁有不同視窗大小的電腦或是行動裝置,以至於在製作網站的時候無法用單一尺寸的視覺設計方式來考量,不然畫面絕對會無法正確呈現,嚴重甚至網站無法正常運作。而響應式網頁設計就是為此而生的網頁設計方式。

 

響應式網頁設計 RWD = Responsive Web Design,又稱自適應網頁設計。除了對一般使用者外,對於搜尋引擎最佳化、SEO 來說是相當重要的一環,也就是 Google 等搜尋引擎提倡的「行動裝置優先」中的重點。

 

製作優良的響應式網站必須以 CSS 為主體去做設計開發,而是市面上也有不少將 CSS 常用套路組合成可以直接使用的網頁元件,已達到快速開發的目的,可以在網頁開發一開始節省 70% 甚至以上的時間。而此課程將要介紹的 Bootstrap 為製作響應式網站中最熱門的框架。

 

(不知道 HTML、CSS、JavaScript?可參考:HTML, CSS, JavaScript, jQuery 網頁從零開始)

 

Bootstrap 相當好用,從 Bootstrap 3 開始就成了市場的霸主,Bootstrap 4 雖然在技術層面上有所變化,但大部分繼承了前代的特性,並不會因為隔代而需要完全重新學習。

 

既然 Bootstrap 3 與 4 已經相當成熟,那為何需要 Bootstrap 5 呢?原因是因為除去響應式頁面外,這幾年網頁前端技術還是有相當多的變化。React 崛起導致 jQuery 逐漸式微,新的 JavaScript 版本也都已經吸收了 jQuery 的優點,製作出自己版本的語法。而 jQuery 被 Bootstrap 3/4 視為必要相依函式庫,導致與新型態開發方式有相容上的一些問題。所以 Bootstrap 5 最主要的目的就是擺脫掉 jQuery 的相依性,因此升級到 Bootstrap 5 是絕對有好處的。 

 

(更多 React 介紹可參考:ES6,ReactJS與Webpack,前端JavaScript全攻略)

 

本課程主要分為三個階段,第一個階段為使用 Bootstrap 5 快速開發,製作出標準常見的響應式頁面,讓對於開發響應式頁面沒有經驗的同學也可以快速上手。此階段的目標成果為有能力利用 Bootstrap 5 快速開發相應式頁面。

 

第二個階段我們會進入 Sass 與 Bootstrap 原始碼的講解。Sass 可以想成加強版的 CSS 語法,對於寫大量或複雜的 CSS 邏輯非常的有幫助,也是現在最主流的做法。Bootstrap 的原始碼也是先由 Sass 語法撰寫,再編譯成 CSS 語法。我們這個階段會從基礎的 Sass 語法開始講解,逐步加強難度到觀看 Bootstrap 的原始碼。

此階段的目標成果為有能力修改 Bootstrap 5 的基礎樣板外觀,並且製作相容於 Bootstrap 5 的客製化元件。並且不會破壞 Bootstrap 5 的原始結構,讓專案管理成為可能。

 

特別需要提到一點,前面說明提到使用 Bootstrap 在開發的一開始通常都可以提高速度,但是如果碰到高度客製化的需求又不懂 Bootstrap 的元件邏輯硬改的話,會導致中後期專案幾乎無法維護,因為沒有元件概念,導致隨便動一點整個畫面就崩壞破版了。這點只要對 Bootstrap 有更深入的理解就可以避免。

 

最後一個階段我們會加入探討 Bootstrap 包含 JavaScript 的元件邏輯,並且用我們自身修改出來的 Bootstrap 樣板進行開發製作一個完整的前端網站作為最後的範例練習,通過這樣的複合應用即可完成一個有強度的成品,也可依此邏輯修改製作自己的作品豐富作品集。

 

課程難度

初級,此課程需要一點基本程式經驗。

請參閱課程需求

課程需求

1. 知道什麼是瀏覽器,什麼是網站
2. 使用過 HTML / CSS / JavaScript
3. 知道電腦, 手機與平板螢幕大小不同
4. 有一台電腦

非必要,但會幫助學習
1. (曾經)有一個網站或需要維護一個網站
2. 了解調整已經做好的網站外觀的痛苦

課程目標

學會如何使用 Bootstrap 5 快速製作出同時符合電腦, 手機, 平板的網站,
並且了解 Bootstrap 原理有能力修改預設版型至符合設計師的規劃。
讓前端逐漸複雜的網站也有能力動手修改符合新需求而不造成其他破壞。

課程特點

1. 學習 Bootstrap 5 元件
2. 了解 Responsive web design
3. 學會快速開發技巧
4. 學習使用前端工具 Sass
5. 學習 CSS 規劃設計

第一章 (總長0.9小時)

Bootstrap 5 安裝與介紹
keyboard_arrow_down
  • play_arrow

    01. Bootstrap 5 與課程介紹

    11:11
  • lock

    02. Bootstrap 版本升級經驗談與課程進行編輯器使用簡介

    06:54
  • play_arrow

    03. Bootstrap 官網首頁詳細介紹

    10:24
  • play_arrow

    04. 安裝Bootstrap 5 (適合初學者的CDN 方式)

    22:59

第二章 (總長5.7小時)

Bootstrap 5 元件使用與實作練習
keyboard_arrow_down
  • play_arrow

    01. Docs 頁面簡介與Getting Started

    18:06
  • lock

    02. 不同裝置顯示不同畫面, Breakpoints 與 Display 介紹

    13:26
  • play_arrow

    03. container 介紹與使用, 搭配滿版背景的切版技巧

    13:48
  • play_arrow

    04. Grid System(一), col 等分與其問題

    11:08
  • play_arrow

    05. Grid System(二), grid columns 12 等分與 break points 的運用

    19:20
  • lock

    06. Grid System(三), 其他 Grid 的 Flex 輔助功能, 為何你可能不需要背所有功能

    16:33
  • lock

    07. Grid System(四), 巢狀 Grid System 與 Gutters

    13:09
  • lock

    08. Navbar (一), navbar 與 Container 的調整, Logo 尺寸文字修正

    15:21
  • lock

    09. Navbar (二), navbar class 講解, 置中元件的擺放方式(Utilities: Flex, Sizing)

    29:52
  • lock

    10. Collapse 下拉式選單介紹與示範

    13:01
  • lock

    11. Dropdowns 浮動下拉式選單介紹與示範

    20:17
  • lock

    12. 利用 Bootstrap 5 快速製作完整響應式頁面

    27:40
  • lock

    13. 使用 Ratio 完美的排出等比例複雜排版

    18:28
  • lock

    14. Card (一) 製作不因資料破版的可點擊卡片元件(Icon, Position, Stretched link)

    18:54
  • lock

    15. Card (二) 卡片元件外觀調整介紹(Border, Round, Image, Shaows, Overflow)

    16:49
  • lock

    16. Carousel 輪播器介紹, 建立不抖動什麼都能輪播的 item 畫面

    12:32
  • lock

    17. List Group 介紹, 建立 Table 的另外一種方式

    10:44
  • lock

    18. Navs and tabs 介紹與使用

    08:04
  • lock

    19. 利用 Navs and tabs 製作圖片展示窗

    07:07
  • lock

    20. 基本 input 介紹 (一)

    12:36
  • lock

    21. 基本 input 介紹(二), Ranges, Floating label, Switches Validation, Input group

    19:28
  • lock

    22. 側邊導覽條目錄畫布, Offcanvas

    08:10

第三章 (總長1.3小時)

利用 Bootstrap 5 元件快速製作網頁佈局
keyboard_arrow_down
  • play_arrow

    01. 網頁設計稿講解與 Figma 連結介紹

    07:06
  • lock

    02. 背景圖與跨區塊浮動圓形處理

    12:14
  • lock

    03. Carousel 文字輪播區塊製作, 避免畫面抖動

    19:38
  • lock

    04. 完成基礎排版區域

    12:11
  • lock

    05. 修正基礎排版區域手機版, 完成 footer 頁尾

    12:32
  • lock

    06. 完成浮動手機區塊

    08:37
  • lock

    07. 完成傾斜超出版面區塊

    08:28

第四章 (總長2.4小時)

從零開始介紹 Sass 與實作
keyboard_arrow_down
  • play_arrow

    01. Sass 基本介紹與編譯, 使用 VSCode Extension 輕鬆開發

    16:07
  • lock

    02. scss 與 sass 的差異, sass 編譯器的不同

    06:47
  • play_arrow

    03. Nesting 巢狀規則

    10:38
  • play_arrow

    04. Variables 變數與加減乘除, 文字替換與 calc 使用注意

    15:44
  • lock

    05. @import 檔案拆分, 解釋 import 順序問題與編譯器版本支援問題

    10:15
  • lock

    06. 數值種類, 運算子介紹

    07:41
  • lock

    07. @if @else 與布林 Bool 的介紹與示範

    05:22
  • lock

    08. @each 迴圈與 list 和 map, 一次產生多組制式內容(@for, @while)

    13:53
  • lock

    09. @mixin 與 @include 的介紹與使用說明

    12:37
  • lock

    10. @extend 的介紹與使用說明

    06:30
  • lock

    11. @function 的介紹與和 @mixin 一起使用, $variable scope 範圍測試

    08:24
  • lock

    12. 使用 node_module Dart-Sass 進行 Scss 編譯與開發

    09:14
  • lock

    13. [補充][Windows] 安裝Node.js與npm

    07:16
  • lock

    14. [補充][MacOS] 安裝Node.js與npm

    05:43
  • lock

    15. @use 與 @forward, 使用 namespace 概念方便開發

    10:23

第五章 (總長0.6小時)

Bootstrap 5 程式碼探討與客製化調整
keyboard_arrow_down
  • play_arrow

    01. bootstrap_sass_01. 編譯 Bootstrap Scss 原始碼(下載 zip 原始碼)

    12:03
  • lock

    02. Bootstrap 變數檔案較佳的改動方式( _variables scss)

    12:06
  • lock

    03. bootstrap_sass_03. 改變 Container, breakpoint, gutter 的數值, 注意 Chrome 的auto zoom

    12:39
  • 章節尚未完全完結,我們會持續更新!!

第六章 (總長0.0小時)

利用客製化 Bootstrap 5 完成網站範例
keyboard_arrow_down
  • 尚未確定課程,請再等我們一下!!

課程講師

縱裕

iOS 工程師 / Ruby On Rails 網站工程師

現職為iOS 工程師,但同時也在鑽研網站技術並且建立多個網站。
曾協助多個新創公司,範圍包含網站前端到桌面應用程式倉存管理與電子機關互動。
從網站架設,手機APP到系統底層都有豐富的經驗。
擅長不同系統架構的整合與創新想法的實現。

經歷:
進度條 技術顧問
Digilog.tw 網站與倉庫後台程式架構設計與建置
Zooe 線上教學平台 網站架構設計與建置
HelloStudy 楓禾留遊學網 設計與建置
Funlock 放樂工作室真實密室逃脫遊戲  - 魔鏡迷城 電子機關設計與製作
iOS App - Rock Click 節拍器
Nexcom ARM韌體與軟體工程師
Insyde BIOS工程師