什麼！Bootstrap 4 變成 Bootstrap 5 了

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
這一篇將會來介紹 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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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。

1
2
3
4
5
<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-*，這邊舉例折疊元件

1
2
3
4
5
6
7
8
9
10
11
12
13
<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"

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 變數取得色票

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
: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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
: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 及緊湊的佈局。

1
2
3
4
5
6
7
8
9
10
<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)

1
2
3
4
5
6
7
8
<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>

更多豐富的 class

基本上如果你已經有在進去觀看 Bootstrap 5 的文件的話，你應該會感覺 Bootstrap 5 好像新增很多東西。

其實沒有錯，光上述的介紹就已經講不完了，而在這次的改版 Bootstrap 說是新增很多東西，倒不如說 Bootstrap 將更多的東西拆得更細來說明，舉凡 關閉按鈕 (Close button)與文字截斷 (Text truncation)

在以往的 Bootstrap 4 並不會特別拆出工具這個分類，並且像是剛剛講的「文字截斷 (Text truncation)」原本都是統一放在「通用類別/文字」中。

而這個做法來講，其實可以讓開發者了解到 Bootstrap 真的可以像在一開始首頁所講的一樣

使用全球最流行的前端開發工具 Bootstrap，快速設計及自定義響應式網站，其擁有豐富的 Sass 變數與 mixins、響應式網格系統、大量預設元件以及強大的 JavaScript 插件。

參考文獻

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