GitHubで参照

v5への移行

Bootstrapのソースファイル、ドキュメント、コンポーネントへの変更点を追跡して確認し、v4からv5への移行を支援します。

このページの内容

v5.3.0

v5.3.0の以前のアルファリリースから移行する場合は、このセクションに加えて、それらの変更点を確認してください。

ヘルパー

カラーリンクには再び`!important` が含まれるため、新しく追加されたリンクユーティリティとの互換性が向上しています。

ユーティリティ

新しい`d-inline-grid` 表示ユーティリティを追加しました。

v5.3.0-alpha2

v5.3.0の以前のアルファリリースから移行する場合は、以下にリストされている変更点を確認してください。

CSS変数

いくつかの重複した未使用のルートCSS変数を削除しました。

カラーモード

ダークモードの色は、特定の色合いや濃淡（例：`$blue-300`）ではなく、Sassのテーマカラー（例：`$primary`）から派生するようになりました。これにより、デフォルトのテーマカラーをカスタマイズする場合、より自動化されたダークモードが可能になります。
ダークモードのテキスト、微妙な背景、微妙なボーダーのテーマカラーを生成するためのSassマップを追加しました。
スニペットの例は、更新されたマークアップとカスタムスタイルの削減により、ダークモードに対応できるようになりました。
スクロールバーなどのOSレベルのコントロールを変更するために、ダークモードのCSSに`color-scheme: dark` を追加しました。
新しいSassとCSSの変数のおかげで、フォームバリデーションの`border-color` とテキストの`color` の状態はダークモードに対応するようになりました。
最近追加されたフォームコントロールの背景CSS変数を削除し、代わりにSass変数をCSS変数を使用するように再割り当てしました。これにより、カラーモード全体でのスタイルが簡素化され、ダークモードのフォームコントロールが正しく更新されないという問題が回避されます。
当社の`box-shadow` は、ダークモードでも白に反転するのではなく、常にダークのままになります。
カラーモード切り替えスクリプトのHTMLとJavaScriptを改善しました。アクティブなSVGを変更するためのセレクターが改善され、ARIA属性でマークアップのアクセシビリティが向上しました。
ライトモードとダークモード全体で、ドキュメントコードの構文カラーなどを改善しました。

タイポグラフィ

ダークモードで`$headings-color-dark` や`--bs-heading-color` の色を設定しなくなりました。コンポーネント内の見出しの色が間違って表示されるいくつかの問題を回避するために、Sass変数を`null` に設定し、デフォルトのライトモードで使用しているような`null` チェックを追加しました。

コンポーネント

カードには、カラーモード全体でのレンダリングを改善するために`color` が設定されるようになりました。
アクティブなナビゲーションリンクの下にシンプルな下線を追加したナビゲーションに、新しい`.nav-underline` バリアントを追加しました。例についてはドキュメントを参照してください。
ナビゲーションには、カスタムボタンのフォーカススタイルとよりよく一致する新しい`:focus-visible` スタイルが追加されました。

ヘルパー

Bootstrapアイコンをテキストリンクと共にすばやく配置および整列するための新しい`.icon-link` ヘルパーを追加しました。アイコンリンクは、新しいリンクユーティリティもサポートしています。
デフォルトの`outline` を削除し、カスタム`box-shadow` フォーカスリングを設定するための新しいフォーカスリングヘルパーを追加しました。

ユーティリティ

SassとCSSの変数`${color}-text` を関連するユーティリティに合わせて`${color}-text-emphasis` に名前変更しました。
カラーリンクと共に新しい`.link-body-emphasis` ヘルパーを追加しました。これにより、カラーモードに対応した強調表示色を使用してカラーリンクを作成できます。
リンクカラーの不透明度、下線のオフセット、下線のカラー、下線の不透明度のための新しいリンクユーティリティを追加しました。新しいリンクユーティリティをご覧ください。
CSS変数に基づく`border-width` ユーティリティは、ネストされた要素（テーブルを含む）全体での継承の問題を回避するために、プロパティを直接設定するように戻されました（v5.2.0より前に行われていたように）。
`.text-black` と`.bg-black` ユーティリティに合わせて、新しい`.border-black` ユーティリティを追加しました。
非推奨 `.text-muted` ユーティリティと`$text-muted` Sass変数を非推奨としました。`.text-body-secondary` と`$body-secondary-color` に置き換えられました。

