遷移到 v5

v5.3.0

如果您從我們 v5.3.0 的先前 alpha 版本進行遷移，請檢閱其變更，並加上此區段。

輔助程式

• 彩色連結 再次具有 !important，因此它們可以與我們新增加的連結工具程式搭配得更好。

工具程式

• 新增 .d-inline-grid 顯示工具程式。

v5.3.0-alpha2

如果您從我們 v5.3.0 的先前 alpha 版本進行遷移，請檢閱下列變更。

CSS 變數

• 移除數個重複且未使用的根部 CSS 變數。

色彩模式

• 深色模式色彩現在會從我們的 Sass 主題色彩（例如，$primary）衍生，而不是特定色調或陰影（例如，$blue-300）。這允許在自訂預設主題色彩時，更自動化地進行深色模式。

• 新增 Sass 地圖，以產生深色模式文字、細微背景和細微邊框的主題色彩。

• 片段範例 現在已準備好進入深色模式，並更新標記和減少自訂樣式。

• 新增 color-scheme: dark 至深色模式 CSS，以變更作業系統層級控制項，例如捲軸列

• 表單驗證 border-color 和文字 color 狀態現在會回應深色模式，這要歸功於新的 Sass 和 CSS 變數。

• 放棄最近新增的表單控制項背景 CSS 變數，並重新指派 Sass 變數，以改用 CSS 變數。這簡化了色彩模式的樣式設定，並避免了深色模式中表單控制項無法正確更新的問題。

• 我們的 box-shadow 在深色模式下將再次保持深色，而不是反轉為白色。

• 改進了色彩模式切換腳本的 HTML 和 JavaScript。已改進用於變更有效 SVG 的選取器，並使用 ARIA 屬性讓標記更易於存取。

• 改進文件代碼語法色彩，並在明暗模式中增加更多色彩。

字體排印

• 我們不再為深色模式設定 $headings-color-dark 或 --bs-heading-color 的色彩。為避免元件中標題出現錯誤色彩的若干問題，我們已將 Sass 變數設定為 null，並加入一個 null 檢查，就像我們在預設明色模式中使用的一樣。

元件

• 卡片現在有一個 color 設定在它們上面，以改善在色彩模式中的呈現。

• 為我們的導覽加入新的 .nav-underline 變體，在有效導覽連結下方有一個更簡單的底部邊框。 查看文件以取得範例。

• 導覽現在有新的 :focus-visible 樣式，更能符合我們的自訂按鈕焦點樣式。

輔助工具

• 加入新的 .icon-link 輔助工具，以快速放置和對齊 Bootstrap 圖示與文字連結。圖示連結也支援我們新的連結公用程式。

• 加入新的焦點環輔助工具，以移除預設的 outline 並設定自訂的 box-shadow 焦點環。

公用程式

• 將 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 取代。

文件

• 範例現在會根據我們文件中的設定，顯示適當的淺色或深色模式。每個範例都有個別的顏色模式選擇器。

• 改善內含的 JavaScript 以進行即時 Toast 示範。

• 將 twbs/examples 儲存庫內容新增至範例頁面的上方。

工具

• 透過 True 新增 SCSS 測試，以協助測試我們的公用程式 API 和其他自訂設定。

• 已將 bootstrap-npm-starter 專案的執行個體替換為較新且更完整的 twbs/examples 儲存庫。

如需完整變更清單，請參閱 GitHub 上的 v5.3.0-alpha2 專案。

v5.3.0-alpha1

顏色模式！

請閱讀新的 顏色模式文件 以深入了解。

• 全球支援淺色（預設）和深色模式。在 :root 元素、帶有包裝類別的元素和元件群組，或直接在元件上設定全域色彩模式，使用 data-bs-theme="light|dark"。此外還包含一個新的 color-mode() 混合，可以根據你的喜好輸出帶有 data-bs-theme 選擇器或媒體查詢的規則集。

  已棄用色彩模式取代元件的深色變體，因此 .btn-close-white、.carousel-dark、.dropdown-menu-dark 和 .navbar-dark 已棄用。

