跳到主要內容 跳到文檔導航
Check
in English

遷移到 v5

跟踪和查看對 Bootstrap 源文件、文檔和組件的更改，以幫助您從 v4 遷移到 v5。

在本頁面

v5.2.0

煥然一新的設計

Bootstrap v5.2.0 對項目中的少數組件和屬性進行了細微的設計更新，最明顯的是通過border-radius按鈕和表單控件的優化值。我們的文檔也更新了新的主頁、更簡單的文檔佈局（不再折疊側邊欄的部分）以及更突出的Bootstrap 圖標示例。

更多 CSS 變量

我們更新了所有組件以使用 CSS 變量。雖然 Sass 仍然支持一切，但每個組件都已更新為在組件基類（例如.btn）中包含 CSS 變量，從而允許對 Bootstrap 進行更實時的定制。在後續版本中，我們將繼續將 CSS 變量的使用擴展到我們的佈局、表單、助手和實用程序中。在各自的文檔頁面上閱讀有關每個組件中的 CSS 變量的更多信息。

在 Bootstrap 6 之前，我們的 CSS 變量使用會有些不完整。雖然我們希望全面實現這些，但它們確實存在導致重大更改的風險。例如，如果出於某種原因，$alert-border-width: var(--bs-border-width)在我們的源代碼中設置會破壞您自己代碼中潛在的 Sass 。$alert-border-width * 2

因此，只要有可能，我們將繼續推動更多的 CSS 變量，但請注意我們的實現在 v5 中可能會略有限制。

新的_maps.scss

Bootstrap v5.2.0 引入了一個新的 Sass 文件，帶有_maps.scss. 它從中提取了幾個 Sass 地圖，_variables.scss以解決對原始地圖的更新未應用於擴展它們的二級地圖的問題。例如，$theme-colors沒有將更新應用到其他依賴於 的主題地圖，從而$theme-colors破壞了關鍵的自定義工作流程。簡而言之，Sass 有一個限制，即一旦使用了默認變量或映射，就無法更新。當 CSS 變量用於組合其他 CSS 變量時，它們也有類似的缺點。

這就是為什麼 Bootstrap 中的變量自定義必須在 之後@import "functions"，但在@import "variables"我們的導入堆棧的其餘部分之前。這同樣適用於 Sass 映射——您必須在使用它們之前覆蓋默認值。以下地圖已移至新地圖_maps.scss：

  • $theme-colors-rgb
  • $utilities-colors
  • $utilities-text
  • $utilities-text-colors
  • $utilities-bg
  • $utilities-bg-colors
  • $negative-spacers
  • $gutters

您的自定義 Bootstrap CSS 構建現在應該看起來像這樣，帶有單獨的地圖導入。

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

新實用程序

其他更改

  • 引入了新$enable-container-classes選項。—現在，當選擇實驗性 CSS 網格佈局時，.container-*仍然會編譯類，除非此選項設置為false. 容器現在也保留其排水溝值。

  • Offcanvas 組件現在具有響應變化。原始.offcanvas類保持不變——它隱藏了所有視口中的內容。為了使其響應，將該.offcanvas類更改為任何.offcanvas-{sm|md|lg|xl|xxl}類。

  • 現在可以選擇加入更厚的桌子分隔線。—我們刪除了表格組之間更厚且更難覆蓋的邊框，並將其移至您可以應用的可選類中，.table-group-divider. 有關示例，請參閱表格文檔。

  • Scrollspy 已被重寫以使用 Intersection Observer API，這意味著您不再需要相對父級包裝器、棄用offset配置等。尋找您的 Scrollspy 實現，使其在導航突出顯示中更加準確和一致。

  • 彈出框和工具提示現在使用 CSS 變量。一些 CSS 變量已經從它們的 Sass 對應物更新，以減少變量的數量。因此，此版本中已棄用三個變量：$popover-arrow-color、$popover-arrow-outer-color和$tooltip-arrow-color。

  • 添加了新的.text-bg-{color}助手。您現在可以使用幫助程序來設置具有對比前景的a，而不是設置個人.text-*和實用程序。.bg-*.text-bg-*background-colorcolor

  • 添加.form-check-reverse修飾符以翻轉標籤和相關複選框/收音機的順序。

  • 通過新類向表添加了條帶列支持。.table-striped-columns

