v5 への移行

v4 から v5 への移行に役立つ Bootstrap ソースファイル、ドキュメント、およびコンポーネントへの変更を追跡および確認します。

このページでは

v5.2.0

リフレッシュされたデザイン

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

その他の CSS 変数

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

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

そのため、可能な限り、より多くの CSS 変数を推進していきますが、v5 では実装がわずかに制限される可能性があることを認識しておいてください。

新しい`_maps.scss`

Bootstrap v5.2.0 では、新しい Sass ファイルが導入されました_maps.scss。からいくつかの Sass マップを引き出して_variables.scss、元のマップへの更新がそれらを拡張するセカンダリマップに適用されなかった問題を修正します。たとえば、への更新$theme-colorsは、に依存する他のテーママップには適用されず$theme-colors、主要なカスタマイズワークフローが壊れていました。つまり、Sass には、既定の変数またはマップが使用されると、更新できないという制限があります。CSS 変数が他の 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 グリッドレイアウトを選択して.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、およびの 3 つの変数が非推奨になりまし$tooltip-arrow-colorた。
.text-bg-{color}新しいヘルパーを追加しました。個々の.text-*および.bg-*ユーティリティを設定する代わりに、.text-bg-*ヘルパーbackground-colorを使用して、対照的な foregroundを設定できるようになりましたcolor。
.form-check-reverseラベルと関連するチェックボックス/ラジオの順序を反転する修飾子が追加されました。
新しいクラスを介してストライプ列のサポートがテーブルに追加されました。.table-striped-columns

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

v5.1.0

CSS グリッドレイアウトの実験的サポートが追加されました。—これは進行中の作業であり、まだ本番環境で使用する準備ができていませんが、Sass を介して新しい機能を選択できます。これを有効にするには、を設定してデフォルトのグリッドを無効にし、を設定$enable-grid-classes: falseして CSS グリッドを有効にします$enable-cssgrid: true。
オフキャンバスをサポートするようにナビゲーションバーを更新しました。—レスポンシブクラスといくつかのオフキャンバスマークアップを使用して、任意のナビゲーションバーにオフキャンバスドロワーを追加します。.navbar-expand-*
新しいプレースホルダーコンポーネントを追加しました。—最新のコンポーネントです。実際のコンテンツの代わりに一時的なブロックを提供して、サイトやアプリで何かがまだ読み込まれていることを示すのに役立ちます。
折りたたみプラグインは、水平折りたたみをサポートするようになりました。—に追加.collapse-horizontalして、の代わりに.collapseを折りたたみます。またはを設定して、ブラウザーの再描画を回避します。widthheightmin-heightheight
新しいスタックヘルパーと垂直ルールヘルパーが追加されました。—複数のフレックスボックスプロパティをすばやく適用して、スタックを使用してカスタムレイアウトをすばやく作成します。.hstack横 ( ) と縦 ( .vstack) のスタックから選択します。新しいヘルパー<hr>を使用して、要素に似た垂直方向の仕切りを追加します。.vr
:root新しいグローバルCSS 変数が追加されました。—スタイル:rootを制御するために、いくつかの新しい CSS 変数をレベルに追加しました。<body>ユーティリティやコンポーネント全体を含め、さらに多くの作業が進行中ですが、今のところ、カスタマイズセクションの CSS 変数を参照してください。
CSS 変数を使用するための色と背景のユーティリティをオーバーホールし、新しいテキストの不透明度と背景の不透明度ユーティリティを追加しました。— .text-*また、.bg-*ユーティリティは CSS 変数とrgba()色の値で構築されるようになり、新しい不透明度ユーティリティを使用して任意のユーティリティを簡単にカスタマイズできます。
コンポーネントのカスタマイズ方法を示す新しいスニペットの例を追加しました。—新しいスニペットの例を使用して、カスタマイズされたコンポーネントやその他の一般的なデザインパターンをすぐに使用できるようにします。フッター、ドロップダウン、リストグループ、およびモーダルが含まれます。
ポッパーのみで処理されるため、ポップオーバーとツールチップから未使用の配置スタイルを削除しました。$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
ドロップされたサファリ < 12
削除された iOS Safari < 12
クロムのドロップ < 60

ドキュメントの変更

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

サス

