Bootstrap 5都有什么新功能？
Bootstrap 是最流行的 CSS 庫之一。它允許開發(fā)人員輕松使用漂亮的樣式和組件并創(chuàng)建響應(yīng)式網(wǎng)站。使用 Bootstrap 可以節(jié)省開發(fā)人員的時(shí)間，尤其是對(duì)于幾乎每個(gè)項(xiàng)目中都使用的組件。
Bootstrap 5（當(dāng)前的主要版本，于 2021 年 5 月發(fā)布）帶來了大量的變化和改進(jìn)，包括添加新組件、新類、舊組件的新樣式、更新的瀏覽器支持、刪除一些舊組件，以及更多。
在本文中，我們將介紹 Bootstrap 5 中的更改、刪除的內(nèi)容，以及最令人興奮的新內(nèi)容。
何時(shí)使用 Bootstrap（何時(shí)不使用）
Bootstrap 將自己標(biāo)榜為“世界上最流行的用于構(gòu)建響應(yīng)式、移動(dòng)優(yōu)先站點(diǎn)的框架”，并且在 GitHub 上擁有 152k 顆星，我認(rèn)為這種說法并不過分。特別是對(duì)于初學(xué)者來說，Bootstrap 是開始創(chuàng)建現(xiàn)代和干凈網(wǎng)站的好方法。它可以輕松實(shí)現(xiàn)復(fù)雜的、移動(dòng)優(yōu)先的設(shè)計(jì)，并提供您在多個(gè)項(xiàng)目中可能需要的許多組件。
Bootstrap的學(xué)習(xí)曲線很低，很適合不需要構(gòu)建步驟的靜態(tài)網(wǎng)站，因?yàn)槟憧梢灾苯訌腂ootstrap的CDN引用庫。這與其他一些流行的CSS框架形成鮮明對(duì)比，這些框架可能為使用捆綁器或任務(wù)運(yùn)行器進(jìn)行優(yōu)化。
不過，你也應(yīng)該知道，Bootstrap并不是一顆銀彈。對(duì)于沒有經(jīng)驗(yàn)的人來說，Bootstrap很容易產(chǎn)生混亂和復(fù)雜的標(biāo)記。就千字節(jié)而言，它也是一個(gè)相對(duì)較重的庫（盡管每次發(fā)布都在改進(jìn)），所以如果你只使用它的一兩個(gè)功能，它可能不是最佳選擇。就像任何抽象一樣，如果你對(duì)底層技術(shù)有很好的掌握，并能對(duì)何時(shí)使用它做出明智的決定，那將會(huì)有很大的幫助。
從 Bootstrap 4 升級(jí)到 5
從Bootstrap 4升級(jí)到5一般來說是很容易的。Bootstrap 4中的大部分組件、它們的類和實(shí)用類在Bootstrap 5中仍然可用。在遷移時(shí)，您應(yīng)該關(guān)注的主要事情是您正在使用的類或組件是否已經(jīng)被刪除。如果它們被刪除了，那么可以使用實(shí)用工具類替換它們，或者使用其他方法來實(shí)現(xiàn)相同的結(jié)果。你應(yīng)該關(guān)注的第二件事是在組件中從 data- 屬性轉(zhuǎn)換到 data-bs-，這些組件需要JavaScript作為其功能的一部分。(我們將在下一節(jié)中詳細(xì)介紹這一點(diǎn)。)
如果你使用Bootstrap的Sass文件，有一些變量和mixin被重命名。Bootstrap 5有一個(gè)廣泛和詳細(xì)的部分，所有關(guān)于定制，以及關(guān)于每個(gè)組件的Sass變量和mixin的詳細(xì)信息，在他們各自的文檔頁面。
變化的內(nèi)容
Bootstrap 5 為作為庫的 Bootstrap 帶來了核心更改，包括所需依賴項(xiàng)、瀏覽器支持等方面的更改。它還對(duì)我們?cè)谝郧鞍姹局幸恢笔褂玫慕M件和類進(jìn)行了更改。
jQuery不再是一個(gè)依賴項(xiàng)
與之前的版本相比，jQuery 不再是 Bootstrap 的依賴項(xiàng)?，F(xiàn)在，你可以在沒有它的情況下充分利用 Bootstrap，但你仍然需要 Popper.js。這一變化使得在不需要或使用 jQuery 的項(xiàng)目中使用 Bootstrap 變得更容易——例如在將 Bootstrap 與 React 結(jié)合使用時(shí)。
如果Bootstrap是你網(wǎng)站的一部分，你仍然可以使用jQuery。如果Bootstrap在 window 對(duì)象中檢測到j(luò)Query，它會(huì)自動(dòng)將所有組件添加到j(luò)Query的插件系統(tǒng)中。因此，如果您從v4遷移到v5，就不需要擔(dān)心這個(gè)更改，并且仍然可以在必要時(shí)使用jQuery和Bootstrap。
但如果你在網(wǎng)站中使用jQuery，但你不希望Bootstrap使用jQuery呢?你可以通過在文檔的body元素中添加屬性 data-bs-no-jquery 來實(shí)現(xiàn)：
<body data-bs-no-jquery="true">
</body>
沒有jQuery，Bootstrap是如何工作的？例如，在v4中，你可以在JavaScript中使用以下代碼來創(chuàng)建一個(gè)Toast元素。
$('.toast').toast()
在Bootstrap 5中，如果你的網(wǎng)站已經(jīng)使用了jQuery，你可以使用同樣的代碼來創(chuàng)建一個(gè)Toast元素。如果沒有jQuery，你需要使用類似下面的代碼來創(chuàng)建一個(gè)Toast元素：
const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
return new bootstrap.Toast(toastEl)
})
這只是使用原生JavaScript來查詢文檔中具有 .toast 類的元素，然后使用 new bootstrap.Toast() 在元素上初始化一個(gè)Toast組件。
瀏覽器支持更改
在 v4 之前，Bootstrap 曾經(jīng)支持 Internet Explorer (IE) 10 和 11。從 Bootstrap 5 開始，對(duì) IE 的支持已完全取消。因此，如果您的網(wǎng)站需要支持 IE，則在遷移到 v5 時(shí)可能應(yīng)該小心。
瀏覽器支持的其他變化包括：
Firefox和Chrome現(xiàn)在從60版開始支持 Safari和iOS支持現(xiàn)在從版本12開始 Android瀏覽器和WebView支持現(xiàn)在從版本6開始
數(shù)據(jù)屬性的更改
Bootstrap 5改變了數(shù)據(jù)屬性的命名方式，這些數(shù)據(jù)屬性通常被其使用JavaScript作為功能的一部分的組件所使用。以前，大多數(shù)依賴某些JavaScript功能的組件的數(shù)據(jù)屬性都是以 data- 開頭。例如，要在Bootstrap 4中創(chuàng)建一個(gè)Tooltip組件：
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="top"
title="Tooltip"
>
Tooltip
</button>
請(qǐng)注意 data-toggle 和 data-placement 的用法。在Bootstrap 5中，這些組件的數(shù)據(jù)屬性現(xiàn)在以 data-bs 開頭，以方便命名Bootstrap屬性。例如，要在Bootstrap 5中創(chuàng)建一個(gè)Tooltip組件：
<button
type="button"
class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Tooltip"
>
Tooltip
</button>
我們不使用 data-toggle 和 data-placement ，而使用 data-bs-toggle 和 data-bs-placement。如果你在Bootstrap中使用JavaScript來創(chuàng)建組件，可能不需要做任何改變。但是，如果你的組件只依靠數(shù)據(jù)屬性來運(yùn)作，你需要將所有以data開頭的數(shù)據(jù)屬性改為以 data-bs 開頭。
修復(fù)了一些Bug
在 Bootstrap 4 的“瀏覽器和設(shè)備”下的文檔中，列出了一些瀏覽器上發(fā)生的Bug。這些Bug不再列在 Bootstrap 5 的同一列表中。該列表包括以下內(nèi)容：
在iOS上，鼠標(biāo)懸停樣式被應(yīng)用到觸摸事件的元素上，這是不可取的，因?yàn)樗徽J(rèn)為是一個(gè)意外的行為。 在Safari 8及以上版本中使用 .container會(huì)導(dǎo)致打印時(shí)字體變小。Border radius被驗(yàn)證反饋所覆蓋（但可以通過增加一個(gè)額外的 .has-validation類來解決）。
Bootstrap 4文檔中的bug和問題列表還詳細(xì)說明了在不再支持的瀏覽器版本中出現(xiàn)的bug。
其他變化
還有更多的變化，要么是微小的，要么不會(huì)引起劇烈的、值得注意的變化。這些變化是：
Bootstrap 5現(xiàn)在使用Popper v2。確保升級(jí)你的Popper版本。Popper v1將不再工作，因?yàn)锽ootstrap 5需要
@popperjs/core而不是以前的Popper.js。現(xiàn)在，Bootstrap 5可以作為一個(gè)模塊在瀏覽器中使用，使用的是作為ECMAScript模塊構(gòu)建的Bootstrap版本。
由于Libsass和Node Sass (Bootstrap 4中使用的)現(xiàn)在已棄用，Bootstrap 5使用Dart Sass將源Sass文件編譯為CSS。
以前，為了使一個(gè)元素隱藏，但又能讓輔助技術(shù)發(fā)現(xiàn)它，可以使用
.sr-only類?，F(xiàn)在這個(gè)類被替換為.visually-hidden。以前，為了使一個(gè)交互式元素隱藏起來，但又能讓輔助技術(shù)發(fā)現(xiàn)它，你需要同時(shí)使用
.sr-only和.sr-only-focusable類。在Bootstrap 5中，你只需要使用.visually-hidden-focusable而不需要.visually-hidden。具有命名來源的Blockquotes現(xiàn)在由
<figure>元素包裹。以下是 Bootstrap 5 中 Blockquotes 現(xiàn)在的示例：
在以前的版本中，表的樣式是繼承的。這意味著，如果一個(gè)表嵌套在另一個(gè)表中，嵌套的表將繼承父表。在Bootstrap 5中，表格樣式是相互獨(dú)立的，即使它們是嵌套的。
Border utilities現(xiàn)在支持表格。這意味著你現(xiàn)在可以使用邊框顏色工具改變表格的邊框顏色。下面是一個(gè)在Bootstrap 5中使用表格的border utilities的例子。
面包屑的默認(rèn)樣式已經(jīng)更改，刪除了在以前版本中默認(rèn)的灰色背景、填充和邊框半徑。下面是 Bootstrap 5 中 面包屑樣式的示例：
使用
left和right來引用使用start和end的位置的類的命名已更改。例如，下拉列表中的.dropleft和.dropright分別替換為.dropstart和.dropend。與前一點(diǎn)類似，使用
l表示左和r表示右的實(shí)用程序類現(xiàn)在分別使用s表示開始和e表示結(jié)束。例如，.mr-*現(xiàn)在是.me-*。用于范圍輸入的
.form-control-range類現(xiàn)在是.form-range。Gutters現(xiàn)在設(shè)置為
rem，而不是以前的px。.no-gutters已經(jīng)被改名為.g-0，作為新添加的Gutters類的一部分（在后面的章節(jié)中會(huì)有更多介紹）。鏈接現(xiàn)在默認(rèn)下劃線，即使沒有懸停。
自定義表單元素類的名稱已經(jīng)從
.custom-*變成了表單組件類的一部分。例如，.custom-check被.form-check所取代，.custom-select被.form-select所取代，以此類推。現(xiàn)在需要在標(biāo)簽中添加
.form-label。Alert、面包屑、卡片、下拉菜單、列表組、模態(tài)、彈出窗口和工具提示現(xiàn)在使用相同的填充值，使用
$spacer變量。徽章元素中的默認(rèn)填充現(xiàn)在從
.25em/.5em更改為.35em/.65em。切換按鈕的封裝器被用于復(fù)選框和單選按鈕。現(xiàn)在的標(biāo)記也被簡化了。在Bootstrap 4中，切換按鈕的復(fù)選框是通過以下標(biāo)記實(shí)現(xiàn)的：
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked> Checked
</label>
</div>在Bootstrap 5中，可以用一種更簡單的方式來完成：
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Checked</label>按鈕的
active和hover狀態(tài)在顏色上增加了對(duì)比。關(guān)閉按鈕類現(xiàn)在從
.close重命名為.btn-close，并使用SVG圖標(biāo)而不是×。下拉分割線現(xiàn)在更暗，以更好的對(duì)比。
Navbar內(nèi)容現(xiàn)在應(yīng)該被包裝在容器元素中。例如在Bootstrap 4中：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
...
</nav>在 Bootstrap 5 中變成：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
...
</div>
</nav>popover 組件中的
.arrow類現(xiàn)在被.popover-arrow替換，Tooltip 組件中的.arrow類現(xiàn)在被.tooltip-arrow替換。默認(rèn) Toast 持續(xù)時(shí)間更改為 5 秒。
工具提示、下拉菜單和彈出窗口組件中
fallbackPlacements的默認(rèn)值已更改為數(shù)組['top', 'right', 'bottom', 'left']。.text-monospace已重命名為.font-monospace。.font-weight-*已重命名為.fw-*，.font-style-*已重命名為.fst-*。.rounded-sm和.rounded-lg現(xiàn)在已被一系列從 0 到 3 的四舍五入類.rounded-*所取代。
有什么新東西？
最后，在版本5中，Bootstrap為它的庫添加了許多令人興奮的新功能。其中一些變化包括新的特性、新的受支持的概念、新的組件、新的實(shí)用程序類等等。
響應(yīng)式字體大小現(xiàn)在是默認(rèn)啟用
響應(yīng)性字體大?。≧FS）在以前的Bootstrap版本中出現(xiàn)過，但默認(rèn)是禁用的。Bootstrap 5默認(rèn)啟用了RFS，使Bootstrap中的字體更具響應(yīng)性。RFS是Bootstrap創(chuàng)建的一個(gè)輔助項(xiàng)目，最初是為了響應(yīng)地縮放和調(diào)整字體大小。現(xiàn)在，它也能為margin、padding、box-shadow等屬性做同樣的事情。
它所做的基本上是根據(jù)瀏覽器的尺寸計(jì)算出最合適的數(shù)值，這些計(jì)算在編譯時(shí)被翻譯成計(jì)算函數(shù)。使用RFS也拋棄了以前使用px的做法，而使用rem，因?yàn)樗兄趯?shí)現(xiàn)更好的響應(yīng)性。
如果你在Bootstrap中使用Sass文件，你現(xiàn)在可以使用由RFS制作的mixins，包括字體大小、邊距、填充等等，這允許你確保你的組件和樣式是響應(yīng)的。
從右到左的支持
Bootstrap 5使用RTLCSS增加了從左到右（RTL）的支持。由于Bootstrap在全世界范圍內(nèi)使用，因此，開箱即提供RTL支持是一個(gè)重要的步驟。出于這個(gè)原因，Bootstrap 5 放棄了特定的方向命名（例如，使用 left 和 right），轉(zhuǎn)而使用 start 和 end。這使得 Bootstrap 足夠靈活，可以同時(shí)處理從左到右 (LTR) 和 RTL 的網(wǎng)站。例如，.dropleft 現(xiàn)在是 .dropstart，.ml-* 現(xiàn)在是 .ms-*，等等。
為了讓Bootstrap識(shí)別并在你的網(wǎng)站上應(yīng)用RTL風(fēng)格，你需要將 <html> 的 dir 設(shè)置為 rtl，并添加一個(gè)帶有網(wǎng)站RTL語言的 lang 屬性。例如，lang="ar"。
最后，你需要包含Bootstrap的RTL CSS文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
這樣，你的網(wǎng)站就可以支持RTL了。
新組件
Bootstrap 5 為庫帶來了一些新組件。其中一些組件是其他組件的一部分，現(xiàn)在是獨(dú)立組件。
Accordion 手風(fēng)琴
以前，Accordion是Collapsible組件的一部分，而不是它自己的組件。在Bootstrap 5中，Accordion是一個(gè)新的組件。Accordion有一個(gè)新的類，即 .accordion，它里面有一個(gè)accordion項(xiàng)目的列表。此外，與之前Bootstrap 4中的風(fēng)格相比，Accordion有一個(gè)新的風(fēng)格。下面是accordion組件的一個(gè)例子。
Offcanvas 重疊側(cè)邊欄
另一個(gè)新組件是 Offcanvas，它允許您創(chuàng)建一個(gè)重疊的側(cè)邊欄。這個(gè)側(cè)邊欄通常用于在小型設(shè)備上顯示菜單。你可以通過在LTR中使用 .offcanvas-start 代表左邊，.offcanvas-top 代表上面，.offcanvas-end 代表LTR中的右邊，以及 .offcanvas-bottom 代表下面，將其放置在頁面的任何一邊。你也可以指定Offcanvas是否應(yīng)該有背景。下面是Offcanvas組件的使用示例：
Floating Label 浮動(dòng)標(biāo)簽
Floating Label 是 Form 組件的一個(gè)新組件。它允許你創(chuàng)建一個(gè)輸入，其標(biāo)簽一開始看起來像一個(gè)占位符，然后當(dāng)輸入收到焦點(diǎn)時(shí)，標(biāo)簽會(huì)浮動(dòng)到輸入的頂部，高于數(shù)值。它也適用于 <select> 元素和 <textarea> 元素。以下是使用浮動(dòng)標(biāo)簽的示例：
除了新的組件，還有現(xiàn)有組件的新類、新的實(shí)用類、新的輔助類，以及更多。
作者：Shahed Nasser
最近文章
使用 Face-api.js 在 Web 上進(jìn)行人臉檢測 如何檢測 JavaScript 字符串中的 URL 并將其轉(zhuǎn)換為鏈接？ 開發(fā)App新選擇：使用 Vue Native 構(gòu)建移動(dòng)應(yīng)用 5 個(gè)可以加速開發(fā)的 VueUse 庫函數(shù) Vue 中使用defineAsyncComponent 延遲加載組件 使用React Native可以開發(fā)Window桌面應(yīng)用了！ 黑客說：如何做到 4 天上線一個(gè)小程序？ 2021年加速App開發(fā)的8個(gè)最佳跨平臺(tái)框架