有關更改的完整列表，請參閱 GitHub 上的 v5.2.0 項目。

v5.1.0

  • 添加了對CSS 網格佈局的實驗性支持。—這是一項正在進行的工作，尚未準備好用於生產，但您可以通過 Sass 選擇加入新功能。要啟用它，請通過設置禁用默認網格，$enable-grid-classes: false並通過設置啟用 CSS 網格$enable-cssgrid: true。

  • 更新了導航欄以支持 offcanvas。—使用響應式類和一些 offcanvas 標記在任何導航欄中添加offcanvas 抽屜。.navbar-expand-*

  • 添加了新的佔位符組件。—我們最新的組件，一種提供臨時塊來代替真實內容的方法，以幫助指示某些內容仍在您的網站或應用程序中加載。

  • Collapse 插件現在支持水平折疊。—添加.collapse-horizontal到您.collapse的折疊width而不是height. min-height通過設置 a或避免瀏覽器重繪height。

  • 添加了新的堆棧和垂直規則助手。—快速應用多個 flexbox 屬性以快速創建帶有堆棧的自定義佈局。從水平 ( .hstack) 和垂直 ( .vstack) 堆棧中進行選擇。使用新的helpers<hr>添加與元素類似的垂直分隔線。.vr

  • 添加了新的全局:rootCSS 變量。—在關卡中添加了幾個新的 CSS 變量以:root控製<body>樣式。更多的工作正在進行中，包括我們的實用程序和組件，但現在閱讀自定義部分中的 CSS 變量。

  • 徹底檢查了顏色和背景實用程序以使用 CSS 變量，並添加了新的文本不透明度和背景不透明度實用程序。— 實用程序現在使用 CSS 變量和.text-*顏色值構建，允許您使用新的不透明度實用程序輕鬆自定義任何實用程序。.bg-*rgba()

  • 添加了新的片段示例，以展示如何自定義我們的組件。—使用我們新的Snippets 示例，準備好使用自定義組件和其他常見設計模式。包括頁腳、下拉列表、列表組和模式。

  • 從彈出框和工具提示中刪除了未使用的定位樣式，因為這些樣式僅由 Popper 處理。$tooltip-margin已被棄用並null在此過程中設置為。

想要更多信息？閱讀 v5.1.0 博客文章。

嘿！下面記錄了我們對 Bootstrap 5 的第一個主要版本 v5.0.0 的更改。它們不反映上面顯示的其他更改。

依賴項

  • 放棄了 jQuery。
  • 從 Popper v1.x 升級到 Popper v2.x。
  • 鑑於 Libsass 已棄用，我們的 Sass 編譯器將 Libsass 替換為 Dart Sass。
  • 從 Jekyll 遷移到 Hugo 以構建我們的文檔

瀏覽器支持

  • 刪除 Internet Explorer 10 和 11
  • 刪除 Microsoft Edge < 16（舊版 Edge）
  • 刪除 Firefox < 60
  • 掉落的 Safari < 12
  • 刪除 iOS Safari < 12
  • 掉落的鉻 < 60

文檔更改

  • 重新設計的主頁、文檔佈局和頁腳。
  • 添加了新的包裹指南。
  • 添加了新的自定義部分，替換了v4 的主題頁面，新增了關於 Sass、全局配置選項、配色方案、CSS 變量等的詳細信息。
  • 將所有表單文檔重新組織到新的表單部分，將內容分解為更集中的頁面。
  • 同樣，更新了 Layout 部分，以更清晰地充實網格內容。
  • 將“Navs”組件頁面重命名為“Navs & Tabs”。
  • 將“Checks”頁面重命名為“Checks & radios”。
  • 重新設計了導航欄並添加了新的子導航，以便更輕鬆地瀏覽我們的網站和文檔版本。
  • 為搜索字段添加了新的鍵盤快捷鍵：Ctrl + /.