冗長な値を簡単に削除できるように、デフォルトの Sass マップマージを廃止しました。のように Sass マップですべての値を定義する必要があることに注意してください$theme-colors。Sass マップの扱い方を確認してください。
速報YIQ 色空間に関連しなくなったため、color-yiq()関数と関連する変数の名前をに変更しました。#30168 を参照してください。color-contrast()
- $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
- 同様に、の 2 番目のパラメータmedia-breakpoint-between()も、次のブレークポイントの代わりにブレークポイント自体を使用します (たとえば、との間のビューポートをターゲットにするmedia-between(sm, lg)代わりに) 。media-breakpoint-between(sm, md)smlg
速報印刷スタイルと$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-buttonsand$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()
速報Sass 独自のカラースケーリング関数との衝突を避けるために、scale-color()関数の名前をに変更しました。shift-color()
box-shadowミックスインは値を許可し、複数の引数からnullドロップするようになりました。#30394 を参照してください。none
border-radius()mixin にデフォルト値が追加されました。

カラーシステム

新しいカラーシステムのために使用され、削除されたカラーシステムcolor-level()。$theme-color-intervalコードベースのすべてのlighten()および関数はおよびdarken()に置き換えられます。これらの関数は、明度を固定量だけ変更する代わりに、色を白または黒と混合します。は、重みパラメータが正か負かに応じて、色を濃くしたり、色を濃くしたりします。詳細については、#30622を参照してください。tint-color()shade-color()shift-color()
すべての色に新しい色合いと色合いを追加し、新しい Sass 変数として、ベースカラーごとに 9 つの個別の色を提供します。
色のコントラストが改善されました。色のコントラスト比を 3:1 から 4.5:1 に上げ、青、緑、シアン、ピンクの色を更新して、WCAG 2.1 AA のコントラストを確保しました。また、カラーコントラストの色をから$gray-900に変更しました$black。
カラーシステムをサポートするために、新しいカスタムtint-color()とshade-color()関数を追加して、色を適切に混合します。

グリッドの更新

新しいブレークポイント！xxlと up に新しいブレークポイントを追加しまし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.cssbox-sizing: border-boxグローバルボックスサイズをリセットする代わりに、列にのみ適用されるようになりました。このようにして、グリッドスタイルを干渉することなく、より多くの場所で使用できます。
$enable-grid-classesコンテナークラスの生成を無効にしなくなりました。＃29146を参照してください。
mixin を更新して、make-colデフォルトでサイズが指定されていない列に等しくなるようにしました。

コンテンツ、再起動など

RFSがデフォルトで有効になりました。mixin を使用する見出しは、ビューポートにfont-size()合わせて自動的に調整さこの機能は、以前は v4 でオプトインされていました。font-size
速報ディスプレイのタイポグラフィを見直して$display-*変数を置き換え、$display-font-sizesSass マップを使用しました。$display-*-weightまた、単一の$display-font-weight調整された s の個々の変数も削除されましたfont-size。
.display-*2 つの新しい見出しサイズとが.display-5追加されまし.display-6た。
リンクは、特定のコンポーネントの一部でない限り、デフォルトで (ホバー時だけでなく) 下線が引かれます。
テーブルを再設計してスタイルを更新し、CSS 変数を使用して再構築して、スタイリングをより細かく制御できるようにしました。
速報ネストされたテーブルはスタイルを継承しなくなりました。
速報 .thead-lightおよびは、すべてのテーブル要素 ( 、、、および)に使用できるバリアントクラスを.thead-dark優先して削除されます。.table-*theadtbodytfoottrthtd
速報table-row-variant()mixin はに名前が変更され、(色名) と(色コード)のtable-variant()2 つのパラメーターのみを受け入れます。境界線の色とアクセントの色は、テーブルファクター変数に基づいて自動的に計算されます。$color$value
-yテーブルセルパディング変数をとに分割します-x。
速報落ち.pre-scrollableたクラス。＃29135を参照
速報 .text-*ユーティリティは、ホバーとフォーカスの状態をリンクに追加しなくなりました。.link-*代わりにヘルパークラスを使用できます。＃29267を参照
速報落ち.text-justifyたクラス。＃29793を参照
速報 <hr>要素は、属性をより適切にサポートするためheightに代わりに使用するようになりました。これにより、パディングユーティリティを使用して、より厚い仕切りを作成することもできます (例: )。bordersize<hr class="py-1">
デフォルトの水平方向padding-leftをオンにリセットし<ul>、<ol>要素をブラウザのデフォルトから40pxにリセットします2rem。
$enable-smooth-scrollグローバルに適用されるが追加されました。ただし、ユーザーがメディアクエリscroll-behavior: smoothを介してモーションの削減を求めている場合を除きます。＃31877を参照prefers-reduced-motion

