課程敘述
【 Bootstrap 5 使用與修改章節已經完成。】
【 Sass 進階部分預計將於 7月底完成，課程每周持續進行更新】
來看看範例實作的成果吧！
https://progressbartw.github.io/bootstrap3/
(此範例為Bootstrap 3 課程完結範例，Bootstrap 5 課程會建立在此之上講授更多內容)
現代人通常都擁有不同視窗大小的電腦或是行動裝置，以至於在製作網站的時候無法用單一尺寸的視覺設計方式來考量，不然畫面絕對會無法正確呈現，嚴重甚至網站無法正常運作。而響應式網頁設計就是為此而生的網頁設計方式。
響應式網頁設計 RWD = Responsive Web Design，又稱自適應網頁設計。除了對一般使用者外，對於搜尋引擎最佳化、SEO 來說是相當重要的一環，也就是 Google 等搜尋引擎提倡的「行動裝置優先」中的重點。
製作優良的響應式網站必須以 CSS 為主體去做設計開發，而是市面上也有不少將 CSS 常用套路組合成可以直接使用的網頁元件，已達到快速開發的目的，可以在網頁開發一開始節省 70% 甚至以上的時間。而此課程將要介紹的 Bootstrap 為製作響應式網站中最熱門的框架。
Bootstrap 相當好用，從 Bootstrap 3 開始就成了市場的霸主，Bootstrap 4 雖然在技術層面上有所變化，但大部分繼承了前代的特性，並不會因為隔代而需要完全重新學習。
既然 Bootstrap 3 與 4 已經相當成熟，那為何需要 Bootstrap 5 呢？原因是因為除去響應式頁面外，這幾年網頁前端技術還是有相當多的變化。React 崛起導致 jQuery 逐漸式微，新的 JavaScript 版本也都已經吸收了 jQuery 的優點，製作出自己版本的語法。而 jQuery 被 Bootstrap 3/4 視為必要相依函式庫，導致與新型態開發方式有相容上的一些問題。所以 Bootstrap 5 最主要的目的就是擺脫掉 jQuery 的相依性，因此升級到 Bootstrap 5 是絕對有好處的。
本課程主要分為三個階段，第一個階段為使用 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小時)
-
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小時)
-
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小時)
-
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小時)
-
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小時)
-
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小時)
- 尚未確定課程，請再等我們一下!!
課程講師
縱裕
iOS 工程師 / Ruby On Rails 網站工程師
現職為iOS 工程師，但同時也在鑽研網站技術並且建立多個網站。
曾協助多個新創公司，範圍包含網站前端到桌面應用程式倉存管理與電子機關互動。
從網站架設，手機APP到系統底層都有豐富的經驗。
擅長不同系統架構的整合與創新想法的實現。
經歷：
進度條 技術顧問
Digilog.tw 網站與倉庫後台程式架構設計與建置
Zooe 線上教學平台 網站架構設計與建置
HelloStudy 楓禾留遊學網 設計與建置
Funlock 放樂工作室真實密室逃脫遊戲 - 魔鏡迷城 電子機關設計與製作
iOS App - Rock Click 節拍器
Nexcom ARM韌體與軟體工程師
Insyde BIOS工程師