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

🏆 超過70萬名讀者已閱讀本站的內容，共同創造了105萬次總閱讀次數！

內容目錄

https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/
前幾天 (2021年 8/4) Bootstrap 5.1 釋出了。每次看到新的 Bootstrap 版本釋出，都會有感於時間過的真的飛快。

上一篇我關於 Bootstrap 5 的文章是在去年底 (2020年底)，一轉眼 2021 年大半年又過了。

以下是 Bootstrap 5.1 的主要更新：

使用 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:grid，g-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 我們可以看出

Bootstrap 官方鼓勵 inline CSS custom property 的使用。inline 指定 --bs-rows, --bs-columns 是不是更靈活，redundant code 更少一些。
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 的使用，都是很值得參考的。