遷移至 v5（Migrating to v5）

追蹤並檢視 Bootstrap 原始檔案、文件和元件的變更，以幫助您從 v4 遷移到 v5。

本頁內容

v5.3.6

依賴項（Dependencies）

將文件建置工具從 Hugo 遷移至 Astro

v5.3.0

如果您是從先前的 v5.3.0 alpha 版本遷移，請同時檢視本章節之外的其他變更。

輔助類別（Helpers）

連結顏色再次加入 !important，以便與我們新增的連結通用類別更好地搭配使用。

通用類別（Utilities）

新增 .d-inline-grid display 通用類別。

v5.3.0-alpha2

如果您是從先前的 v5.3.0 alpha 版本遷移，請檢視以下列出的變更。

CSS 變數（CSS variables）

移除了多個重複和未使用的 root CSS 變數。

色彩模式（Color modes）

深色模式的色彩現在是從 Sass 中的主題色彩（例如 $primary）衍生而來，而非特定的色調或明暗度（例如 $blue-300）。這讓自訂預設主題色彩時能更自動化地產生深色模式。
新增用於產生深色模式文字、細微背景和細微邊框的主題色彩 Sass maps。
程式碼片段範例現已支援深色模式，更新了標記並減少了自訂樣式。
為深色模式 CSS 加入 color-scheme: dark，以變更作業系統層級的控制項，例如捲軸。
表單驗證的 border-color 和文字 color 狀態現在能回應深色模式，這要歸功於新的 Sass 和 CSS 變數。
移除了最近新增的表單控制項背景 CSS 變數，並將 Sass 變數重新指派為使用 CSS 變數。這簡化了跨色彩模式的樣式設定，並避免了深色模式下表單控制項無法正確更新的問題。
我們的 box-shadow 將再次保持深色，而非在深色模式下反轉為白色。
改進了色彩模式切換腳本的 HTML 和 JavaScript。改進了用於變更啟用 SVG 的選擇器，並使用 ARIA 屬性讓標記更具無障礙性。
改進了文件程式碼語法在淺色和深色模式下的色彩等方面。

排版（Typography）

我們不再為深色模式設定 $headings-color-dark 或 --bs-heading-color 的色彩。為了避免元件內標題顯示錯誤色彩的多種問題，我們將 Sass 變數設為 null，並加入了類似預設淺色模式使用的 null 檢查。

元件（Components）

卡片現在設定了 color，以改善跨色彩模式的渲染。
為我們的導覽元件新增了 .nav-underline 變體，在啟用的導覽連結下方顯示更簡潔的底線。請參閱文件中的範例。
導覽元件現在有新的 :focus-visible 樣式，更符合我們自訂的按鈕 focus 樣式。

輔助類別（Helpers）

新增了 .icon-link 輔助類別，用於快速放置和對齊 Bootstrap Icons 與文字連結。圖示連結也支援我們新的連結通用類別。
新增了 focus ring 輔助類別，用於移除預設的 outline 並設定自訂的 box-shadow focus ring。

通用類別（Utilities）

將 Sass 和 CSS 變數 ${color}-text 重新命名為 ${color}-text-emphasis，以符合其相關聯的通用類別。
在我們的連結顏色旁新增了 .link-body-emphasis 輔助類別。這會使用我們的色彩模式響應式強調色來建立有顏色的連結。
新增了連結色彩透明度、底線偏移、底線顏色和底線透明度的連結通用類別。探索新的連結通用類別。
基於 CSS 變數的 border-width 通用類別已還原為直接設定其屬性（如同 v5.2.0 之前的做法）。這避免了跨巢狀元素的繼承問題，包括表格。
新增了 .border-black 通用類別，以符合我們的 .text-black 和 .bg-black 通用類別。
已棄用 .text-muted 通用類別和 $text-muted Sass 變數已被棄用，並由 .text-body-secondary 和 $body-secondary-color 取代。

文件（Docs）

範例現在會根據我們文件中的設定，以適當的淺色或深色模式顯示。每個範例都有個別的色彩模式選擇器。
改進了互動 Toast 示範所包含的 JavaScript。
在範例頁面頂部加入了 twbs/examples 儲存庫的內容。

工具（Tooling）

透過 True 加入了 SCSS 測試，以幫助測試我們的通用類別 API 和其他自訂設定。
以更新、更完整的 twbs/examples 儲存庫取代了 bootstrap-npm-starter 專案的實例。

完整的變更列表，請參閱 GitHub 上的 v5.3.0-alpha2 專案。

v5.3.0-alpha1

色彩模式！（Color modes!）

閱讀新的色彩模式文件以了解更多。

全域支援淺色（預設）和深色模式。 在 :root 元素上全域設定色彩模式，使用包裹類別在元素和元件群組上設定，或直接在元件上使用 data-bs-theme="light|dark" 設定。也包含了新的 color-mode() mixin，可以根據您的偏好，使用 data-bs-theme 選擇器或 media query 輸出規則集。