ドキュメント

例は、ドキュメントの設定で指定された適切なライトまたはダークカラーモードで表示されるようになりました。各例には、個別のカラーモードピッカーがあります。
ライブトーストデモのJavaScriptを改善しました。
例ページの先頭に`twbs/examples` リポジトリのコンテンツを追加しました。

ツール

ユーティリティAPIやその他のカスタマイズのテストを支援するために、Trueを介してSCSSテストを追加しました。
bootstrap-npm-starterプロジェクトのインスタンスを、より新しく完全なtwbs/examplesリポジトリに置き換えました。

変更点の完全なリストについては、GitHubのv5.3.0-alpha2プロジェクトを参照してください。

v5.3.0-alpha1

カラーモード！

新しいカラーモードドキュメントを読んで詳細をご覧ください。

**ライト（デフォルト）とダークカラーモードのグローバルサポート。** `:root` 要素、ラッパークラスを使用して要素とコンポーネントのグループ、またはコンポーネントに直接`data-bs-theme="light|dark"` を使用して、グローバルにカラーモードを設定します。また、設定によっては`data-bs-theme` セレクターまたはメディアクエリでルールセットを出力できる新しい`color-mode()` ミキシンも含まれています。

非推奨カラーモードはコンポーネントのダークバリアントに置き換わるため、`.btn-close-white`、`.carousel-dark`、`.dropdown-menu-dark`、`.navbar-dark` は非推奨です。
**新しい拡張カラーシステム。** よりニュアンスのあるシステム全体のカラーパレットのために、`color` と`background-color` に新しいセカンダリ、ターシャリ、強調色のテーマカラーを追加しました（ただし、`$theme-colors` には含まれていません）。これらの新しいカラーは、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 変数が更新され、ダークモードのサポートが追加されました。まず、CSS変数を出力する前に、関連付けられたSass変数$headings-colorのnull値をチェックするようになりました。そのため、デフォルトではコンパイルされたCSSに存在しません。次に、フォールバック値inheritを使用してCSS変数を適用することで、元の動作を維持しつつ、上書きを可能にしました。
リンクの色付けにCSS変数を使用するように変換されました（text-decorationは除く）。色は--bs-link-color-rgbと--bs-link-opacityを使用してrgba()カラーで設定されるため、透過度を簡単にカスタマイズできます。a:hover疑似クラスは、colorプロパティを明示的に設定するのではなく、--bs-link-color-rgbを上書きするようになりました。
--bs-border-widthがより多くのコンポーネントで使用されるようになり、デフォルトのグローバルスタイルをより細かく制御できるようになりました。
box-shadowに新しいルートCSS変数（--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で更新されました。内部の.progress-bar要素へのroleおよび様々なaria-属性の配置により、**一部のスクリーンリーダーが値がゼロのプログレスバーを読み上げませんでした**。現在、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変数を使用してスタイル設定されるようになりました。これには、デフォルトと無効なフォームコントロールの背景のための2つの新しいルートCSS変数の追加が含まれます。
.form-checkと.form-switchコンポーネントは、background-imageを設定するためのCSS変数を使用して構築されるようになりました。ここでの使い方は、他のコンポーネントとは異なり、各コンポーネントのフォーカス、アクティブなどの様々な状態は基本クラスには設定されていません。代わりに、状態は1つの変数（例：--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>をコンテナに適合させる方法を指定するために使用され、サイズ変更可能なfill/fit画像にbackground-imageを使用するレスポンシブな代替手段を提供します。
新しい.fw-mediumユーティリティを追加しました。
z-index用の新しい.z-*ユーティリティを追加しました。
ボックスシャドウユーティリティ（とSass変数）がダークモード用に更新されました。--bs-body-color-rgbを使用してrgba()カラー値を生成するようになり、指定された前景カラーに基づいてカラーモードに簡単に適応できるようになりました。