• 新的延伸色彩系統。我們新增了新的主題色彩（但不在 $theme-colors 中），以獲得更細緻的系統範圍色彩調色盤，其中包含新的次要、三級和重點色彩，用於 color 和 background-color。這些新色彩可用作 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 變數，儘管我們在媒體查詢中不使用它們，因為它們不受支援。但是，這些在特定於 JS 的內容中可能很有用。

• 根據色彩模式更新，我們新增了新的公用程式，用於新的 Sass CSS 變數 secondary 和 tertiary 文字和背景色彩，加上 {color}-bg-subtle、{color}-border-subtle 和 {color}-text-emphasis，用於我們的色彩主題。這些新色彩可透過 Sass 和 CSS 變數（但不是我們的色彩對應）取得，其明確目標是讓自訂化跨越多種色彩模式（例如淺色和深色）變得更容易。

• 新增警示、.btn-close 和 .offcanvas 的變數。

• --bs-heading-color 變數回歸，並支援深色模式。首先，我們現在會先檢查關聯的 Sass 變數 $headings-color 是否為 null，然後再試著輸出 CSS 變數，因此預設情況下，它不會存在於編譯後的 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 現在用於更多元件，以更精確控制預設的整體樣式。

• 新增新的根 CSS 變數，用於我們的 box-shadow，包括 --bs-box-shadow、--bs-box-shadow-sm、--bs-box-shadow-lg 和 --bs-box-shadow-inset。

元件

警示

• 警示變體現在透過 CSS 變數來設定樣式。

• 已棄用 alert-variant() 混用現在已棄用。我們現在直接使用 Sass 迴圈來修改每個變體的元件預設 CSS 變數。

列表群組

• 列表群組項目變體現在透過 CSS 變數來設定樣式。

• 已棄用 list-group-item-variant() 混用現在已棄用。我們現在直接使用 Sass 迴圈來修改每個變體的元件預設 CSS 變數。

下拉選單

• 已棄用 .dropdown-menu-dark 類別已棄用，並已替換為下拉選單或任何父元素上的 data-bs-theme="dark"。 查看文件範例。

關閉按鈕

• 已棄用 .btn-close-white 類別已棄用，並已替換為關閉按鈕或任何父元素上的 data-bs-theme="dark"。 查看文件範例。

導覽列

• 已棄用 .navbar-dark 類別已棄用，並已替換為導覽列或任何父元素上的 data-bs-theme="dark"。 查看文件以取得更新範例。

進度條

v5.3.0 中 進度條 的標記已更新。由於將 role 和各種 aria- 屬性置於內部 .progress-bar 元素上，有些螢幕閱讀器並未宣布零值進度條。現在，role="progressbar" 和相關的 aria-* 屬性位於外部 .progress 元素上，讓 .progress-bar 純粹用於條狀圖和標籤的視覺呈現。

雖然我們建議採用新的標記以改善與所有螢幕閱讀器的相容性，但請注意，舊版進度條結構將持續以過往方式運作。

<!-- Previous markup -->
<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>

<!-- New markup -->
<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 類別，以更合乎邏輯地將 多個進度條 包裝成一個堆疊式進度條。

<!-- Previous markup -->
<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>

<!-- New markup -->
<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>

表單

• .form-control 現在採用 CSS 變數進行樣式設定，以支援色彩模式。這包括新增兩個新的根部 CSS 變數，用於預設和已停用的表單控制背景。

• .form-check 和 .form-switch 元件現在使用 CSS 變數來設定 background-image。此處的使用方式與其他元件不同，在於每個元件的各種焦點、作用中等等狀態並未設定在基本類別上。相反地，這些狀態會覆寫一個變數（例如：--bs-form-switch-bg）。

• 浮動表單標籤現在具有 background-color，以修正對 <textarea> 元素的支援。此外，還進行了其他變更，以支援已停用的狀態等。

• 修正了在基於 WebKit 的瀏覽器中顯示日期和時間輸入。

工具程式

• 已棄用 .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-* 工具程式，用於 z-index。

