前言 這一篇將會來介紹 Bootstrap 4 更新成 Bootstrap 5 有什麼樣的變化。
Bootstrap 5
在 2020 年 6 月 16 日,Bootstrap 在他們部落格上公告 Boootstrap 升級啦~~~
Bootstrap 5 alpha!
而首頁也換成了新版首頁
而這一次的版本可以說是滿多人所期待的版本,為什麼呢?
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 插件。
參考文獻