bootstrap 5
CSS 前端工程

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

圖片來源 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;
}

用 custom properties 管理或擴充樣式的話都會容易且輕量很多。這是 CSS custom properties 的精神,實際 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。

加強了 Grid System

新增 xxl 的 breakpoint,gutter class (cell 間距) 的設定,等等。

新樣式的輸入框,選擇按鈕

包含 Floating labelsNew file input,checkbox,radio buttons,switch buttons 等等。

全新的 Customize 文件網頁

https://getbootstrap.com/docs/5.0/customize/overview/
如果要客製化設定一些 CSS,請參考這些 coding convention。

升級 Popper.js 到 v2

Popper.js 就是一些 tooltip / popup 的效果。

使用 data-bs-attribute 取代原本的 data-attribute

例如本來的 data-toggle=”dropdown”,現在是 data-bs-toggle=”dropdown”。加 bs 可以讓開發者更好辨認出這是 Bootstrap 的屬性。

用純 CSS 的方法來指定 Toast 的位置

在 Bootstrap,Toast 指的就是小的通知方塊,也許是服務提供方的來訊,也許是其他用戶的來訊。開發者可以使用純 CSS 的方法來指定 Toast 的位置。

結論

以上是 Bootstrap 5 的主要更新,Utilities API,CSS custom properties,新的 Grid System,新的 Customize 文件,這些都是 larry 覺得滿有參考價值的部分。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。