已棄用色彩模式取代了元件的深色變體，因此 .btn-close-white、.carousel-dark、.dropdown-menu-dark 和 .navbar-dark 已被棄用。
新的擴展色彩系統。 我們新增了新的主題色彩（但不在 $theme-colors 中），用於更細緻的系統級色彩調色盤，包含 color 和 background-color 的新 secondary、tertiary 和 emphasis 色彩。這些新色彩可作為 Sass 變數、CSS 變數和通用類別使用。
我們也擴展了主題色彩的 Sass 變數、CSS 變數和通用類別，以包含文字強調、細微背景色和細微邊框色。這些可作為 Sass 變數、CSS 變數和通用類別使用。

新增 _variables-dark.scss 樣式表，用於存放深色模式特定的覆寫。此樣式表應在您的匯入堆疊中，緊接在現有的 _variables.scss 檔案之後匯入。

diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 8f8296def..449d70487 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -6,6 +6,7 @@
 // Configuration
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 @import "mixins";
 @import "utilities";

CSS 變數（CSS variables）

恢復了中斷點的 CSS 變數，雖然我們不在 media queries 中使用它們，因為它們不受支援。然而，這些在 JS 特定的情境中很有用。
根據色彩模式更新，我們為新的 Sass CSS 變數 secondary 和 tertiary 文字和背景色新增了通用類別，以及主題色彩的 {color}-bg-subtle、{color}-border-subtle 和 {color}-text-emphasis。這些新色彩可透過 Sass 和 CSS 變數使用（但不透過我們的色彩 maps），明確目標是讓跨多種色彩模式（如淺色和深色）的自訂更加容易。
為警告訊息、.btn-close 和 .offcanvas 新增了額外的變數。
--bs-heading-color 變數已恢復，並更新了深色模式支援。首先，我們現在在嘗試輸出 CSS 變數之前，會檢查相關聯的 Sass 變數 $headings-color 是否為 null 值，所以預設情況下它不會出現在我們編譯的 CSS 中。其次，我們使用帶有回退值 inherit 的 CSS 變數，允許保留原始行為，但也允許覆寫。
將連結轉換為使用 CSS 變數來設定 color 樣式，但不包括 text-decoration。色彩現在使用 --bs-link-color-rgb 和 --bs-link-opacity 設定為 rgba() 色彩，讓您可以輕鬆自訂透明度。a:hover 偽類別現在覆寫 --bs-link-color-rgb，而非明確設定 color 屬性。
--bs-border-width 現在被更多元件使用，以更好地控制預設的全域樣式。
為我們的 box-shadow 新增了新的 root CSS 變數，包括 --bs-box-shadow、--bs-box-shadow-sm、--bs-box-shadow-lg 和 --bs-box-shadow-inset。

元件（Components）

警告訊息（Alert）

警告訊息變體現在透過 CSS 變數設定樣式。
已棄用 alert-variant() mixin 現已棄用。我們現在使用 Sass 迴圈直接修改每個變體的元件預設 CSS 變數。

列表群組（List group）

列表群組項目變體現在透過 CSS 變數設定樣式。
已棄用 list-group-item-variant() mixin 現已棄用。我們現在使用 Sass 迴圈直接修改每個變體的元件預設 CSS 變數。

下拉選單（Dropdowns）

已棄用 .dropdown-menu-dark 類別已被棄用，由在下拉選單或任何父元素上使用 data-bs-theme="dark" 取代。請參閱文件中的範例。

關閉按鈕（Close button）

已棄用 .btn-close-white 類別已被棄用，由在關閉按鈕或任何父元素上使用 data-bs-theme="dark" 取代。請參閱文件中的範例。

已棄用 .navbar-dark 類別已被棄用，由在導覽列或任何父元素上使用 data-bs-theme="dark" 取代。請參閱更新後的範例。

進度條（Progress bars）

進度條的標記在 v5.3.0 中已更新。由於 role 和各種 aria-* 屬性放置在內部的 .progress-bar 元素上，某些螢幕閱讀器無法朗讀零值進度條。現在，role="progressbar" 和相關的 aria-* 屬性位於外部的 .progress 元素上，.progress-bar 僅用於視覺呈現進度條和可選標籤。

雖然我們建議採用新的標記以提高與所有螢幕閱讀器的相容性，但請注意，舊的進度條結構將繼續像以前一樣運作。

<!-- 先前的標記 -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- 新的標記 -->
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>

我們也引入了新的 .progress-stacked 類別，以更合理地將多個進度條包裹成單一堆疊進度條。

<!-- 先前的標記 -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- 新的標記 -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

表單（Forms）