変更の完全なリストについては、GitHubのv5.3.0プロジェクトを参照してください。

v5.2.0

デザインの刷新

Bootstrap v5.2.0では、プロジェクト全体でいくつかのコンポーネントとプロパティのデザインが微妙に更新され、**特にボタンとフォームコントロールのborder-radius値が改良されました**。ドキュメントも新しいホームページ、サイドバーのセクションが折りたたまれない簡素化されたドキュメントレイアウト、そしてBootstrap Iconsのより目立つ例で更新されました。

CSS変数の追加

すべてのコンポーネントがCSS変数を使用するように更新されました。Sassは依然としてすべてを支えていますが、各コンポーネントはコンポーネントの基本クラス（例：.btn）にCSS変数を含めるように更新され、Bootstrapのカスタマイズをよりリアルタイムで行えるようになりました。今後のリリースでは、レイアウト、フォーム、ヘルパー、ユーティリティにもCSS変数の使用を拡大していきます。各コンポーネントのCSS変数については、それぞれのドキュメントページを参照してください。

Bootstrap 6まで、CSS変数の使用は不完全です。全面的に実装したいところですが、破壊的変更を引き起こすリスクがあります。たとえば、ソースコードで$alert-border-width: var(--bs-border-width)を設定すると、何らかの理由で$alert-border-width * 2を実行していた場合、独自のコードで潜在的なSassが壊れます。

そのため、可能な限り、より多くのCSS変数を導入していきますが、v5での実装は多少限定的であることをご了承ください。

新しい`_maps.scss`

Bootstrap v5.2.0では、_maps.scssという新しいSassファイルが導入されました。これは、元のマップの更新がそれを拡張するセカンダリマップに適用されないという問題を解決するために、_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ユーティリティを拡張して、より多くのオプションのために2つの新しいサイズ.rounded-4と.rounded-5を含めました。

その他の変更点

新しい$enable-container-classesオプションを導入しました。—実験的なCSSグリッドレイアウトを選択した場合、このオプションがfalseに設定されていない限り、.container-*クラスは依然としてコンパイルされます。コンテナは、ガター値も保持するようになりました。
オフキャンバスコンポーネントにレスポンシブなバリエーションが追加されました。元の.offcanvasクラスは変更されません。すべてのビューポートでコンテンツを非表示にします。レスポンシブにするには、その.offcanvasクラスを任意の.offcanvas-{sm|md|lg|xl|xxl}クラスに変更します。
より太いテーブルの仕切り線は、オプトインになりました。—テーブルグループ間のより太く、上書きが困難なボーダーを削除し、適用できるオプションのクラス.table-group-dividerに移動しました。例についてはテーブルのドキュメントを参照してください。
Scrollspyが書き直されました。Intersection Observer APIを使用するようになったため、相対的な親ラッパーが不要になり、offset設定が非推奨になり、その他多くの変更があります。Scrollspyの実装がより正確で一貫性のあるナビゲーションの強調表示になることを期待してください。
ポップオーバーとツールチップは、CSS変数を使用するようになりました。変数の数を減らすために、一部のCSS変数がSassの対応物から更新されました。その結果、このリリースでは3つの変数が非推奨になりました。$popover-arrow-color、$popover-arrow-outer-color、$tooltip-arrow-colorです。
新しい.text-bg-{color}ヘルパーを追加しました。個々の.text-*と.bg-*ユーティリティを設定する代わりに、.text-bg-*ヘルパーを使用して、コントラストのある前景の色を持つ背景色を設定できるようになりました。
ラベルと関連付けられたチェックボックス/ラジオの順序を入れ替える.form-check-reverse修飾子を追加しました。
新しい.table-striped-columnsクラスを使用して、テーブルにストライプ状の列のサポートを追加しました。