• 方塊陰影工具程式（和 Sass 變數）已針對暗色模式更新。它們現在使用 --bs-body-color-rgb 來產生 rgba() 色彩值，讓它們能根據指定的 foreground 色彩輕鬆適應色彩模式。

如需變更的完整清單，請參閱 GitHub 上的 v5.3.0 專案。

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。它從 _variables.scss 中提取了多個 Sass 地圖，以修正更新原始地圖時未套用至延伸該地圖的次要地圖的問題。例如，對 $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

新的工具程式

• 擴充 font-weight 工具程式，以納入 .fw-semibold，用於半粗體字型。
• 擴充 border-radius 工具程式，以納入兩種新尺寸，.rounded-4 和 .rounded-5，提供更多選項。

其他變更

• 引入了新的 $enable-container-classes 選項。—現在，當選擇加入實驗性的 CSS Grid 版面時，.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} 輔助工具。您現在可以使用 .text-bg-* 輔助工具 設定 background-color 與對比的前景 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 外掛現在支援 水平摺疊。—將 .collapse-horizontal 加入您的 .collapse 以摺疊 width 而不是 height。透過設定 min-height 或 height 來避免瀏覽器重新繪製。

• 已新增新的堆疊和垂直規則輔助工具。—透過 堆疊 快速套用多個彈性盒模型屬性，以快速建立自訂配置。從水平 (.hstack) 和垂直 (.vstack) 堆疊中選擇。使用 新的 .vr 輔助工具 加入類似於 <hr> 元素的垂直分隔線。

• 已新增新的全域 :root CSS 變數。—已新增幾個新的 CSS 變數至 :root 層級，以控制 <body> 樣式。還有更多正在製作中，包括我們的公用程式和元件，但目前請參閱 自訂區段中的 CSS 變數。

• 已全面檢修顏色和背景公用程式以使用 CSS 變數，並已新增 文字不透明度 和 背景不透明度 公用程式。—.text-* 和 .bg-* 公用程式現在使用 CSS 變數和 rgba() 顏色值建置，讓您可以輕鬆使用新的不透明度公用程式自訂任何公用程式。

• 新增範例片段，說明如何自訂我們的元件。—透過我們新的 範例片段，拉取可立即使用的自訂元件和其他常見設計模式。包含 頁尾、下拉式選單、清單群組 和 對話框。

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

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

v5.0.0

相依性

• 已移除 jQuery。
• 已從 Popper v1.x 升級到 Popper v2.x。
• 已將 Libsass 取代為 Dart Sass 作為我們的 Sass 編譯器，因為 Libsass 已棄用。
• 已從 Jekyll 移轉到 Hugo 來建置我們的文件

瀏覽器支援

• 已移除 Internet Explorer 10 和 11
• 已移除 Microsoft Edge < 16（舊版 Edge）
• 已移除 Firefox < 60
• 已移除 Safari < 12
• 已移除 iOS Safari < 12
• 已移除 Chrome < 60

文件變更

• 已重新設計首頁、文件版面和頁尾。
• 已新增 新的 Parcel 指南。
• 已新增 新的自訂區段，取代 v4 的主題頁面，並提供 Sass、全域組態選項、色彩配置、CSS 變數等更多新詳細資訊。
• 將所有表單文件重新整理到 新的表單區段，將內容拆分為更聚焦的頁面。
• 類似地，更新 版面配置區段，以更清楚地說明網格內容。
• 將「導覽列」元件頁面重新命名為「導覽列和標籤頁」。
• 將「核取方塊」頁面重新命名為「核取方塊和選項按鈕」。
• 重新設計導覽列，並新增一個子導覽列，讓您更容易瀏覽我們的網站和文件版本。
• 為搜尋欄位新增新的鍵盤快速鍵：Ctrl + /。

Sass

• 我們放棄了預設的 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）。
  • 類似地，media-breakpoint-between() 中的第二個參數也使用中斷點本身，而不是下一個中斷點（例如，media-breakpoint-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-* 類別。