薩斯

  • 我們放棄了默認的 Sass 地圖合併，以便更輕鬆地刪除冗餘值。請記住，您現在必須在 Sass 映射中定義所有值，例如$theme-colors. 查看如何處理Sass 映射。

  • 打破color-yiq()將函數和相關變量重命名為，color-contrast()因為它不再與 YIQ 顏色空間相關。請參閱#30168。

    • $yiq-contrasted-threshold被重命名為$min-contrast-ratio.
    • $yiq-text-dark和$yiq-text-light分別重命名為$color-contrast-dark和$color-contrast-light。

  • 打破媒體查詢混合參數已更改為更合乎邏輯的方法。

    • media-breakpoint-down()使用斷點本身而不是下一個斷點（例如，media-breakpoint-down(lg)而不是media-breakpoint-down(md)目標視口小於lg）。
    • 類似地，in 中的第二個參數media-breakpoint-between()也使用斷點本身而不是下一個斷點（例如，media-between(sm, lg)而不是media-breakpoint-between(sm, md)目標視口在sm和之間lg）。

  • 打破刪除了打印樣式和$enable-print-styles變量。打印顯示類仍然存在。請參閱#28339。

  • 打破刪除color()、theme-color()和gray()函數，支持變量。請參閱#29083。

  • 打破theme-color-level()將函數重命名為color-level()，現在接受您想要的任何顏色，而不僅僅是$theme-color顏色。請參閱 #29083 注意： color-level()後來被丟棄在v5.0.0-alpha3.

  • 打破為簡潔起見，重命名為$enable-prefers-reduced-motion-media-query和。$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers

  • 打破刪除了bg-gradient-variant()混合。使用.bg-gradient類向元素添加漸變，而不是生成的.bg-gradient-*類。

  • 打破 刪除了以前不推薦使用的 mixin：

    • hover, hover-focus,plain-hover-focus和hover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()（也刪除了相關的實用程序類，.text-hide）
    • visibility()
    • form-control-focus()

  • 打破重命名scale-color()函數以shift-color()避免與 Sass 自己的顏色縮放函數發生衝突。

  • box-shadowmixins 現在允許值和從多個參數中null刪除。請參閱#30394。none

  • border-radius()mixin 現在有一個默認值。

顏色系統

  • 與新的顏色系統一起使用color-level()並被$theme-color-interval移除的顏色系統。我們代碼庫中的所有lighten()和darken()函數都被替換為tint-color()和shade-color()。這些函數會將顏色與白色或黑色混合，而不是按固定量改變其亮度。將shift-color()根據其權重參數是正值還是負值來著色或著色顏色。有關詳細信息，請參閱#30622。

  • 為每種顏色添加了新的色調和陰影，為每種基色提供了九種不同的顏色，作為新的 Sass 變量。

  • 改善顏色對比度。將顏色對比度從 3:1 提高到 4.5:1，並更新了藍色、綠色、青色和粉紅色，以確保 WCAG 2.1 AA 對比度。還將我們的顏色對比色從 更改$gray-900為$black。

  • 為了支持我們的顏色系統，我們添加了新的自定義tint-color()和shade-color()功能來適當地混合我們的顏色。

網格更新

  • 新斷點！為和向上添加了新xxl的斷點。1400px對所有其他斷點沒有更改。

  • 改進的排水溝。排水溝現在以 rems 為單位設置，並且比 v4 更窄（1.5rem或大約24px，從 向下30px）。這使我們的網格系統的排水溝與我們的間距實用程序對齊。

    • 添加了新的排水溝類（.g-*、.gx-*和.gy-*）來控制水平/垂直排水溝、水平排水溝和垂直排水溝。
    • 打破重命名.no-gutters為.g-0以匹配新的裝訂線實用程序。

  • 列不再position: relative適用，因此您可能必須添加.position-relative一些元素才能恢復該行為。

  • 打破刪除了幾個.order-*經常不用的課程。我們現在只提供.order-1開箱.order-5即用。

  • 打破刪除了.media組件，因為它可以很容易地用實用程序複製。有關示例，請參見 #28265和flex 實用程序頁面。

  • 打破 bootstrap-grid.css現在僅適用box-sizing: border-box於列而不是重置全局框大小。這樣，我們的網格樣式可以在更多的地方使用而不會受到干擾。

  • $enable-grid-classes不再禁用容器類的生成。請參閱#29146。

  • 將 mixin 更新make-col為默認為沒有指定大小的相等列。