変更の完全なリストについては、GitHubのv5.2.0プロジェクトを参照してください。

v5.1.0

CSSグリッドレイアウトの実験的なサポートを追加しました。—これは開発中であり、まだ本番環境での使用には準備ができていませんが、Sassを介して新しい機能を選択できます。有効にするには、$enable-grid-classes: falseを設定してデフォルトのグリッドを無効にし、$enable-cssgrid: trueを設定してCSSグリッドを有効にします。
オフキャンバスをサポートするようにナビゲーションバーを更新しました。—レスポンシブな.navbar-expand-*クラスとオフキャンバスマークアップを使用して、任意のナビゲーションバーにオフキャンバスドロワーを追加できます。
新しいプレースホルダーコンポーネントを追加しました。— 最新のコンポーネントです。サイトやアプリで何かがまだ読み込み中であることを示すために、実際のコンテンツの代わりに一時的なブロックを提供する方法です。
折りたたみプラグインが水平方向の折りたたみをサポートするようになりました。— `height`ではなく`width`を折りたたむには、` .collapse`に` .collapse-horizontal`を追加します。`min-height`または`height`を設定することで、ブラウザの再描画を回避します。
新しいスタックと垂直ルールヘルパーを追加しました。— スタックを使用して、複数のflexboxプロパティをすばやく適用し、カスタムレイアウトを簡単に作成できます。水平スタック（`.hstack`）と垂直スタック（`.vstack`）から選択できます。新しい`.vr`ヘルパーを使用して、`<hr>`要素に似た垂直方向の区切り線を追加します。
新しいグローバル` :root` CSS変数を追加しました。— `<body>`スタイルを制御するためのいくつかの新しいCSS変数を` :root`レベルに追加しました。ユーティリティやコンポーネント全体にもう少し追加する予定ですが、現時点ではカスタマイズセクションのCSS変数を参照してください。
CSS変数を使用するようにカラーと背景ユーティリティを全面的に見直し、新しいテキストの不透明度と背景の不透明度ユーティリティを追加しました。— `.text-*`と`.bg-*`ユーティリティは、CSS変数と`rgba()`カラー値を使用して構築されるようになりました。これにより、新しい不透明度ユーティリティを使用して、任意のユーティリティを簡単にカスタマイズできます。
コンポーネントのカスタマイズ方法を示す新しいスニペットの例を追加しました。— 新しいスニペットの例を使用して、すぐに使用できるカスタマイズされたコンポーネントやその他の一般的なデザインパターンを取得できます。フッター、ドロップダウン、リストグループ、モーダルが含まれています。
ポップオーバーとツールチップから使用されていない配置スタイルを削除しました。これらはPopperによってのみ処理されます。`$tooltip-margin`は非推奨となり、その過程で`null`に設定されました。

詳細情報が必要ですか？v5.1.0のブログ投稿をお読みください。

v5.0.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のサポートを終了しました。
Chrome < 60のサポートを終了しました。

ドキュメントの変更点

ホームページ、ドキュメントレイアウト、フッターを再設計しました。
新しいParcelガイドを追加しました。
新しいカスタマイズセクションを追加し、v4のテーマページを置き換えました。Sass、グローバル設定オプション、配色、CSS変数などに関する新しい詳細情報が記載されています。
すべてのフォームドキュメントを新しいフォームセクションに再構成し、コンテンツをより焦点を絞ったページに分割しました。
同様に、レイアウトセクションを更新し、グリッドコンテンツをより明確に説明しました。
「Navs」コンポーネントページの名前を「Navs & Tabs」に変更しました。
「Checks」ページの名前を「Checks & radios」に変更しました。
ナビゲーションバーを再設計し、新しいサブナビゲーションを追加して、サイトとドキュメントのバージョンを簡単に移動できるようにしました。
検索フィールドの新しいキーボードショートカットを追加しました：Ctrl + /

Sass