• 重大變更 移除了先前已棄用的混入：

  • 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-shadow 混入現在允許 null 值，並從多個參數中刪除 none。 參閱 #30394。

• border-radius() 混入現在有預設值。

顏色系統

• 使用 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 以上。所有其他斷點皆無變更。

• 改善間距。間距現在以 rem 設定，且比 v4（1.5rem，約 24px，低於 30px）更窄。這讓我們的格線系統間距與我們的間距工具程式保持一致。

  • 新增 間距類別（.g-*、.gx-* 和 .gy-*）來控制水平/垂直間距、水平間距和垂直間距。
  • 重大變更將 .no-gutters 重新命名為 .g-0，以符合新的間距工具程式。

• 欄不再套用 position: relative，因此您可能需要將 .position-relative 新增至某些元素，以復原該行為。

• 重大變更 移除數個經常未使用的 .order-* 類別。我們現在僅提供 .order-1 到 .order-5。

• 重大變更 移除 .media 元件，因為它可以用工具程式輕鬆複製。 請參閱 #28265 和 彈性工具程式頁面以取得範例。

• 重大變更 bootstrap-grid.css 現在只對欄套用 box-sizing: border-box，而不是重設全域 box-sizing。這樣一來，我們的網格樣式可以在更多地方使用，而不會受到干擾。

• $enable-grid-classes 不再停用產生容器類別。 請參閱 #29146。

• 更新 make-col 混入，預設為沒有指定大小的等寬欄。

內容、重新啟動等

• RFS 現在預設啟用。使用 font-size() 混入的標題會自動調整其 font-size 以配合視窗大小。此功能在 v4 之前需要選用。

• 重大變更 徹底修改我們的顯示字體，以取代我們的 $display-* 變數，並使用 $display-font-sizes Sass 對應。同時移除個別的 $display-*-weight 變數，改用單一的 $display-font-weight，並調整 font-size。

• 新增兩個新的 .display-* 標題大小，.display-5 和 .display-6。

• 連結預設為底線（不只是滑鼠移入時），除非它們是特定元件的一部分。

• 重新設計表格，更新其樣式，並使用 CSS 變數重建它們，以更靈活地控制樣式。

• 重大變更 巢狀表格不再繼承樣式。

• 重大變更 移除 .thead-light 和 .thead-dark，改用 .table-* 變異類別，這些類別可用於所有表格元素（thead、tbody、tfoot、tr、th 和 td）。

• 重大變更 table-row-variant() 混入已重新命名為 table-variant()，且僅接受 2 個參數：$color（顏色名稱）和 $value（顏色代碼）。邊框顏色和重點顏色會根據表格因子變數自動計算。

• 將表格儲存格內距變數拆分為 -y 和 -x。

• 重大變更 已移除 .pre-scrollable 類別。 請參閱 #29135

• 重大變更 .text-* 工具程式不再會為連結新增滑鼠移入和焦點狀態。可改用 .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 媒體查詢要求減少動作的使用者除外。 請參閱 #31877

RTL

• 特定於水平方向的變數、工具程式和混入已全部重新命名，以使用邏輯屬性，例如在彈性盒狀配置中找到的屬性，例如使用 start 和 end 代替 left 和 right。

表單

• 新增浮動表單！我們已將浮動標籤範例提升為完全支援的表單元件。 請參閱新的浮動標籤頁面。

• 中斷 合併原生和自訂表單元素。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 新增為輸入群組的直接子項。

• 長期的 具有驗證回饋的輸入群組缺少邊框半徑的錯誤 終於透過在具有驗證的輸入群組中新增一個 .has-validation 類別而得到修正。

• 中斷 已移除網格系統的表單特定版面配置類別。請使用我們的網格和工具程式，而不是 .form-group、.form-row 或 .form-inline。

• 中斷 表單標籤現在需要 .form-label。

• 中斷 .form-text 不再設定 display，讓您可以透過變更 HTML 元素來建立內嵌或區塊說明文字。

• 表單控制項在可能的情況下不再使用固定的 height，而是改用 min-height 來改善自訂化和與其它元件的相容性。

