你聽過 Bootstrap 嗎？你知道它迎來一個全新的改版了嗎？一起來了解這個全世界都在用的前端框架究竟又做了什麼改動，以及這樣的新版本到底適不適合你的專案吧！
什麼是 Bootstrap？
雖然會點進這樣文章的人，應該對 Bootstrap 有基本的認識了，但保險起見還是做個簡單的介紹吧！
Bootstrap 是一個以 CSS & Javascript 打造的前端框架，讓你用最少的 code 快速打造響應式與行動優先的網站，其中包含著以下的特點：
- 包含許多事先做好的組件，像是常見的按紐、導覽列以及互動視窗等，都可以藉由指定的簡短語法完成許多複雜的功能與樣式。
- 提供完整的 css grid system 使你可以輕鬆打造響應式的 layout。
- 提供高度的客製化彈性並有著良好的瀏覽器支援度。
更多詳細的介紹、引入方法以及基本應用可以參照 Alpha Camp 之前推出的技術文章：
Bootstrap 是什麼？給網頁設計新手的 Bootstrap 4入門教學
To Bootstrap or not to Bootstrap, that’s the question
這一直是個大家爭論不休的問題，我們直接從結論說起。
坦白說，你並不一定需要 Bootstrap。
某個動漫角色有兩把刀，很多事情也有兩個面向，並不會全然都是優點，我們來簡單看一下使用 Bootstrap 的優缺點，你可以自行評估後再決定是否採用。記住，沒有萬用的工具，只有適合你的工具！
優點
優點的部分，基本上就是先前在介紹它的特點時提到的，普遍認為使用 Bootstrap 有以下的優點：
- 簡易使用
- 加速開發
- 多平台支援
- 響應式設計
- 高度客製化選項
- 活躍的社群
- 撰寫良好的官方文件
缺點
缺點的部分則也相當明顯，注意這類的缺點並不僅存在 Bootstrap，其他類似的框架也會有相似的缺點。
- 過於笨重
雖然在 Bootstrap 5 這問題有得到一些改善，但由於仍需要預先載入大包的外部資源，對於部分、尤其是行動端的使用者會是不小的負擔，往往會造成一些使用者體驗上的問題。
- 易產出高相似度的網站
當大家都在用時，你就會發現大家的網站都長得一樣。如果使用時你並沒有針對你的專案去做一些客製化選項，那麼你就會發現你的網站與同樣使用相同框架的網站極端的類似，這會容易造成你的網站不受重視。
Bootstrap 5 重要改動
1. 移除 jquery 的使用
在這次的更新中，Bootstrap 告別了使用已久的 jquery 套件，以前利用 jquery 達成的一些程式碼，則使用原生的 javascript 進行取代。這樣的改動讓所需要加載的資源更少，提升了網頁讀取的速度，讓使用者的體驗有進一步的提升。
但不依賴不代表不能使用，即使 Bootstrap 已經不再依賴於 jquery，若你仍想在 BootStrap 5 中繼續使用也是可能的，可以參考官方針對這部分的說明文件。
什麼是 jQuery？前端框架盛行還需要JavaScript函式庫嗎？
2. 停止對於 IE10、IE11 瀏覽器的支援
除了移除 jquery 的使用外，另一個值得注意的就是在新版的 Bootstrap 中不再支援 IE10、IE11 瀏覽器，開發者們可以專注使用較新的語法，而不用像以往一樣擔心舊瀏覽器的支援性而撰寫滿滿的 polyfills。
而針對 IE10 以及 IE11 的使用者，當然仍有一些套件能協助你在舊瀏覽器中使用 Bootstrap 5，但對於這樣的使用者，官方則是推薦繼續使用 Bootstrap 4 即可。
3. 新增 CSS Custom Properties
由於摒棄了 IE 這樣的限制器，Bootstrap 終於可以使用自定義的 CSS 變數而不需要依賴類似 SaSS 之類的小幫手，目前 Bootstrap 有著以下的 root variables 讓你在專案的任何地方使用，你可以在_root.scss 檔案中找到他們，注意所有的變數都有 –bs 的前綴來避免它們與第三方套件的樣式衝突。
<p>CODE: https://gist.github.com/ACbosong/77460fb6ad2b9d982e08291385e3cfb4.js</p></p>
4. 新增 Bootstrap Icon Library
經過漫長的等待，Bootstrap 終於迎來屬於自己的圖像庫，使用者不再需要引入像是 Font Awesome 之類的資源來協助打造自己的網站。
Bootstrap Icon Library 提供了超過 1,300 種的開源圖檔，同時支援不同的使用方式，像是 SVG、SVG Sprite 以及基本的 web font。另外值得一提的是，這個開源套件同時也可以使用在其他專案中，並不僅限於搭配 Bootstrap 使用。
目前提供兩種常見的安裝方式，分別是：
- 透過 npm 安裝
npm i bootstrap-icons
- 透過 CDN 載入
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css”>
OR
@import url(“https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css”);
5. 新增 Responsive Font Sizes
文字排版（Typography）的部分，新增了 Responsive Font Size 的設定，並將其設為預設值。也就是說常見的 h1、h2 等文字排版會自動響應使用者的螢幕大小做出變化，觀察以下兩張圖片會更加清楚一些。
6. 新增／移除的 Class
講到 Bootstrap 就不得不提支撐一切的多樣 class names，相信有不少人現在看到 mt-5、col-md-6 仍能直覺理解其涵義，在這次更新中自然也有一些變化。
首先先來看看已被棄用的幾個 class：
- form-row
- form-inline
- list-inline
- card-deck
接著歡迎我們的新朋友：
- gx-*
- gy-*
- g-*
- row-cols-auto
同時在 grid system 的部分也在原有的 5 tiers（xs, sm, md, lg, xl）基礎上，新增了xxl變為 6 tiers，並將gutter的寬度從固定的 30px 改為 1.5rem。
7. 新增 Utilities API
另一個較大的改動則是 Utilities API 的出現，在之前的 Bootstrap 4 中已經有這個方案的雛型出現，也就是 $enable-* classes，讓使用者能針對自己的需求做一些客製化。在 Bootstrap 5 則導入了 Utilities API 的使用，讓這樣的過程更加輕鬆愉快，以官方網站上的例子來說：
<p>CODE: https://gist.github.com/ACbosong/9237330c279f06e970ae409d59c03100.js</p></p>
上方的程式碼會被轉譯為：
<p>CODE: https://gist.github.com/ACbosong/698d87ba429f82a04f37107d03d1c65d.js</p></p>
當然你也可以自定義想要的前綴詞，以剛剛的 opacity 為例，可以進一步的修改為：
<p>CODE: https://gist.github.com/ACbosong/6d60d32f5bfa1d61075fc6bdc2d524d1.js</p></p>
最終會轉譯為：
<p>CODE: https://gist.github.com/ACbosong/afab3753fa4c53c44a254ce31a17925a.js</p></p>
小結
Bootstrap 5 可說是做了相當大量且有趣的改動，當然會需要一些時間來熟悉這些新功能，但在我來看這些改動都相當的正向，讓 Bootstrap 變得更有潛力許多。
文章中其實還有一些比較細微的更動沒有帶到（例如表單的功能強化以及 RTL 的使用等），好在 Bootstrap 最有名的特點之一就是非常全面的官方文件，許多較細微的改動也說明得相當清楚。
另外這次改版還有一個值得注意的點便是：在語法上幾乎沒有與舊有的語法衝突，僅有少數 class 被刪除，這表示在舊有專案升級 Bootstrap 5 的成本相當低，同時可以給使用者帶來更好的體驗（加載的資源變小、Responsive Font Sizes 以及增加 RTL 等)，唯一的缺點就是捨棄的對 IE 11 之前版本的支援，但隨著 Edge 逐漸普及這個影響也會變得較小。所以若你的核心使用者都是採用較新版本的瀏覽器，我個人會相當推薦升級 Bootstrap 5，一同探索它的更多可能性！