.form-control 現在使用 CSS 變數設定樣式以支援色彩模式。這包括為預設和停用的表單控制項背景新增兩個新的 root CSS 變數。
.form-check 和 .form-switch 元件現在使用 CSS 變數來設定 background-image。這裡的用法與其他元件不同，各種 focus、active 等狀態不是設定在基礎類別上。相反地，狀態會覆寫一個變數（例如 --bs-form-switch-bg）。
浮動表單標籤現在有 background-color 以修正 <textarea> 元素的支援。也進行了額外變更以支援停用狀態等。
修正了基於 WebKit 瀏覽器中日期和時間輸入的顯示問題。

通用類別（Utilities）

已棄用 .text-muted 將在 v6 中由 .text-body-secondary 取代。

隨著擴展主題色彩和變數的加入，.text-muted 變數和通用類別已在 v5.3.0 中棄用。其預設值也已重新指派為新的 --bs-secondary-color CSS 變數，以更好地支援色彩模式。它將在 v6.0.0 中移除。
新增了 .overflow-x、.overflow-y 和數個 .object-fit-* 通用類別。object-fit 屬性用於指定 <img> 或 <video> 應如何調整大小以適合其容器，為我們提供了一個響應式的替代方案，取代使用 background-image 來實現可調整大小的填滿/適合圖片。
新增了 .fw-medium 通用類別。
新增了 z-index 的 .z-* 通用類別。
Box shadow 通用類別（和 Sass 變數）已為深色模式更新。它們現在使用 --bs-body-color-rgb 來產生 rgba() 色彩值，讓它們可以根據指定的前景色輕鬆適應色彩模式。

完整的變更列表，請參閱 GitHub 上的 v5.3.0 專案。

v5.2.0

設計更新（Refreshed design）

Bootstrap v5.2.0 為整個專案中的一些元件和屬性帶來了細微的設計更新，最值得注意的是按鈕和表單控制項上精緻的 border-radius 值。我們的文件也已更新，包括新的首頁、不再摺疊側邊欄區段的更簡潔文件版面配置，以及更突顯的 Bootstrap Icons 範例。

新的 `_maps.scss`

Bootstrap v5.2.0 引入了新的 Sass 檔案 _maps.scss。 它從 _variables.scss 中提取了多個 Sass maps，以修正對原始 map 的更新未應用到擴展它們的次要 maps 的問題。例如，對 $theme-colors 的更新沒有應用到依賴 $theme-colors 的其他主題 maps，這破壞了關鍵的自訂工作流程。簡而言之，Sass 有一個限制，一旦預設變數或 map 被_使用_，就無法更新。當 CSS 變數被用來組合其他 CSS 變數時，也有類似的缺點。

這就是為什麼 Bootstrap 中的變數自訂必須在 @import "functions" 之後，但在 @import "variables" 和其餘匯入堆疊之前。同樣的道理也適用於 Sass maps——您必須在它們被使用之前覆寫預設值。以下 maps 已移至新的 _maps.scss：

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

您的自訂 Bootstrap CSS 建置現在應該看起來像這樣，使用單獨的 maps 匯入。

  // 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

新的通用類別（New utilities）

擴展了 font-weight 通用類別，以包含 .fw-semibold 用於半粗體字型。
擴展了 border-radius 通用類別，以包含兩個新尺寸 .rounded-4 和 .rounded-5，提供更多選項。

其他變更（Additional changes）

引入了新的 $enable-container-classes 選項。 —— 現在當選擇使用實驗性 CSS Grid 版面配置時，.container-* 類別仍會被編譯，除非此選項設為 false。容器現在也保留其間隔值。
側邊面板元件現在有響應式變體。 原始的 .offcanvas 類別保持不變——它在所有視窗中隱藏內容。要使其具有響應性，將 .offcanvas 類別更改為任何 .offcanvas-{sm|md|lg|xl|xxl} 類別。
較粗的表格分隔線現在是可選的。 —— 我們移除了表格群組之間較粗且較難覆寫的邊框，並將其改為您可以套用的可選類別 .table-group-divider。請參閱表格文件中的範例。
Scrollspy 已被重寫以使用 Intersection Observer API，這意味著您不再需要相對定位的父容器、offset 設定已棄用等等。期待您的 Scrollspy 實作在導覽高亮方面更準確、更一致。
Popovers 和 tooltips 現在使用 CSS 變數。 一些 CSS 變數已從其對應的 Sass 變數更新，以減少變數數量。因此，此版本中有三個變數已被棄用：$popover-arrow-color、$popover-arrow-outer-color 和 $tooltip-arrow-color。
新增了 .text-bg-{color} 輔助類別。 現在您可以使用 .text-bg-* 輔助類別來設定帶有對比前景 color 的 background-color，而不是分別設定 .text-* 和 .bg-* 通用類別。
新增了 .form-check-reverse 修飾符，用於翻轉標籤和相關核取方塊/單選按鈕的順序。
透過新的 .table-striped-columns 類別，為表格新增了條紋欄支援。