• 驗證圖示不再套用於具有 multiple 的 <select>。

• 重新排列在 scss/forms/ 下的 Sass 原始檔案，包括輸入群組樣式。

元件

• 統一警示、麵包屑、卡片、下拉式選單、列表群組、對話框、彈出框和工具提示的 padding 值，以我們的 $spacer 變數為基礎。 請參閱 #30564。

手風琴

• 新增 新的手風琴元件。

警示

• 警示現在有 帶有圖示的範例。

• 移除每個警示中 <hr> 的自訂樣式，因為它們已經使用 currentColor。

徽章

• 重大變更移除所有背景公用程式 .badge-* 顏色類別（例如，使用 .bg-primary 取代 .badge-primary）。

• 重大變更移除 .badge-pill，改用 .rounded-pill 公用程式。

• 重大變更移除 <a> 和 <button> 元素的 hover 和 focus 樣式。

• 將徽章的預設內距從 .25em/.5em 增加到 .35em/.65em。

麵包屑

• 透過移除 padding、background-color 和 border-radius，簡化麵包屑的預設外觀。

• 新增新的 CSS 自訂屬性 --bs-breadcrumb-divider，以便輕鬆自訂，而無需重新編譯 CSS。

按鈕

• 重大變更 切換按鈕，包含核取方塊或選項按鈕，不再需要 JavaScript，並有新的標記。我們不再需要包裝元素，將 .btn-check 加入到 <input>，並在 <label> 上與任何 .btn 類別配對。 請參閱 #30650。此文件已從我們的按鈕頁面移至新的表單區段。

• 重大變更 已移除公用程式中的 .btn-block。請勿在 .btn 上使用 .btn-block，改用 .d-grid 和 .gap-* 公用程式包裝按鈕，以根據需要為按鈕間距。切換至回應式類別，以進一步控制按鈕。 閱讀文件以取得一些範例。

• 已更新我們的 button-variant() 和 button-outline-variant() 混入，以支援其他參數。

• 已更新按鈕，以確保在滑鼠移入和按鈕作用中狀態時，對比度增加。

• 已停用的按鈕現在有 pointer-events: none;。

卡片

• 重大變更 已移除 .card-deck，改用我們的格線。將卡片包裝在欄位類別中，並加入父 .row-cols-* 容器，以重新建立卡片組（但能更靈活地控制回應式對齊）。

• 重大變更 已移除 .card-columns，改用 Masonry。 請參閱 #28922。

• 重大變更 已將基於 .card 的手風琴，替換為 新的手風琴元件。

輪播

• 新增 .carousel-dark 變體，用於深色文字、控制項和指標（非常適合較淺的背景）。

• 使用來自 Bootstrap Icons 的新 SVG，取代旋轉木馬控制項的箭頭圖示。

關閉按鈕

• 重大變更 將 .close 重新命名為 .btn-close，以使用較不通用的名稱。

• 關閉按鈕現在使用 background-image（內嵌 SVG），而不是 HTML 中的 ×，讓您能更輕鬆地自訂，而無需變更標記。

• 新增 .btn-close-white 變體，使用 filter: invert(1)，讓您能針對較深的背景使用對比度較高的關閉圖示。

收合

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

下拉選單

• 新增 .dropdown-menu-dark 變體和相關變數，用於依需求顯示深色下拉選單。

• 新增 $dropdown-padding-x 變數。

• 加深下拉選單分隔線，以改善對比度。

• 重大變更 下拉選單的所有事件現在都會觸發在下拉選單切換按鈕上，然後再傳遞到父元素。

• 當下拉選單定位為靜態，或下拉選單在導覽列中時，下拉選單選單現在會設定 data-bs-popper="static" 屬性。這是由我們的 JavaScript 新增的，有助於我們使用自訂定位樣式，而不會干擾 Popper 的定位。

• 重大變更 捨棄下拉選單外掛程式的 flip 選項，改用原生 Popper 設定。您現在可以傳遞一個空陣列給 fallbackPlacements 選項，來停用翻轉行為，在 flip 修飾詞中。

