Loading...


你聽過 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

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/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
OR
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

5. 新增 Responsive Font Sizes

文字排版(Typography)的部分,新增了 Responsive Font Size 的設定,並將其設為預設值。也就是說常見的 h1、h2 等文字排版會自動響應使用者的螢幕大小做出變化,觀察以下兩張圖片會更加清楚一些。

Responsive Font Sizes Demo 1
大尺寸螢幕時,h1為2.5rem

Responsive Font Sizes Demo 2
小尺寸螢幕時,h1為1.375rem + 1.5vw

6. 新增/移除的 Class

講到 Bootstrap 就不得不提支撐一切的多樣 class names,相信有不少人現在看到 mt-5、col-md-6 仍能直覺理解其涵義,在這次更新中自然也有一些變化。

首先先來看看已被棄用的幾個 class:

  1. form-row
  2. form-inline
  3. list-inline
  4. card-deck

接著歡迎我們的新朋友:

  1. gx-*
  2. gy-*
  3. g-*
  4. row-cols-auto

同時在 grid system 的部分也在原有的 5 tiers(xs, sm, md, lg, xl)基礎上,新增了xxl變為 6 tiers,並將gutter的寬度從固定的 30px 改為 1.5rem。

grid system tiers

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,一同探索它的更多可能性!

三分鐘小測驗,找到線上自學程式的高效入口

更多技術學習資源
前端 JavaScript | HTML /CSS| Bootstrap | RWD | DOM | API | AJAX | Postman | jQuery
後端 HTTP / HTTPS | Node.js | MongoDB | Git | SQL / NoSQL | Docker | React
其他 VSCode | Web App | Leetcode