完整的變更列表，請參閱 GitHub 上的 v5.2.0 專案。

v5.1.0

新增了對 CSS Grid 版面配置的實驗性支援。 —— 這是一項進行中的工作，尚未準備好用於生產環境，但您可以透過 Sass 選擇使用此新功能。要啟用它，請停用預設格線，方法是設定 $enable-grid-classes: false，並透過設定 $enable-cssgrid: true 來啟用 CSS Grid。
更新了導覽列以支援側邊面板。 —— 使用響應式 .navbar-expand-* 類別和一些側邊面板標記，在任何導覽列中加入側邊面板抽屜。
新增了佔位元素元件。 —— 我們的最新元件，一種在實際內容載入時提供臨時區塊的方式，以指示您的網站或應用程式中仍有內容正在載入。
摺疊外掛現在支援水平摺疊。 —— 將 .collapse-horizontal 加入您的 .collapse 以摺疊 width 而非 height。透過設定 min-height 或 height 來避免瀏覽器重繪。
新增了堆疊和垂直分隔線輔助類別。 —— 使用堆疊快速套用多個 flexbox 屬性以建立自訂版面配置。可選擇水平（.hstack）和垂直（.vstack）堆疊。使用新的 .vr 輔助類別加入類似 <hr> 元素的垂直分隔線。
新增了全域 :root CSS 變數。 —— 在 :root 層級加入了數個新的 CSS 變數，用於控制 <body> 樣式。更多變數正在開發中，包括我們的通用類別和元件，但現在請閱讀客製化章節中的 CSS 變數。
徹底改造了色彩和背景通用類別以使用 CSS 變數，並新增了文字透明度和背景透明度通用類別。 —— .text-* 和 .bg-* 通用類別現在使用 CSS 變數和 rgba() 色彩值建立，讓您可以使用新的透明度通用類別輕鬆自訂任何通用類別。
新增了程式碼片段範例，展示如何自訂我們的元件。 —— 透過我們新的程式碼片段範例，取得可直接使用的自訂元件和其他常見設計模式。包括頁尾、下拉選單、列表群組和互動視窗。
從 popovers 和 tooltips 中移除了未使用的定位樣式，因為這些完全由 Popper 處理。$tooltip-margin 已在此過程中被棄用並設為 null。

想要更多資訊？閱讀 v5.1.0 部落格文章。

v5.0.0

嗨！我們 Bootstrap 5 的第一個主要版本 v5.0.0 的變更記錄如下。它們不反映上述顯示的額外變更。

依賴項（Dependencies）

移除了 jQuery。
從 Popper v1.x 升級到 Popper v2.x。
由於 Libsass 已被棄用，因此將 Sass 編譯器從 Libsass 替換為 Dart Sass。
將文件建置工具從 Jekyll 遷移至 Hugo

瀏覽器支援（Browser support）

移除了 Internet Explorer 10 和 11
移除了 Microsoft Edge < 16（Legacy Edge）
移除了 Firefox < 60
移除了 Safari < 12
移除了 iOS Safari < 12
移除了 Chrome < 60

文件變更（Documentation changes）

重新設計了首頁、文件版面配置和頁尾。
新增了新的 Parcel 指南。
新增了新的客製化章節，取代了 v4 的主題化頁面，包含 Sass、全域配置選項、配色方案、CSS 變數等新詳細資訊。
將所有表單文件重新整理到新的表單章節，將內容拆分為更專注的頁面。
同樣地，更新了版面配置章節，以更清楚地充實格線內容。
將「Navs」元件頁面重新命名為「Navs & Tabs」。
將「Checks」頁面重新命名為「Checks & radios」。
重新設計了導覽列並加入了新的子導覽列，讓瀏覽我們的網站和文件版本更加容易。
為搜尋欄位新增了新的鍵盤快捷鍵：Ctrl + /。

Sass

我們放棄了預設的 Sass map 合併，以便更容易移除多餘的值。請記住，您現在必須在 Sass maps 中定義所有值，例如 $theme-colors。查看如何處理 Sass maps。
破壞性變更將 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 query mixins 參數已變更為更合理的方式。
- media-breakpoint-down() 使用中斷點本身而非下一個中斷點（例如，media-breakpoint-down(lg) 而非 media-breakpoint-down(md) 針對小於 lg 的視窗）。
- 同樣地，media-breakpoint-between() 中的第二個參數也使用中斷點本身而非下一個中斷點（例如，media-breakpoint-between(sm, lg) 而非 media-breakpoint-between(sm, md) 針對 sm 和 lg 之間的視窗）。
破壞性變更移除了列印樣式和 $enable-print-styles 變數。列印 display 類別仍然存在。參閱 #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() mixin。改用 .bg-gradient 類別為元素加入漸層，而非產生的 .bg-gradient-* 類別。
破壞性變更 移除了先前已棄用的 mixins：
- 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 自身的 color scaling 函式衝突。
box-shadow mixins 現在允許 null 值，並從多個參數中移除了 none。參閱 #30394。
border-radius() mixin 現在有預設值。