• 下拉選單選單現在可以使用新的 autoClose 選項按一下，以處理 自動關閉行為。您可以使用此選項，接受在下拉選單選單內或外部按一下，讓它具有互動性。

• 下拉選單現在支援以 <li> 包住的 .dropdown-item。

巨型按鈕

• 重大變更 移除巨型按鈕元件，因為它可以使用工具程式複製。 查看我們的巨型按鈕範例以取得示範。

清單群組

• 新增 .list-group-numbered 修飾詞 至清單群組。

導覽和標籤頁

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

導覽列

• 重大變更 導覽列現在需要一個容器（大幅簡化間距需求和所需的 CSS）。
• 重大變更 .active 類別不再能套用至 .nav-item，它必須直接套用在 .nav-link 上。

側邊欄

• 新增 側邊欄元件。

分頁

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

• 新增分頁連結的 transition。

提示框

• 重大變更 在我們的預設提示框範本中將 .arrow 重新命名為 .popover-arrow。

• 將 whiteList 選項重新命名為 allowList。

旋轉指示器

• Spinner 現在會尊重 `prefers-reduced-motion: reduce`，並減慢動畫速度。 請參閱 #31882。

• 改善 spinner 的垂直對齊。

Toast

• Toast 現在可以在 `toast-container` 中使用 定位工具進行 定位。

• 將預設 toast 持續時間變更為 5 秒。

• 從 toast 中移除 `overflow: hidden`，並以適當的 `border-radius` 取代，並搭配 `calc()` 函數使用。

Tooltip

• 重大變更 在預設 tooltip 範本中，將 `arrow` 改名為 `tooltip-arrow`。

• 重大變更 `fallbackPlacements` 的預設值變更為 `['top', 'right', 'bottom', 'left']`，以改善 popper 元素的定位。

• 重大變更 將 `whiteList` 選項改名為 `allowList`。

工具

• 重大變更 將多個工具改名為使用邏輯屬性名稱，而非方向名稱，並加入 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`。

• 重大變更 預設停用負邊界。

• 新增 `bg-body` 類別，可快速將 `<body>` 的背景設定為其他元素。

• 新增 定位工具，可設定 `top`、`right`、`bottom` 和 `left`。每個屬性的值包括 `0`、`50%` 和 `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-italic 工具重新命名為 .fst-italic，以簡潔和與新的 .fst-normal 工具一致。

• 新增 .d-grid 以顯示工具和新的 gap 工具（.gap），用於 CSS Grid 和 flexbox 版面。

• 重大變更 移除了 .rounded-sm 和 rounded-lg，並引入了新的類別比例，.rounded-0 到 .rounded-3。 參閱 #31687。

• 新增新的 line-height 工具：.lh-1、.lh-sm、.lh-base 和 .lh-lg。請參閱 這裡。

• 將 .d-none 工具移至我們的 CSS 中，以賦予它比其他顯示工具更大的權重。

• 擴充 .visually-hidden-focusable 輔助工具，以使用 :focus-within 在容器上也能運作。

輔助工具

• 重大變更 回應式嵌入輔助工具已重新命名為 比例輔助工具，並具有新的類別名稱和改善的行為，以及有用的 CSS 變數。

  • 類別已重新命名，將長寬比中的 by 變更為 x。例如，.ratio-16by9 現在為 .ratio-16x9。
  • 我們已捨棄 .embed-responsive-item 和元素群組選擇器，轉而採用更簡潔的 .ratio > * 選擇器。不再需要類別，而且比例輔助程式現在可與任何 HTML 元素搭配使用。
  • $embed-responsive-aspect-ratios Sass 映射已重新命名為 $aspect-ratios，其值已簡化，以包含類別名稱和百分比，作為 key: value 配對。
  • 現在會為 Sass 映射中的每個值產生並包含 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() mixin 重新命名為 visually-hidden() 和 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 元素的放置。適用於下拉式選單、彈出提示和工具提示。

• 從 public 靜態方法中移除底線，例如 _getInstance() → getInstance()。