內容、重啟等

  • RFS現在默認啟用。使用 mixin 的標題font-size()將自動調整它們font-size以隨視口縮放。此功能以前選擇加入 v4。

  • 打破徹底檢查了我們的顯示排版以替換我們的$display-*變量並使用$display-font-sizesSass 映射。還刪除了單個和調整的 s的單個$display-*-weight變量。$display-font-weightfont-size

  • 添加了兩個新的.display-*標題大小.display-5和.display-6.

  • 鏈接默認帶有下劃線（不僅僅是懸停），除非它們是特定組件的一部分。

  • 重新設計的表格以刷新其樣式並使用 CSS 變量重建它們以更好地控製樣式。

  • 打破嵌套表不再繼承樣式。

  • 打破 .thead-light並被.thead-dark刪除，取而代之的是.table-*可用於所有表格元素（thead、tbody、tfoot、tr和）th的變體類td。

  • 打破table-row-variant()mixin 被重命名為並且table-variant()只接受 2 個參數：（$color顏色名稱）和$value（顏色代碼）。邊框顏色和強調色是根據表格因子變量自動計算的。

  • 將表格單元格填充變量拆分為-y和-x。

  • 打破下課了.pre-scrollable。見#29135

  • 打破 .text-*實用程序不再向鏈接添加懸停和焦點狀態。.link-*可以使用輔助類代替。見#29267

  • 打破下課了.text-justify。見#29793

  • 打破 <hr>元素現在使用height而不是border更好地支持該size屬性。這也允許使用填充實用程序來創建更厚的分隔線（例如，<hr class="py-1">）。

  • padding-left將瀏覽器默認的默認水平<ul>和<ol>元素重置40px為2rem.

  • 已添加$enable-smooth-scroll，適用於全球——除了通過媒體查詢scroll-behavior: smooth請求減少運動的用戶。見#31877prefers-reduced-motion

RTL

  • 水平方向特定的變量、實用程序和 mixin 都已重命名為使用類似於彈性盒佈局中的邏輯屬性——例如start，end代替leftand right。

形式

  • 添加了新的浮動表格！我們已將浮動標籤示例提升為完全支持的表單組件。請參閱新的浮動標籤頁面。

  • 打破 合併本機和自定義表單元素。已合併在 v4 中具有本機和自定義類的複選框、單選、選擇和其他輸入。現在幾乎我們所有的表單元素都是完全自定義的，大多數不需要自定義 HTML。

    • .custom-control.custom-checkbox現在是.form-check。
    • .custom-control.custom-custom-radio現在是.form-check。
    • .custom-control.custom-switch現在是.form-check.form-switch。
    • .custom-select現在是.form-select。
    • .custom-file並.form-file已被.form-control.
    • .custom-range現在是.form-range。
    • 放棄原生.form-control-file和.form-control-range.

  • 打破掉落.input-group-append和.input-group-prepend。您現在可以添加按鈕並.input-group-text作為輸入組的直接子項。

  • 通過向具有驗證的輸入組添加一個額外的類，最終修復了具有驗證反饋錯誤的輸入組上長期缺少邊界半徑。.has-validation

  • 打破 為我們的網格系統刪除了特定於表單的佈局類。使用我們的網格和實用程序而不是.form-group、.form-row或.form-inline。

  • 打破表單標籤現在需要.form-label.

  • 打破 .form-text不再設置display，允許您只通過更改 HTML 元素就可以根據需要創建內聯或阻止幫助文本。

  • 表單控件不再height盡可能固定使用，而是推遲min-height到改進自定義和與其他組件的兼容性。

  • 驗證圖標不再應用於<select>帶有 的 s multiple。

  • 重新排列了 下的源 Sass 文件scss/forms/，包括輸入組樣式。

成分

  • 警報、麵包屑、卡片、下拉列表、列表組、模式、彈出框和工具提示的統一padding值基於我們的$spacer變量。請參閱#30564。

手風琴

警報

  • 警報現在有帶有圖標的示例。

  • 刪除<hr>了每個警報中 s 的自定義樣式，因為它們已經使用currentColor.

徽章

  • 打破刪除了後台實用程序的所有.badge-*顏色類（例如，使用.bg-primary而不是.badge-primary）。

  • 打破Dropped — 改用.badge-pill該.rounded-pill實用程序。

  • 打破刪除了<a>和<button>元素的懸停和焦點樣式。

  • .25em從/.5em到.35em/增加了徽章的默認填充.65em。

  • padding通過刪除、background-color和簡化了麵包屑的默認外觀border-radius。

  • 添加了新的 CSS 自定義屬性--bs-breadcrumb-divider，無需重新編譯 CSS，即可輕鬆自定義。