色彩系統（Color system）

使用 color-level() 和 $theme-color-interval 運作的色彩系統已被移除，改用新的色彩系統。我們程式碼庫中所有的 lighten() 和 darken() 函式都已被 tint-color() 和 shade-color() 取代。這些函式會將色彩與白色或黑色混合，而非以固定量改變其亮度。shift-color() 會根據其權重參數是正數還是負數來調淺或調深色彩。參閱 #30622 以獲取更多詳細資訊。
為每種色彩新增了新的色調和明暗度，為每種基礎色彩提供九種獨立的色彩，作為新的 Sass 變數。
改善了色彩對比度。將色彩對比度比例從 3:1 提升至 4.5:1，並更新了藍色、綠色、青色和粉色，以確保 WCAG 2.2 AA 對比度。也將我們的色彩對比色從 $gray-900 改為 $black。
為了支援我們的色彩系統，我們新增了自訂的 tint-color() 和 shade-color() 函式，以適當地混合我們的色彩。

格線系統更新（Grid updates）

新的中斷點！ 為 1400px 及以上新增了 xxl 中斷點。所有其他中斷點不變。
改進的間隔。 間隔現在以 rem 為單位設定，並且比 v4 更窄（1.5rem，約 24px，從 30px 減少）。這讓我們的格線系統間隔與我們的間距通用類別一致。
- 新增了新的間隔類別（.g-*、.gx-* 和 .gy-*）以控制水平/垂直間隔、水平間隔和垂直間隔。
- 破壞性變更將 .no-gutters 重新命名為 .g-0 以符合新的間隔通用類別。
欄不再套用 position: relative，因此您可能需要在某些元素上加入 .position-relative 以恢復該行為。
破壞性變更移除了數個經常未使用的 .order-* 類別。我們現在只提供開箱即用的 .order-0 到 .order-5。
破壞性變更移除了 .media 元件，因為它可以輕鬆地使用通用類別複製。參閱 #28265 和 flex 通用類別頁面的範例。
破壞性變更 bootstrap-grid.css 現在只對欄套用 box-sizing: border-box，而非重設全域 box-sizing。這樣，我們的格線樣式可以在更多地方使用而不會產生干擾。
$enable-grid-classes 不再停用容器類別的產生。參閱 #29146。
更新了 make-col mixin，預設為沒有指定尺寸的等寬欄。

內容、Reboot 等（Content, Reboot, etc）

RFS 現在預設啟用。 使用 font-size() mixin 的標題將自動調整其 font-size 以隨視窗縮放。此功能在 v4 中是可選的。
破壞性變更徹底改造了我們的 display 排版，以用 $display-font-sizes Sass map 取代我們的 $display-* 變數。也移除了個別的 $display-*-weight 變數，改用單一的 $display-font-weight 並調整了 font-sizes。
新增了兩個新的 .display-* 標題尺寸，.display-5 和 .display-6。
連結現在預設有底線（不只是在 hover 時），除非它們是特定元件的一部分。
重新設計了表格以更新其樣式，並使用 CSS 變數重建它們，以便更好地控制樣式設定。
破壞性變更巢狀表格不再繼承樣式。
破壞性變更移除了 .thead-light 和 .thead-dark，改用可用於所有表格元素（thead、tbody、tfoot、tr、th 和 td）的 .table-* 變體類別。
破壞性變更 table-row-variant() mixin 重新命名為 table-variant()，只接受 2 個參數：$color（色彩名稱）和 $value（色彩代碼）。邊框色彩和強調色會根據表格因子變數自動計算。
將表格儲存格內距變數拆分為 -y 和 -x。
破壞性變更移除了 .pre-scrollable 類別。參閱 #29135
破壞性變更 .text-* 通用類別不再為連結加入 hover 和 focus 狀態。可以改用 .link-* 輔助類別。參閱 #29267
破壞性變更移除了 .text-justify 類別。參閱 #29793
破壞性變更 ~~<hr> 元素現在使用 height 而非 border 以更好地支援 size 屬性。這也讓使用內距通用類別建立更粗的分隔線成為可能（例如 <hr class="py-1">）。~~
將 <ul> 和 <ol> 元素的預設水平 padding-left 從瀏覽器預設的 40px 重設為 2rem。
新增了 $enable-smooth-scroll，它會全域套用 scroll-behavior: smooth —— 除了透過 prefers-reduced-motion media query 要求減少動態效果的使用者。參閱 #31877

RTL

水平方向特定的變數、通用類別和 mixins 都已重新命名為使用邏輯屬性名稱，如 flexbox 版面配置中的名稱——例如，使用 start 和 end 取代 left 和 right。