冗長な値を簡単に削除できるように、デフォルトのSassマップのマージを廃止しました。 `$theme-colors`のようなSassマップですべての値を定義する必要があることに注意してください。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)`は、`lg`より小さいビューポートをターゲットにします）。
- 同様に、`media-breakpoint-between()`の2番目のパラメータも、次のブレークポイントではなく、ブレークポイント自体を使用します（例：`media-breakpoint-between(sm, lg)`は、`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を参照してください。
各ベースカラーについて9つの異なるカラーを提供する、新しいティントとシェードを新しいSass変数として追加しました。
色のコントラストを改善しました。色のコントラスト比を3：1から4.5：1に上げ、WCAG 2.1 AAコントラストを確保するために、青、緑、シアン、ピンクの色を更新しました。また、色のコントラストの色を`$gray-900`から`$black`に変更しました。
カラーシステムをサポートするために、色を適切に混合するための新しいカスタム`tint-color()`関数と`shade-color()`関数を追加しました。

グリッドの更新

新しいブレークポイント！ 1400px以上の`xxl`ブレークポイントを追加しました。他のすべてのブレークポイントに変更はありません。
ガターの改善。 ガターはremで設定されるようになり、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をリセットするのではなく、列に`box-sizing: border-box`のみを適用するようになりました。これにより、グリッドスタイルを干渉することなく、より多くの場所で利用できます。
`$enable-grid-classes`は、コンテナクラスの生成を無効にすることはなくなりました。 #29146を参照してください。
`make-col`ミックスインを、指定されたサイズがない場合に等しい列をデフォルトにするように更新しました。

コンテンツ、リブートなど

RFSがデフォルトで有効になりました。 `font-size()`ミックスインを使用する見出しは、ビューポートに合わせて`font-size`を自動的に調整します。この機能は以前はv4でオプトインでした。
破壊的変更 `$display-*`変数を`$display-font-sizes` Sassマップに置き換えるために、表示タイポグラフィを全面的に見直しました。また、単一の`$display-font-weight`のために個々の`$display-*-weight`変数を削除し、`font-size`を調整しました。
2つの新しい`.display-*`見出しサイズ、`.display-5`と`.display-6`を追加しました。
リンクはデフォルトで下線付きです（ホバー時だけではありません）。特定のコンポーネントの一部でない限り。
スタイルを更新し、CSS変数を使用して再構築して、スタイルをより細かく制御できるように、テーブルを再設計しました。
破壊的変更ネストされたテーブルは、スタイルを継承しなくなりました。
破壊的変更 .thead-light と .thead-dark は廃止され、.table-* のバリアントクラスに置き換えられました。これは全てのテーブル要素 (thead、tbody、tfoot、tr、th、td) で使用できます。
破壊的変更 table-row-variant() ミキシンは table-variant() に名前が変更され、$color (色名) と $value (カラーコード) の2つのパラメータのみを受け付けます。枠線の色とアクセントカラーは、テーブルのファクター変数に基づいて自動的に計算されます。
テーブルセルのパディング変数を -y と -x に分割しました。
破壊的変更 .pre-scrollable クラスを廃止しました。 See #29135
破壊的変更 .text-* ユーティリティは、リンクにホバーとフォーカス状態を追加しなくなりました。代わりに .link-* ヘルパークラスを使用できます。 See #29267
破壊的変更 .text-justify クラスを廃止しました。 See #29793
破壊的変更 <hr> 要素は、size 属性のサポートを向上させるため、border の代わりに height を使用するようになりました。これにより、パディングユーティリティを使用して、より太い区切り線を作成できるようになりました (例: <hr class="py-1">)。
<ul> と <ol> 要素のデフォルトの水平方向の padding-left を、ブラウザのデフォルトの 40px から 2rem にリセットしました。
$enable-smooth-scroll を追加しました。これは、prefers-reduced-motion メディアクエリを通じて低モーションを要求するユーザーを除き、グローバルに scroll-behavior: smooth を適用します。 See #31877

RTL

