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

遷移到 v5

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

在本頁面

依賴項

  • 放棄了 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-queryand 。$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-check現在是.form-check。
    • .custom-check.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 元素就可以根據需要創建內聯或阻止幫助文本。

  • 驗證圖標不再應用於<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"當下拉菜單的位置是靜態的並且data-bs-popper="none"下拉菜單位於導航欄中時，下拉菜單現在有一個屬性集。這是由我們的 JavaScript 添加的，可以幫助我們使用自定義位置樣式，而不會干擾 Popper 的定位。

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

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

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

超大屏幕

列表組

  • 為類添加了、、和的新null變量。font-sizefont-weightcolor:hover color.nav-link
  • 打破導航欄現在需要一個容器（以大大簡化間距要求和所需的 CSS）。

畫布外

分頁

  • 分頁鏈接現在具有可自定義margin-left的功能，當它們彼此分開時，這些鏈接在所有角落都動態變圓。

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

約夏克布丁

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

  • whiteList將選項重命名為allowList.

紡紗廠

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

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

敬酒

  • Toasts 現在可以在定位實用程序.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
    • 將and重命名為.sr-onlyand.sr-only-focusable.visually-hidden.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 選擇器來創建插件的新實例：

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

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

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

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