表單（Forms）

新增了浮動表單！ 我們已將浮動標籤範例提升為完全支援的表單元件。請參閱新的浮動標籤頁面。
破壞性變更 整合了原生和自訂表單元素。 在 v4 中有原生和自訂類別的核取方塊、單選按鈕、下拉選擇和其他輸入已被整合。現在幾乎所有的表單元素都是完全自訂的，大多數不需要自訂 HTML。
- .custom-control.custom-checkbox 現在是 .form-check。
- .custom-control.custom-radio 現在是 .form-check。
- .custom-control.custom-switch 現在是 .form-check.form-switch。
- .custom-select 現在是 .form-select。
- .custom-file 和 .form-control-file 已被 .form-control 上的自訂樣式取代。
- .custom-range 現在是 .form-range。
- 移除了原生的 .form-control-file 和 .form-control-range。
破壞性變更移除了 .input-group-append 和 .input-group-prepend。您現在可以直接將按鈕和 .input-group-text 作為輸入群組的直接子元素。
長期存在的輸入群組驗證回饋缺少圓角的 bug 終於透過在具有驗證的輸入群組上加入額外的 .has-validation 類別來修正。
破壞性變更 移除了表單特定的版面配置類別，改用我們的格線系統。 使用我們的格線和通用類別取代 .form-group、.form-row 或 .form-inline。
破壞性變更表單標籤現在需要 .form-label。
破壞性變更 .form-text 不再設定 display，讓您可以透過更改 HTML 元素來建立行內或區塊輔助文字。
表單控制項在可能的情況下不再使用固定的 height，而是改用 min-height 以改善自訂和與其他元件的相容性。
驗證圖示不再套用到具有 multiple 的 <select>。
重新整理了 scss/forms/ 下的原始碼 Sass 檔案，包括輸入群組樣式。

元件（Components）

統一了警告訊息、麵包屑導覽、卡片、下拉選單、列表群組、互動視窗、popovers 和 tooltips 的 padding 值，以基於我們的 $spacer 變數。參閱 #30564。

手風琴（Accordion）

新增了新的手風琴元件。

警告訊息（Alerts）

警告訊息現在有帶圖示的範例。
移除了每個警告訊息中 <hr> 的自訂樣式，因為它們已經使用 currentColor。

標記（Badges）

破壞性變更移除了所有 .badge-* 色彩類別，改用背景通用類別（例如，使用 .bg-primary 取代 .badge-primary）。
破壞性變更移除了 .badge-pill——改用 .rounded-pill 通用類別。
破壞性變更移除了 <a> 和 <button> 元素的 hover 和 focus 樣式。
將標記的預設內距從 .25em/.5em 增加到 .35em/.65em。

麵包屑導覽（Breadcrumbs）

透過移除 padding、background-color 和 border-radius 簡化了麵包屑導覽的預設外觀。
新增了新的 CSS 自訂屬性 --bs-breadcrumb-divider，以便輕鬆自訂而無需重新編譯 CSS。

按鈕（Buttons）

破壞性變更 使用核取方塊或單選按鈕的切換按鈕不再需要 JavaScript，並有新的標記。 我們不再需要包裹元素，將 .btn-check 加入 <input>，並在 <label> 上配對任何 .btn 類別。參閱 #30650。此內容的文件已從按鈕頁面移至新的表單章節。
破壞性變更 移除了 .btn-block，改用通用類別。 現在不是在 .btn 上使用 .btn-block，而是用 .d-grid 和 .gap-* 通用類別包裹您的按鈕，以根據需要設定間距。切換到響應式類別以獲得更多控制。閱讀文件中的一些範例。
更新了 button-variant() 和 button-outline-variant() mixins 以支援額外的參數。
更新了按鈕以確保在 hover 和 active 狀態下增加對比度。
停用的按鈕現在有 pointer-events: none;。

卡片（Card）

破壞性變更移除了 .card-deck，改用我們的格線。用欄類別包裹您的卡片並加入父級 .row-cols-* 容器來重新建立 card decks（但對響應式對齊有更多控制）。
破壞性變更移除了 .card-columns，改用 Masonry。參閱 #28922。
破壞性變更用新的手風琴元件取代了基於 .card 的手風琴。

輪播（Carousel）

新增了.carousel-dark 變體用於深色文字、控制項和指示器（非常適合較淺的背景）。
用來自 Bootstrap Icons 的新 SVG 取代了輪播控制項的箭頭圖示。

關閉按鈕（Close button）

破壞性變更將 .close 重新命名為 .btn-close 以使用較不通用的名稱。
關閉按鈕現在使用 background-image（嵌入式 SVG）而非 HTML 中的 ×，允許更輕鬆地自訂而無需接觸標記。
新增了 .btn-close-white 變體，使用 filter: invert(1) 以在較深背景下啟用更高對比度的關閉圖示。

