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

【 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 原理有能力修改預設版型至符合設計師的規劃。
讓前端逐漸複雜的網站也有能力動手修改符合新需求而不造成其他破壞。