水平方向に依存する変数、ユーティリティ、およびミキシンはすべて、フレックスボックスレイアウトに見られるものと同様の論理プロパティを使用するように名前が変更されました (例: left と right の代わりに start と end)。

フォーム

新しいフローティングフォームを追加しました！ フローティングラベルの例を完全にサポートされたフォームコンポーネントに昇格させました。新しいフローティングラベルのページをご覧ください。
破壊的変更 ネイティブとカスタムのフォーム要素を統合しました。 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ファイルを再配置し、入力グループスタイルを含めました。

コンポーネント

アラート、パンくずリスト、カード、ドロップダウン、リストグループ、モーダル、ポップオーバー、ツールチップのパディング値を、$spacer 変数に基づいて統一しました。 See #30564.

アコーディオン

新しいアコーディオンコンポーネントを追加しました。

アラート

アラートにアイコンの例が追加されました。
すでに currentColor を使用しているため、各アラートの <hr> のカスタムスタイルを削除しました。

バッジ

破壊的変更背景ユーティリティ用のすべての .badge-* カラークラスを廃止しました (例: .badge-primary の代わりに .bg-primary を使用してください)。
破壊的変更 .badge-pill を廃止しました。代わりに .rounded-pill ユーティリティを使用してください。
破壊的変更 <a> と <button> 要素のホバーとフォーカススタイルを削除しました。
バッジのデフォルトのパディングを .25em/.5em から .35em/.65em に増やしました。

パンくずリスト

padding、background-color、border-radius を削除することで、パンくずリストのデフォルトの外観を簡素化しました。
CSSを再コンパイルする必要なく簡単にカスタマイズできるように、新しいCSSカスタムプロパティ --bs-breadcrumb-divider を追加しました。

ボタン

破壊的変更 トグルボタン (チェックボックスまたはラジオボタン付き) は、JavaScript を必要としなくなり、新しいマークアップになりました。 ラップする要素は不要になり、<input> に .btn-check を追加し、<label> の任意の .btn クラスとペアにします。 See #30650. このドキュメントは、ボタンページから新しいフォームセクションに移動しました。
破壊的変更 ユーティリティの .btn-block を廃止しました。 .btn で .btn-block を使用する代わりに、ボタンを .d-grid でラップし、.gap-* ユーティリティを使用して必要に応じて間隔を調整します。レスポンシブクラスに切り替えることで、さらに詳細な制御が可能になります。いくつかの例についてはドキュメントを参照してください。
追加のパラメータをサポートするように、button-variant() と button-outline-variant() ミキシンを更新しました。
ホバー状態とアクティブ状態のコントラストを高めるためにボタンを更新しました。
無効になったボタンは pointer-events: none; を持つようになりました。

カード

破壊的変更グリッドに代えて .card-deck を廃止しました。カードを列クラスでラップし、親 .row-cols-* コンテナを追加してカードデッキを再現します (ただし、レスポンシブな配置をより詳細に制御できます)。
破壊的変更 Masonry に代えて .card-columns を廃止しました。 See #28922.
破壊的変更 .card ベースのアコーディオンを新しいアコーディオンコンポーネントに置き換えました。

カルーセル

明るい背景に最適な、暗いテキスト、コントロール、インジケーター用の新しい .carousel-dark バリアントを追加しました。
カルーセルのコントロールのシェブロンアイコンを、Bootstrap Icons の新しいSVGに置き換えました。

閉じるボタン

破壊的変更より汎用性の低い名前の .btn-close に .close の名前を変更しました。
閉じるボタンは、HTML内の × の代わりに background-image (埋め込みSVG) を使用するようになりました。これにより、マークアップに触れることなく、簡単にカスタマイズできます。
暗い背景に対してコントラストの高い閉じるアイコンを有効にする filter: invert(1) を使用する新しい .btn-close-white バリアントを追加しました。

折りたたみ

アコーディオンのスクロールアンカーを削除しました。

ドロップダウン