RTL

水平方向固有の変数、ユーティリティ、および mixin はすべて名前が変更され、フレックスボックスレイアウトで見られるような論理プロパティを使用するようにstartなりendましleftた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て、入力グループの直接の子として追加できるようになりました。
検証フィードバックバグを持つ入力グループの長年のMissing border radius は、検証を持つ.has-validation入力グループに追加のクラスを追加することで最終的に修正されました。
速報 グリッドシステムのフォーム固有のレイアウトクラスを削除しました。.form-group、.form-row、またはの代わりにグリッドとユーティリティを使用してください.form-inline。
速報フォームラベルにはが必要になり.form-labelました。
速報 .form-textを設定しなくなりdisplay、HTML 要素を変更するだけで、必要に応じてインラインまたはブロックのヘルプテキストを作成できます。
フォームコントロールは使用されなくなり、可能な場合は修正されました。代わりに、カスタマイズと他のコンポーネントとの互換性を改善するためheightに延期されました。min-height
<select>検証アイコンは、の付いたには適用されなくなりましたmultiple。
scss/forms/入力グループのスタイルを含め、ソース Sass ファイルをの下に並べ替えました。

コンポーネント

アラート、ブレッドクラム、カード、ドロップダウン、リストグループ、モーダル、ポップオーバー、およびツールチップの統一paddingされた値は、変数に基づいてい$spacerます。#30564 を参照してください。

アコーディオン

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

アラート

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

バッジ

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

パン粉

padding、background-color、およびを削除して、パンくずリストのデフォルトの外観を簡素化しましたborder-radius。
--bs-breadcrumb-dividerCSSを再コンパイルせずに簡単にカスタマイズできるように、新しい CSS カスタムプロパティが追加されました。

ボタン

速報 チェックボックスまたはラジオ付きのトグルボタンは、JavaScript を必要としなくなり、新しいマークアップが追加されました。ラッピング要素を必要としなくなり、に追加.btn-checkし、のクラス<input>とペアにします。#30650 を参照してください。このドキュメントは、ボタンページから新しいフォームセクションに移動しました。.btn<label>
速報 ユーティリティ.btn-blockのために削除されました。で使用する代わりに、必要に応じてボタンを配置するためのユーティリティを使用.btn-blockし.btnてボタンをラップします。それらをさらに制御するために、レスポンシブクラスに切り替えます。いくつかの例については、ドキュメントを参照してください。.d-grid.gap-*
button-variant()およびmixin を更新して、button-outline-variant()追加のパラメーターをサポートしました。
ホバー状態とアクティブ状態のコントラストを高めるためにボタンを更新しました。
無効化されたボタンにはpointer-events: none;.

カード

速報.card-deck私たちのグリッドを支持してドロップしました。カードを列クラスでラップし、親.row-cols-*コンテナーを追加してカードデッキを再作成します (ただし、レスポンシブアラインメントをより細かく制御できます)。
速報.card-columnsメーソンリーを支持してドロップされました。#28922 を参照してください。
速報.cardベースのアコーディオンを新しいアコーディオンコンポーネントに置き換えました。

カルーセル

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

閉じるボタン

速報あまり一般的でない名前に変更.closeされました。.btn-close
閉じるボタンは、HTMLbackground-imageのの代わりに (埋め込まれた SVG) を使用する×ようになり、マークアップに手を加えることなく簡単にカスタマイズできます。
より暗い背景に対してより高いコントラストの却下アイコンを有効にするために.btn-close-white使用する新しいバリアントを追加しました。filter: invert(1)

崩壊

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

ドロップダウン