鈕扣

  • 打破 帶有復選框或單選按鈕的切換按鈕不再需要 JavaScript 並具有新的標記。我們不再需要包裝元素，添加.btn-check到<input>，並將其.btn與<label>. 請參閱#30650。相關文檔已從我們的 Buttons 頁面移至新的 Forms 部分。

  • 打破 為公用事業.btn-block而放棄。不要在 上使用.btn-block，而是使用和實用程序來.btn包裝您的按鈕，以便根據需要將它們隔開。切換到響應式類以更好地控制它們。閱讀文檔以獲取一些示例。.d-grid.gap-*

  • 更新了我們的button-variant()和button-outline-variant()mixins 以支持其他參數。

  • 更新了按鈕以確保增加懸停和活動狀態的對比度。

  • 禁用按鈕現在具有pointer-events: none;.

卡片

  • 打破放棄.card-deck支持我們的網格。將您的卡片包裝在列類中並添加一個父.row-cols-*容器以重新創建卡片組（但對響應對齊有更多控制）。

  • 打破放棄.card-columns了砌體。請參閱#28922。

  • 打破用新的 Accordion 組件替換了.card基礎手風琴。

關閉按鈕

  • 打破重命名.close為.btn-close一個不太通用的名稱。

  • 關閉按鈕現在使用background-image（嵌入的 SVG）而不是&times;HTML 中的 a，允許更輕鬆地自定義，而無需觸摸您的標記。

  • 添加了新.btn-close-white變體，用於filter: invert(1)在較暗的背景下啟用更高對比度的消除圖標。

坍塌

  • 刪除了手風琴的滾動錨定。

  • .dropdown-menu-dark為按需深色下拉菜單添加了新變體和相關變量。

  • 為 .添加了新變量$dropdown-padding-x。

  • 使下拉分隔線變暗以提高對比度。

  • 打破下拉列表的所有事件現在都在下拉切換按鈕上觸發，然後冒泡到父元素。

  • data-bs-popper="static"當下拉菜單的位置是靜態的或下拉菜單位於導航欄中時，下拉菜單現在有一個屬性集。這是由我們的 JavaScript 添加的，可以幫助我們使用自定義位置樣式，而不會干擾 Popper 的定位。

  • 打破刪除flip了下拉插件的選項，支持原生 Popper 配置。您現在可以通過在翻轉修飾符中為fallbackPlacements選項傳遞一個空數組來禁用翻轉行為。

  • 下拉菜單現在可以點擊處理自動關閉行為autoClose的新選項。您可以使用此選項接受在下拉菜單內部或外部的單擊以使其具有交互性。

  • 下拉列表現在支持.dropdown-items 包裹在<li>s 中。

超大屏幕

列表組

  • 為類添加了、、和的新null變量。font-sizefont-weightcolor:hover color.nav-link
  • 打破導航欄現在需要一個容器（以大大簡化間距要求和所需的 CSS）。
  • 打破該類.active不能再應用於.nav-items，它必須直接應用於.nav-links。

畫布外

分頁

  • 分頁鏈接現在具有可自定義margin-left的功能，當它們彼此分開時，它們會在各個角上動態變圓。

  • transition在分頁鏈接中添加了 s。

約夏克布丁

  • 打破在我們的默認彈出框模板中重命名.arrow為。.popover-arrow

  • whiteList將選項重命名為allowList.

紡紗廠

  • 旋轉器現在prefers-reduced-motion: reduce通過減慢動畫來獲得榮譽。請參閱#31882。

  • 改進的微調器垂直對齊。

敬酒

  • Toasts 現在可以在定位實用程序的幫助下定位在 a中。.toast-container

  • 將默認吐司持續時間更改為 5 秒。

  • 從 toasts 中刪除overflow: hidden並替換為border-radius具有功能的適當 s calc()。

工具提示

  • 打破在我們的默認工具提示模板中重命名.arrow為。.tooltip-arrow

  • 打破的默認值fallbackPlacements更改['top', 'right', 'bottom', 'left']為更好地放置 popper 元素。

  • 打破whiteList將選項重命名為allowList.