オンデマンドのダークドロップダウン用に、新しい .dropdown-menu-dark バリアントと関連変数を追加しました。
$dropdown-padding-x の新しい変数を追加しました。
コントラストを向上させるために、ドロップダウンの区切り線を暗くしました。
破壊的変更ドロップダウンのすべてのイベントは、ドロップダウントグルボタンでトリガーされ、親要素にバブルアップされるようになりました。
ドロップダウンの配置が静的である場合、またはドロップダウンがナビゲーションバー内にある場合、ドロップダウンメニューは data-bs-popper="static" 属性が設定されています。これはJavaScriptによって追加され、Popperの位置調整を妨げることなく、カスタムの位置スタイルを使用するのに役立ちます。
破壊的変更ネイティブのPopper設定に代えて、ドロップダウンプラグインのflipオプションを廃止しました。fallbackPlacementsオプションをflip修飾子で空の配列として渡すことで、フリップ動作を無効にできます。
ドロップダウンメニューは、自動クローズ動作を処理するための新しい autoClose オプションを使用して、クリック可能になりました。このオプションを使用して、ドロップダウンメニューの内側または外側でクリックを受け入れ、インタラクティブにすることができます。
ドロップダウンは、<li> でラップされた .dropdown-item をサポートするようになりました。

ジャンボトロン

破壊的変更ユーティリティで再現できるため、ジャンボトロンコンポーネントを廃止しました。新しいジャンボトロンの例でデモをご覧ください。

リストグループ

リストグループに新しい .list-group-numbered 修飾子を追加しました。

ナビゲーションとタブ

.nav-link クラスに font-size、font-weight、color、および :hover color の新しい null 変数を追加しました。

ナビゲーションバー

破壊的変更ナビゲーションバーには、内部にコンテナが必要になりました (間隔の要件と必要なCSSを大幅に簡素化するため)。
破壊的変更 .active クラスは、.nav-item に適用できなくなりました。.nav-link に直接適用する必要があります。

オフキャンバス

新しいオフキャンバスコンポーネントを追加しました。

ページネーション

ページネーションリンクは、互いに分離されている場合にすべての角が動的に丸められるカスタマイズ可能な margin-left を持つようになりました。
ページネーションリンクに transition を追加しました。

ポップオーバー

破壊的変更デフォルトのポップオーバーテンプレートで .arrow を .popover-arrow に名前変更しました。
whiteList オプションの名前を allowList に変更しました。

スピナー

スピナーは、アニメーションの速度を落とすことで prefers-reduced-motion: reduce を尊重するようになりました。 See #31882.
スピナーの垂直方向の配置を改善しました。

トースト

トーストは、配置を配置ユーティリティを使用して .toast-container 内で行うことができます。
デフォルトのトーストの期間を5秒に変更しました。
トーストから overflow: hidden を削除し、calc() 関数を使用して適切な border-radius に置き換えました。

ツールチップ

破壊的変更デフォルトのツールチップテンプレートで .arrow を .tooltip-arrow に名前変更しました。
破壊的変更 Popper要素の配置を改善するため、fallbackPlacementsのデフォルト値が['top', 'right', 'bottom', 'left']に変更されました。
破壊的変更 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に変更されました。
破壊的変更ネガティブマージンがデフォルトで無効化されました。
他の要素に<body>の背景を簡単に設定するための新しい.bg-bodyクラスを追加しました。
top、right、bottom、leftの新しい位置ユーティリティを追加しました。各プロパティの値には、0、50%、100%が含まれます。
絶対/固定配置された要素を水平または垂直方向に中央揃えするための新しい.translate-middle-xと.translate-middle-yユーティリティを追加しました。
新しいborder-widthユーティリティを追加しました。
破壊的変更 .text-monospaceの名前が.font-monospaceに変更されました。
破壊的変更もう使用すべきではない、テキストを隠すための時代遅れの方法であるため、.text-hideを削除しました。
(RFS有効の場合)font-sizeユーティリティ用の.fs-*ユーティリティを追加しました。これらはHTMLのデフォルトの見出し(1〜6、大から小)と同じスケールを使用し、Sassマップで変更できます。
破壊的変更簡潔さと一貫性のため、.font-weight-*ユーティリティの名前を.fw-*に変更しました。
破壊的変更新しい.fst-normalユーティリティとの簡潔さと一貫性のため、.font-italicユーティリティの名前を.fst-italicに変更しました。
表示ユーティリティに.d-gridと、CSSグリッドとflexboxレイアウト用の新しいgapユーティリティ(.gap)を追加しました。
破壊的変更 .rounded-smとrounded-lgを削除し、.rounded-0から.rounded-3までの新しいクラスのスケールを導入しました。See #31687.
新しいline-heightユーティリティを追加しました: .lh-1、.lh-sm、.lh-base、.lh-lg。こちらを参照してください。
他の表示ユーティリティよりも優先度を高めるために、CSS内の.d-noneユーティリティを移動しました。
:focus-withinを使用して、コンテナでも機能するように.visually-hidden-focusableヘルパーを拡張しました。