摺疊（Collapse）

移除了手風琴的捲動錨定。

下拉選單（Dropdowns）

新增了 .dropdown-menu-dark 變體和相關變數，用於按需的深色下拉選單。
為 $dropdown-padding-x 新增了新變數。
加深了下拉選單分隔線以改善對比度。
破壞性變更下拉選單的所有事件現在都在下拉選單切換按鈕上觸發，然後冒泡到父元素。
當下拉選單的定位是靜態的，或下拉選單在導覽列中時，下拉選單現在會設定 data-bs-popper="static" 屬性。這由我們的 JavaScript 加入，幫助我們使用自訂定位樣式而不會干擾 Popper 的定位。
破壞性變更移除了下拉選單外掛的 flip 選項，改用原生 Popper 配置。您現在可以透過在 flip modifier 中為 fallbackPlacements 選項傳遞空陣列來停用翻轉行為。
下拉選單現在可以透過新的 autoClose 選項來處理自動關閉行為，使其可點擊。您可以使用此選項來接受下拉選單內部或外部的點擊，使其具有互動性。
下拉選單現在支援包裹在 <li> 中的 .dropdown-item。

Jumbotron

破壞性變更移除了 jumbotron 元件，因為它可以使用通用類別複製。請參閱我們新的 Jumbotron 範例進行示範。

列表群組（List group）

為列表群組新增了.list-group-numbered 修飾符。

導覽與分頁（Navs and tabs）

為 .nav-link 類別新增了 font-size、font-weight、color 和 :hover color 的新 null 變數。

導覽列（Navbars）

破壞性變更導覽列現在需要內部有一個容器（以大幅簡化間距需求和所需的 CSS）。
破壞性變更 .active 類別不能再套用到 .nav-item，必須直接套用到 .nav-link。

側邊面板（Offcanvas）

新增了側邊面板元件。

分頁（Pagination）

分頁連結現在有可自訂的 margin-left，當彼此分開時會在所有角落動態圓角。
為分頁連結新增了 transition。

彈出提示框（Popovers）

破壞性變更在我們的預設 popover 範本中將 .arrow 重新命名為 .popover-arrow。
將 whiteList 選項重新命名為 allowList。

載入圖示（Spinners）

載入圖示現在遵守 prefers-reduced-motion: reduce，透過減慢動畫速度。參閱 #31882。
改善了載入圖示的垂直對齊。

通知訊息（Toasts）

通知訊息現在可以透過定位通用類別的幫助，在 .toast-container 中定位。
將預設 toast 持續時間改為 5 秒。
從 toasts 中移除了 overflow: hidden，並用使用 calc() 函式的適當 border-radius 取代。

工具提示框（Tooltips）

破壞性變更在我們的預設 tooltip 範本中將 .arrow 重新命名為 .tooltip-arrow。
破壞性變更 fallbackPlacements 的預設值已改為 ['top', 'right', 'bottom', 'left']，以更好地放置 popper 元素。
破壞性變更將 whiteList 選項重新命名為 allowList。

通用類別（Utilities）

破壞性變更隨著 RTL 支援的加入，多個通用類別已重新命名為使用邏輯屬性名稱而非方向名稱：
- 將 .float-left 和 .float-right 重新命名為 .float-start 和 .float-end。
- 將 .border-left 和 .border-right 重新命名為 .border-start 和 .border-end。
- 將 .rounded-left 和 .rounded-right 重新命名為 .rounded-start 和 .rounded-end。
- 將 .ml-* 和 .mr-* 重新命名為 .ms-* 和 .me-*。
- 將 .pl-* 和 .pr-* 重新命名為 .ps-* 和 .pe-*。
- 將 .text-*-left 和 .text-*-right 重新命名為 .text-*-start 和 .text-*-end。
破壞性變更預設停用負數 margins。
新增了 .bg-body 類別，用於快速將 <body> 的背景設定到其他元素。
為 top、right、bottom 和 left 新增了定位通用類別。每個屬性的值包括 0、50% 和 100%。
新增了 .translate-middle-x 和 .translate-middle-y 通用類別，用於水平或垂直置中絕對/固定定位元素。
新增了 border-width 通用類別。
破壞性變更將 .text-monospace 重新命名為 .font-monospace。
破壞性變更移除了 .text-hide，因為它是一種不應再使用的過時隱藏文字方法。
新增了 font-size 的 .fs-* 通用類別（啟用 RFS）。這些使用與 HTML 預設標題（1-6，大到小）相同的比例，並可透過 Sass map 修改。
破壞性變更為簡潔和一致性，將 .font-weight-* 通用類別重新命名為 .fw-*。
破壞性變更為簡潔和與新的 .fst-normal 通用類別一致，將 .font-italic 通用類別重新命名為 .fst-italic。
為 display 通用類別新增了 .d-grid，並為 CSS Grid 和 flexbox 版面配置新增了 gap 通用類別（.gap）。
破壞性變更移除了 .rounded-sm 和 rounded-lg，並引入了新的類別比例，.rounded-0 到 .rounded-3。參閱 #31687。
新增了行高通用類別：.lh-1、.lh-sm、.lh-base 和 .lh-lg。請參閱這裡。
在我們的 CSS 中移動了 .d-none 通用類別，使其在其他 display 通用類別上有更大的權重。
擴展了 .visually-hidden-focusable 輔助類別，使用 :focus-within 也可在容器上運作。

