什麼!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

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 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

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