Bootstrap 5 主要更新：不再相依 jQuery，新增 Utilities API，使用 CSS custom properties

商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。
從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。
FB粉專 Larry的午茶時光歡迎大家追蹤~

圖片來源 https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/

https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/
Bootstrap 5 beta 幾天前發佈了，時間過得真的很快，Bootstrap 4 beta 發佈時 (2017 年 8 月) 我有一篇文章 Bootstrap 4 主要更新：Grid System、CSS，2018 年還有一篇關於 Bootstrap 4 Flexbox 的文章 Bootstrap 4 Flex

本篇會走一遍 Bootstrap 5 的主要更新，懂前端工程的讀者，可以看看有沒有東西是值得拿來使用，或進一步再去研讀的。以下大致是從 Bootstrap 5 比較重要的部分，往比較 minor 的部分排序。

移除 jQuery 的相依性

移除對 library 的相依性就軟體工程來說本來就是好的，開發者也不用在引入 Bootstrap 前先引入 jQuery，可能還會有版本相容的問題。以整個專案來說，應該也會更輕量，而且因為使用原生的 JavaScript，效能應該也應該會更好。

Utilities API (with the state option)

https://getbootstrap.com/docs/5.0/utilities/api/
Utilities API 是基於 Sass maps 的技術，可以先看一下 Sass maps 的官方文件
https://sass-lang.com/documentation/values/maps

基本上 Sass maps 就是一連串的 key / value pairs，用小括號括起來。調用端可以用 map.get function 去把指定變數裡的指定的 key 的值讀取出來，詳細寫法跟變化可以參考上方 Sass maps 的官方文件。使用 Sass maps 可以把 CSS 的設定組織化。

Bootstrap 5 基於 Sass maps 的架構衍伸出一套讓開發者可以自行設定 utility classes，就是 Utilities API，而且 Bootstrap 5 預設的 utility classes 也是用 Utilities API 實作的。這次 beta release 特別提到 Utilities API 加入了 state option，可以指定 pseudo-class 像是 hover、focus 等。

Utilities API 的主要功能在產生同樣屬性，不同數值的 utility classes。larry 覺得 Sass maps 和 Bootstrap 5 Utilities API 都是滿值得參考的。

使用 CSS custom properties 實作底層 CSS

CSS custom properties 讓原生 CSS 可以支援變數，而不需要 Sass 或其他語言來協助。變數要以 – – (double dash) 開頭，用 var function 讀取，例如

--my-text-color: #554433;
color: var(--my-text-color);

如果要切換樣式，可以這樣寫

.my-text-style1 {
  --my-text-color: #554433;
}
.my-text-style2 {
  --my-text-color: #998877;
}
...
color: var(--my-text-color); // 這一行不用動

而不是

.my-text-style1 {
  color: #554433;
}
.my-text-style2 {
  color: #998877;
}

所以同一架構不同樣式，就下不同的 CSS 變數就好，而不是重寫 CSS，這樣管理或擴充樣式的話都會容易而且輕量很多。實際 Bootstrap 5 底層是怎麼使用，有興趣的讀者可以再去研究看看。

RTL (right-to-left text) 右到左排序的文字

https://getbootstrap.com/docs/5.0/getting-started/rtl/
就是橫式的文字由右到左排序 (一般我們習慣網頁文字是由左到右排序)。要使用 RTL，要先在 <html> 上設定 dir=”rtl” 還有 lang 兩個屬性。詳細的寫法參考上方官方文件。

重新命名某些 CSS Class，用 start / end 取代 left / right

為了支援 RTL，帶有 left / right 意涵的 CSS class，例如 ml-3 代表 margin-left，將會用 start / end 的邏輯來取代。這樣當換文字方向時，不用整篇 css 重改一遍。例如在 Bootstrap 5 請使用 ms-3 (s means start) 代替 ml-3，在 LTR (左到右) 文本時，ms-3 是 margin-left，但在 RTL (右到左) 文本時，ms-3 是 margin-right。