輔助類別（Helpers）

破壞性變更 響應式嵌入輔助類別已重新命名為比例輔助類別，包含新的類別名稱和改進的行為，以及一個有用的 CSS 變數。
- 類別已重新命名，將長寬比中的 by 改為 x。例如，.ratio-16by9 現在是 .ratio-16x9。
- 我們移除了 .embed-responsive-item 和元素群組選擇器，改用更簡單的 .ratio > * 選擇器。不再需要類別，比例輔助類別現在可用於任何 HTML 元素。
- $embed-responsive-aspect-ratios Sass map 已重新命名為 $aspect-ratios，其值已簡化為包含類別名稱和百分比作為 key: value 配對。
- 現在為 Sass map 中的每個值產生並包含 CSS 變數。修改 .ratio 上的 --bs-aspect-ratio 變數以建立任何自訂長寬比。
破壞性變更 「螢幕閱讀器」類別現在是「視覺隱藏」類別。
- 將 Sass 檔案從 scss/helpers/_screenreaders.scss 改為 scss/helpers/_visually-hidden.scss
- 將 .sr-only 和 .sr-only-focusable 重新命名為 .visually-hidden 和 .visually-hidden-focusable
- 將 sr-only() 和 sr-only-focusable() mixins 重新命名為 visually-hidden() 和 visually-hidden-focusable()。
bootstrap-utilities.css 現在也包含我們的輔助類別。輔助類別不再需要在自訂建置中匯入。

JavaScript

移除了 jQuery 依賴並將外掛重寫為一般 JavaScript。
破壞性變更所有 JavaScript 外掛的 data 屬性現在都有命名空間，以幫助區分 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 配置作為參數，以便您可以以自己的方式合併此預設配置。適用於下拉選單、popovers 和 tooltips。
fallbackPlacements 的預設值已改為 ['top', 'right', 'bottom', 'left']，以更好地放置 Popper 元素。適用於下拉選單、popovers 和 tooltips。
從公開靜態方法中移除了底線，例如 _getInstance() → getInstance()。
移除了 util.js，其功能現在整合到各個外掛中。如果您之前手動包含 util.js，可以安全地移除它，因為它不再需要。每個外掛現在只包含它需要的工具，增強了模組化並減少了依賴。

遷移至 v5（Migrating to v5）

v5.3.6

依賴項（Dependencies）

v5.3.0

輔助類別（Helpers）

通用類別（Utilities）

v5.3.0-alpha2

CSS 變數（CSS variables）

色彩模式（Color modes）

排版（Typography）

元件（Components）

輔助類別（Helpers）

通用類別（Utilities）

文件（Docs）

工具（Tooling）

v5.3.0-alpha1

色彩模式！（Color modes!）

CSS 變數（CSS variables）

元件（Components）

警告訊息（Alert）

列表群組（List group）

下拉選單（Dropdowns）

關閉按鈕（Close button）

導覽列（Navbar）

進度條（Progress bars）

表單（Forms）

通用類別（Utilities）

v5.2.0

設計更新（Refreshed design）

更多 CSS 變數（More CSS variables）

新的 _maps.scss

新的通用類別（New utilities）

其他變更（Additional changes）

v5.1.0

v5.0.0

依賴項（Dependencies）

瀏覽器支援（Browser support）

文件變更（Documentation changes）

Sass

色彩系統（Color system）

格線系統更新（Grid updates）

內容、Reboot 等（Content, Reboot, etc）

RTL

表單（Forms）

元件（Components）

手風琴（Accordion）

警告訊息（Alerts）

標記（Badges）

麵包屑導覽（Breadcrumbs）

按鈕（Buttons）

卡片（Card）

輪播（Carousel）

關閉按鈕（Close button）

摺疊（Collapse）

下拉選單（Dropdowns）

Jumbotron

列表群組（List group）

導覽與分頁（Navs and tabs）

導覽列（Navbars）

側邊面板（Offcanvas）

分頁（Pagination）

彈出提示框（Popovers）

載入圖示（Spinners）

通知訊息（Toasts）

工具提示框（Tooltips）

通用類別（Utilities）

輔助類別（Helpers）

JavaScript

新的 `_maps.scss`