實用程序

  • 打破重命名了幾個實用程序以使用邏輯屬性名稱而不是方向名稱，並添加了 RTL 支持：

    • 將and重命名為.left-*and 。.right-*.start-*.end-*
    • 將and重命名為.float-leftand 。.float-right.float-start.float-end
    • 將and重命名為.border-leftand 。.border-right.border-start.border-end
    • 將and重命名為.rounded-leftand 。.rounded-right.rounded-start.rounded-end
    • 將and重命名為.ml-*and 。.mr-*.ms-*.me-*
    • 將and重命名為.pl-*and 。.pr-*.ps-*.pe-*
    • 將and重命名為.text-leftand 。.text-right.text-start.text-end

  • 打破默認禁用負邊距。

  • 添加.bg-body了用於快速將<body>'s 背景設置為其他元素的新類。

  • 為、、和增加了新的定位實用程序。每個屬性的值包括、和。toprightbottomleft050%100%

  • .translate-middle-x為.translate-middle-y水平或垂直居中絕對/固定定位元素添加了新的實用程序。

  • 添加了新的border-width實用程序。

  • 打破重命名.text-monospace為.font-monospace.

  • 打破已刪除.text-hide，因為它是一種過時的隱藏不應再使用的文本的方法。

  • 添加.fs-*了實用程序的font-size實用程序（啟用了 RFS）。這些使用與 HTML 的默認標題相同的比例（1-6，從大到小），並且可以通過 Sass 映射進行修改。

  • 打破為了簡潔和一致，重命名了.font-weight-*實用程序。.fw-*

  • 打破為了簡潔和一致，重命名了.font-style-*實用程序。.fst-*

  • 為 CSS Grid 和 flexbox 佈局添加.d-grid了顯示實用程序和新gap實用程序 ( )。.gap

  • 打破刪除.rounded-sm和rounded-lg，並引入了新的班級規模 ，.rounded-0to .rounded-3。請參閱#31687。

  • 添加了新實用line-height程序：.lh-1、.lh-sm和。見這裡。.lh-base.lh-lg

  • 在我們的 CSS 中移動了該.d-none實用程序，使其比其他顯示實用程序具有更大的權重。

  • 使用 .擴展.visually-hidden-focusable幫助器以在容器上工作:focus-within。

幫手

  • 打破 響應式嵌入助手已重命名為具有新類名和改進行為的比率助手，以及有用的 CSS 變量。

    • 類已重命名以更改by為x縱橫比。例如，.ratio-16by9現在.ratio-16x9.
    • 我們放棄了.embed-responsive-itemand 元素組選擇器，取而代之的是更簡單的.ratio > *選擇器。不再需要類，並且比率助手現在可以與任何 HTML 元素一起使用。
    • 這$embed-responsive-aspect-ratiosSass 映射已重命名為$aspect-ratios值已簡化為包含類名和百分比作為key: value對。
    • 現在為 Sass 映射中的每個值生成並包含 CSS 變量。修改 上的--bs-aspect-ratio變量.ratio以創建任何自定義縱橫比。

  • 打破 “屏幕閱讀器”類現在是“視覺隱藏”類。

    • 將 Sass 文件從scss/helpers/_screenreaders.scss為scss/helpers/_visually-hidden.scss
    • 重命名.sr-only為.sr-only-focusable.visually-hidden將and.visually-hidden-focusable
    • 重命名sr-only()和sr-only-focusable()混合為visually-hidden()and visually-hidden-focusable()。

  • bootstrap-utilities.css現在還包括我們的助手。不再需要在自定義構建中導入助手。

JavaScript

  • 刪除 jQuery 依賴項並將插件重寫為常規 JavaScript。

  • 打破所有 JavaScript 插件的數據屬性現在都已命名，以幫助將 Bootstrap 功能與第三方和您自己的代碼區分開來。例如，我們使用data-bs-toggle代替data-toggle.

  • 所有插件現在都可以接受 CSS 選擇器作為第一個參數。您可以傳遞 DOM 元素或任何有效的 CSS 選擇器來創建插件的新實例：

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfig可以作為接受 Bootstrap 的默認 Popper 配置作為參數的函數傳遞，以便您可以按照自己的方式合併此默認配置。適用於下拉菜單、彈出框和工具提示。

  • 的默認值fallbackPlacements更改['top', 'right', 'bottom', 'left']為更好地放置 Popper 元素。適用於下拉菜單、彈出框和工具提示。

  • _getInstance()從公共靜態方法（如→ ）中刪除了下劃線getInstance()。