bootstrap 5
CSS 前端工程

Bootstrap 5.1 主要更新:開始使用 CSS Grid 實作 grid system,新的元件,更多的 CSS 變數 (custom property)

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

https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/
前幾天 (2021年 8/4) Bootstrap 5.1 釋出了。每次看到新的 Bootstrap 版本釋出,都會有感於時間過的真的飛快。上一篇關於 Bootstrap 5 是去年底 (2020年底) Bootstrap 5 主要更新:不再相依 jQuery,新增 Utilities API,使用 CSS custom properties,一轉眼 2021 年大半年又過了。

使用 CSS Grid 實作 grid system

使用 CSS Grid 實作 grid system 是 Bootstrap 5.1 的主要更新。很多專家認為 CSS Grid 是繼 Flexbox 後,近代 CSS 的另一個里程碑。Bootstrap 4 開始使用 Flexbox 實作 grid system,Bootstrap 5.1 預設也是 Flexbox 實作,但可以切換為 CSS Grid 實作。

同時也釋出了新的 CSS Grid 文件,5.0 還沒有這頁文件,從 5.1 開始。
https://getbootstrap.com/docs/5.1/layout/css-grid/

Bootstrap 5.1 如何切換 Flexbox 實作到 CSS Grid 實作?找到檔案位置 /bootstrap-5.1.0/scss/_variables.scss, 設定這兩個變數

$enable-grid-classes: false; 
$enable-cssgrid: true;

改好了重新 compile SCSS。Bootstrap 5.0 的 _variables.scss 沒有 $enable-cssgrid 這個變數,所以可以確定是 5.1 引入的。

一樣是 Bootstrap Grid System row/col 的架構,只是將 row 換成 grid,col 換成 g-col。例如這樣三個 div 分別在 12 份中佔有一份、兩份、和三份。
.grid 設定 display:gridg-col-* 設定 grid-column

<div class="grid">
  <div class="g-col-1">
    Column
  </div>
  <div class="g-col-2">
    Column
  </div>
  <div class="g-col-3">
    Column
  </div>
</div>

.grid 同時定義了 CSS gap。相較於用 padding/margin 去做 gutter,gap 是新一代做 gutter 的方式。如果仔細去看,每個 g-col 本身沒有 padding/margin,但卻能彼此分開,這不符合 CSS box model 阿?larry 看到一種說法,gutter 如字面翻譯是水溝,在 CSS Grid 裡面 gutter 本身就是一種物件,會佔面積。而 gap 只是定義了 gutter 的寬度。

下方是 Bootstrap CSS Grid 文件中的 sample code。這個 sample 做了一個 9×9 的 grid,第一個 child 是第一行第一個,第二個 child 是第二行第二個,第三個 child 是第三行第三個。以賓果遊戲來說,是左上到右下連線的圖形。

<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div> 

從這個 sample 我們可以看出

  1. Bootstrap 官方鼓勵 inline CSS custom property 的使用。inline 指定 --bs-rows, --bs-columns 是不是更靈活,redundant code 更少一些。
  2. g-start-* 可以指定水平開頭的位置,inline CSS grid-row 可以指定是屬於第幾行。

Offcanvas in navbar (new component)

Offcanvas 在 Bootstrap 5.0 已經新增了,是一個新的元件。觸發時左、右、上、下其中一側彈出視窗,按按鈕或按叉結束時再縮回原處。

Bootstrap 5.1 將 Offcanvas 和 navbar 做整合。尤其手機版的 navbar 通常會縮成一個 toggle button,點了之後可以指定 Offcanvas 從哪個方向彈出,navbar 的內容可以放在 Offcanvas 裡面。

Placeholder (new component)

將還沒 load 好的文字,用銀色區塊替代。例如 Facebook,早就是這樣做 placeholder。

在要顯示銀色區塊的 DOM (不一定是銀色,可以自行設定 background-color),加上 CSS class .placeholder,DOM 的寬度要設定一下。container 可以加上 CSS class .placeholder-glow.placeholder-wave,讓 placeholder 區塊有小小的水波閃爍。

.bg-* & .text-* utility 的實作變數化

Bootstrap 5.0 中 background color utility 實作如下 (text color utility 類似,僅用 background 舉例)

.bg-success {
  background-color: #198754 !important;
}

Bootstrap 5.1 改為

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

這樣如果你要微調 .bg-success 的顏色,在你的專案裡重新設定 --bs-success-rgb 就好了。未來 Bootstrap 會接著把其他 utility 也變數化。Bootstrap 的演進有這樣的味道:Bootstrap 只管架構,顏色等屬性由 CSS 變數設定。對軟體工程有研究的讀者應該知道,資料 / 邏輯分離的概念。

結論

Bootstrap 5.1 開始使用 CSS Grid 實作 grid system,而且又新增了很多元件。從 Bootstrap 的發展和文件可以看出來,Bootstrap 非常大量的使用 CSS custom property,同時也鼓勵開發者在專案裡使用 CSS custom property 做出變化。CSS Grid、Bootstrap 的新元件、CSS custom property 的使用,都是很值得參考的。

發佈留言

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