.dropdown-menu-darkオンデマンドのダークドロップダウンに新しいバリアントと関連変数を追加しました。
の新しい変数を追加しました$dropdown-padding-x。
コントラストを改善するために、ドロップダウンの仕切りを暗くしました。
速報ドロップダウンのすべてのイベントがドロップダウントグルボタンでトリガーされ、親要素にバブルアップされます。
ドロップダウンの位置が静的である場合、またはドロップダウンがナビゲーションバーにある場合、ドロップダウンメニューにdata-bs-popper="static"属性が設定されるようになりました。これは JavaScript によって追加され、Popper の配置に干渉することなくカスタムの位置スタイルを使用するのに役立ちます。
速報flipネイティブの Popper 構成を優先して、ドロップダウンプラグインのオプションを削除しました。反転修飾子のfallbackPlacementsオプションに空の配列を渡すことで、反転動作を無効にできるようになりました。
自動終了動作autoCloseを処理する新しいオプションを使用して、ドロップダウンメニューをクリックできるようになりました。このオプションを使用して、ドロップダウンメニューの内側または外側のクリックを受け入れて、インタラクティブにすることができます。
.dropdown-itemドロップダウンが s でラップされたs をサポートするようになりました<li>。

ジャンボトロン

速報ユーティリティでレプリケートできるため、ジャンボトロンコンポーネントを削除しました。デモについては、新しいジャンボトロンの例をご覧ください。

リストグループ

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

ナビゲーションとタブ

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

ナビゲーションバー

速報Navbars 内にコンテナーが必要になりました (スペース要件と必要な CSS を大幅に簡素化するため)。
速報.activeクラスはに適用できなくなりました。.nav-item直接に適用する必要があります.nav-link。

オフキャンバス

新しいoffcanvas コンポーネントを追加しました。

ページネーション

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

ポップオーバー

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

スピナー

スピナーはprefers-reduced-motion: reduceアニメーションを遅くすることで名誉を与えるようになりました。#31882 を参照してください。
スピナーの垂直方向の配置が改善されました。

トースト

ポジショニングユーティリティを使用して、トーストをに配置できるようになりました。.toast-container
デフォルトのトースト持続時間を 5 秒に変更しました。
トーストから削除され、関数を持つ適切なs にoverflow: hidden置き換えられました。border-radiuscalc()

ツールチップ

速報デフォルトのツールチップテンプレートで名前が変更.arrowされました。.tooltip-arrow
速報ポッパー要素の配置を改善するために、のデフォルト値がにfallbackPlacements変更されました。['top', 'right', 'bottom', 'left']
速報whiteListオプションの名前をに変更しましたallowList。

ユーティリティ

速報RTL サポートを追加して、方向名の代わりに論理プロパティ名を使用するようにいくつかのユーティリティの名前を変更しました。
- .left-*と.right-*を.start-*とに改名.end-*。
- .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>
、、、およびの新しい位置ユーティリティが追加されました。各プロパティの値には、、、およびが含まれます。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 グリッドおよびフレックスボックスレイアウト用の.d-grid表示ユーティリティと新しいgapユーティリティ ( ) に追加されました。.gap
速報とを削除.rounded-smしrounded-lg、クラスの新しいスケールをに導入しまし.rounded-0た.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は now.ratio-16x9です。
- and 要素グループセレクターを削除し.embed-responsive-item、よりシンプルな.ratio > *セレクターを採用しました。これ以上のクラスは必要なく、比率ヘルパーはあらゆる HTML 要素で機能するようになりました。
- $embed-responsive-aspect-ratiosSass マップの名前がに変更され$aspect-ratios、その値が単純化されて、クラス名とパーセンテージがkey: valueペアとして含まれるようになりました。
- CSS 変数が生成され、Sass マップの値ごとに含まれるようになりました。の--bs-aspect-ratio変数を変更して、.ratio任意のカスタムアスペクト比を作成します。
速報 「スクリーンリーダー」クラスは「視覚的に非表示」のクラスになりました。
- Sass ファイルをからscss/helpers/_screenreaders.scssに変更しましたscss/helpers/_visually-hidden.scss
- .sr-onlyand.sr-only-focusableを.visually-hiddenandに改名.visually-hidden-focusable
- sr-only()and mixinsの名前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"]')
```
popperConfigBootstrap のデフォルトの Popper 設定を引数として受け入れる関数として渡すことができるため、このデフォルト設定を自分のやり方でマージできます。ドロップダウン、ポップオーバー、およびツールチップに適用されます。
Popper 要素の配置を改善するために、のデフォルト値がにfallbackPlacements変更されました。ドロップダウン、ポップオーバー、およびツールチップに適用されます。['top', 'right', 'bottom', 'left']
_getInstance()→などの public static メソッドからアンダースコアを削除しましgetInstance()た。