v5 への移行

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

このページでは

依存関係

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た。他のすべてのブレークポイントに変更はありません。
改善された溝。ガターは rems で設定され、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を参照
デフォルトの水平方向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-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て、入力グループの直接の子として追加できるようになりました。
検証フィードバックバグを持つ入力グループの長年のMissing border radius は、検証を持つ.has-validation入力グループに追加のクラスを追加することで最終的に修正されました。
速報 グリッドシステムのフォーム固有のレイアウトクラスを削除しました。.form-group、.form-row、またはの代わりにグリッドとユーティリティを使用してください.form-inline。
速報フォームラベルにはが必要になり.form-labelました。
速報 .form-textを設定しなくなりdisplay、HTML 要素を変更するだけで、必要に応じてインラインまたはブロックのヘルプテキストを作成できます。
<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"属性が設定されるようにdata-bs-popper="none"なりました。これは JavaScript によって追加され、Popper の配置に干渉することなくカスタムの位置スタイルを使用するのに役立ちます。
速報ドロップflipダウンプラグインのオプションを削除し、ネイティブの Popper 構成を優先しました。反転修飾子のfallbackPlacementsオプションに空の配列を渡すことで、反転動作を無効にできるようになりました。
自動終了動作autoCloseを処理する新しいオプションを使用して、ドロップダウンメニューをクリックできるようになりました。このオプションを使用して、ドロップダウンメニューの内側または外側のクリックを受け入れて、インタラクティブにすることができます。
.dropdown-itemドロップダウンが s でラップされたs をサポートするようになりました<li>。

ジャンボトロン

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

リストグループ

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

ナビゲーションとタブ

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

ナビゲーションバー

速報Navbars 内にコンテナーが必要になりました (スペース要件と必要な CSS を大幅に簡素化するため)。

オフキャンバス

新しい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 セレクターを渡して、プラグインの新しいインスタンスを作成できます。
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigBootstrap のデフォルトの Popper 設定を引数として受け入れる関数として渡すことができるため、このデフォルト設定を自分のやり方でマージできます。ドロップダウン、ポップオーバー、およびツールチップに適用されます。
Popper 要素の配置を改善するために、のデフォルト値がにfallbackPlacements変更されました。ドロップダウン、ポップオーバー、およびツールチップに適用されます。['top', 'right', 'bottom', 'left']
_getInstance()→などの public static メソッドからアンダースコアを削除しましgetInstance()た。