什麼！Bootstrap 4 變成 Bootstrap 5 了

發表於 2021-02-05 分類於 CSS

這一篇將會來介紹 Bootstrap 4 更新成 Bootstrap 5 有什麼樣的變化。

前言

這一篇將會來介紹 Bootstrap 4 更新成 Bootstrap 5 有什麼樣的變化。

Bootstrap 5

Bootstrap 5 Logo

在 2020 年 6 月 16 日，Bootstrap 在他們部落格上公告 Boootstrap 升級啦~~~

Bootstrap 5 alpha!

而首頁也換成了新版首頁

Bootstrap 5 新版首頁

而這一次的版本可以說是滿多人所期待的版本，為什麼呢？

Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer.

簡單來講就是 Bootstrap 5 不會再依賴於 jQuery 並且拋棄了 ~~萬惡的 IE~~(IE 掰掰文獻)

不再依賴是什麼意思了？這邊舉例來講，原本我們在需要使用者執行完畢特定行為後才開啟 Modal 視窗時，就必須這樣寫

1	$('#myModal').modal('show');

而使用過 Bootstrap 的人大多都知道必須載入以下 CDN

1
2
3

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

其中有一條就是 jQuery，雖然 slim 真的非常小，但畢竟多一個載入就會多一個請求。

而拋棄了 jQuery 之後就只需載入兩個 CDN

1
2

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

而原本的 $('#myModal').modal('show'); 則變成的原生寫法

1
2
3

var myModal = new bootstrap.Modal(document.getElementById('myModal'));

myModal.show();

(~~突然懷念起 jQuery 短寫法。~~)

那麼接下來我們再來了解一下 Bootstrap 這次還有哪些更新

left 與 right 的消失事件

以往我們在寫一些文字靠左或靠右的 class 的時候都會套用 .text-left 與 .text-right，但在 Bootstrap 5 新版時，則變成了 .text-start 與 .text-end。

<p class="text-start">Start aligned text on all viewport sizes.</p>

<p class="text-center">Center aligned text on all viewport sizes.</p>

<p class="text-end">End aligned text on all viewport sizes.</p>

基本上只要原本 class 是 .*-left 與 .*-right 都必須改成 *-start 與 *-end，會有這個改動我想主要也是為了更語義化，畢竟我們在命名 class 時會盡可能避免使用數字、方向等方式命名。

data-* 屬性的變化

在 Bootstrap 有些元件是會有一些 data-*，這邊舉例折疊元件

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

裡面可以看到一個 data-toggle="collapse" 的屬性，但在 Bootstrap 改成了 data-bs-toggle="collapse"

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

基本上只要原本是 data-* 的，在新版都會變成 data-bs-*，而這也是為了盡可能避免開發者的 data-* 與 Bootstrap 的 data-* 名稱衝突。

CSS 變數的變化

有玩過 CSS 變數的人就可以知道，其實 CSS 也可以像 Sass/SCSS 一樣宣告變數，只是寫法稍微不太一樣，但不用透過編譯就可以直接使用顏色變數其實很好玩，這樣子做可以做到非常大的畫面製作，因此如果你對於 CSS 變數不熟悉的話，可以考慮買這個課程，我先前有直播介紹過大神來六角 - 該怎麼玩 CSS? (~~哎，置入性行銷~~)。

因此有些情況下我們本身滿喜歡 Bootstrap 的色票，就會直接到 Bootstrap 的 CSS 變數取得色票

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

而新版的 Bootstrap 除了 CSS 變數名稱有更新之外，連色票都有些微的更新，例如原本藍色是 #007bff 現在新版則是 #0d6efd

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

網格系統的變化

接下來聊聊網格的變化，由於現今螢幕越來越大的狀況下，原本的 Bootstrap 其實也越來越不夠用，在原本 Bootstrap 4 提供的網格如下

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

而在新版則額外多出了 .xxl

Breakpoint	Class infix	Dimensions
X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

除此之外就連 .container 也增加了響應式的能力

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

透過使用響應式的 .container 其實可以達到更多不一樣的版型排版，好奇也可以玩一下 Bootstrap 官方所提供的網格範例。

當然網格還有一個更強大的能力，也就是你可以自訂 gutters！而這邊我推薦可以觀看卡斯伯老師的文章介紹會更詳細。

表單格線的變化

網格系統都進化了，那麼較小 gutters 的表單格線呢？當然也有一些許的變化，在原本 Bootstrap 中，我們可以找到表單格線，其中這邊表單格線的重點是這句話

可以使用 form-row 取代 .row，這個變體可以相對於原本的網格 row 來說，他提供更小的 gutter 及緊湊的佈局。

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

但在新版的 Bootstrap 表單排版並不會看到 form-row(目前繞來繞去沒看到，如果是我眼脫窗沒看到的話可以跟我講一下。)，而之所以沒有的原因也是與可以自訂 gutters 有關係，在此我們都可以自訂 gutters，那麼其實就可以不用在套用 form-row，直接一個 row 到底。

(不然每次我都忘記改用 form-row)

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Welcome.Web.World