ヘルパー

破壊的変更 レスポンシブ埋め込みヘルパーの名前が比率ヘルパーに変更されました。新しいクラス名と改善された動作、そして便利なCSS変数が追加されました。
- アスペクト比でbyをxに変更するためにクラス名が変更されました。たとえば、.ratio-16by9は.ratio-16x9になります。
- よりシンプルな.ratio > *セレクターを優先するため、.embed-responsive-itemと要素グループセレクターを削除しました。クラスはもう必要なくなり、比率ヘルパーは任意の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()ミックスインの名前がvisually-hidden()とvisually-hidden-focusable()に変更されました。
bootstrap-utilities.cssにもヘルパーが含まれるようになりました。カスタムビルドではヘルパーをインポートする必要がなくなりました。

JavaScript

jQueryの依存関係を削除し、プラグインを通常のJavaScriptで書き直しました。
破壊的変更すべてのJavaScriptプラグインのデータ属性は、Bootstrapの機能とサードパーティや独自のコードを区別するために名前空間化されるようになりました。たとえば、data-toggleではなくdata-bs-toggleを使用します。
すべてのプラグインは、最初の引数としてCSSセレクターを受け入れることができます。DOM要素または任意の有効なCSSセレクターを渡して、プラグインの新しいインスタンスを作成できます。
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigは、BootstrapのデフォルトのPopper構成を引数として受け入れる関数として渡すことができるため、このデフォルト構成を独自のやり方でマージできます。ドロップダウン、ポップオーバー、ツールチップに適用されます。
Popper要素の配置を改善するため、fallbackPlacementsのデフォルト値が['top', 'right', 'bottom', 'left']に変更されました。ドロップダウン、ポップオーバー、ツールチップに適用されます。
_getInstance()→getInstance()のように、公開静的メソッドからアンダースコアを削除しました。

v5への移行

v5.3.0

ヘルパー

ユーティリティ

v5.3.0-alpha2

CSS変数

カラーモード

タイポグラフィ

コンポーネント

ヘルパー

ユーティリティ

ドキュメント

ツール

v5.3.0-alpha1

カラーモード！

CSS変数

コンポーネント

アラート

リストグループ

ドロップダウン

閉じるボタン

ナビゲーションバー

プログレスバー

フォーム

ユーティリティ

v5.2.0

デザインの刷新

CSS変数の追加

新しい_maps.scss

新しいユーティリティ

その他の変更点

v5.1.0

v5.0.0

依存関係

ブラウザのサポート

ドキュメントの変更点

Sass

カラーシステム

グリッドの更新

コンテンツ、リブートなど

RTL

フォーム

コンポーネント

アコーディオン

アラート

バッジ

パンくずリスト

ボタン

カード

カルーセル

閉じるボタン

折りたたみ

ドロップダウン

ジャンボトロン

リストグループ

ナビゲーションとタブ

ナビゲーションバー

オフキャンバス

ページネーション

ポップオーバー

スピナー

トースト

ツールチップ

ユーティリティ

ヘルパー

JavaScript

新しい`_maps.scss`