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)
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
and$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.css
box-sizing: border-box
グローバルボックスサイズをリセットする代わりに、列にのみ適用されるようになりました。このようにして、グリッド スタイルを干渉することなく、より多くの場所で使用できます。 -
$enable-grid-classes
コンテナー クラスの生成を無効にしなくなりました。#29146を参照してください。 -
mixin を更新して、
make-col
デフォルトでサイズが指定されていない列に等しくなるようにしました。
コンテンツ、再起動など
-
RFSがデフォルトで有効になりました。mixin を使用する見出しは、ビューポートに
font-size()
合わせて自動的に調整さこの機能は、以前は v4 でオプトインされていました。font-size
-
速報ディスプレイのタイポグラフィを見直して
$display-*
変数を置き換え、$display-font-sizes
Sass マップを使用しました。$display-*-weight
また、単一の$display-font-weight
調整された s の個々の変数も削除されましたfont-size
。 -
.display-*
2 つの新しい見出しサイズと が.display-5
追加されまし.display-6
た。 -
リンクは、特定のコンポーネントの一部でない限り、デフォルトで (ホバー時だけでなく) 下線が引かれます。
-
テーブルを再設計してスタイルを更新し、CSS 変数を使用して再構築して、スタイリングをより細かく制御できるようにしました。
-
速報ネストされたテーブルはスタイルを継承しなくなりました。
-
速報
.thead-light
およびは、すべてのテーブル要素 ( 、、、および)に使用できるバリアント クラスを.thead-dark
優先して削除されます。.table-*
thead
tbody
tfoot
tr
th
td
-
速報
table-row-variant()
mixin は に名前が変更され、(色名) と(色コード)のtable-variant()
2 つのパラメーターのみを受け入れます。境界線の色とアクセントの色は、テーブル ファクター変数に基づいて自動的に計算されます。$color
$value
-
-y
テーブル セル パディング変数をとに分割します-x
。 -
速報落ち
.pre-scrollable
たクラス。#29135を参照 -
速報
.text-*
ユーティリティは、ホバーとフォーカスの状態をリンクに追加しなくなりました。.link-*
代わりにヘルパー クラスを使用できます。#29267を参照 -
速報落ち
.text-justify
たクラス。#29793を参照 -
速報
<hr>
要素は、属性をより適切にサポートするためheight
に代わりに使用するようになりました。これにより、パディング ユーティリティを使用して、より厚い仕切りを作成することもできます (例: )。border
size
<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-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-divider
CSSを再コンパイルせずに簡単にカスタマイズできるように、新しい 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
-
閉じるボタンは、HTML
background-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-size
font-weight
color
: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-radius
calc()
ツールチップ
-
速報デフォルトのツールチップ テンプレートで名前が変更
.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>
-
、、、およびの新しい位置ユーティリティが追加されました。各プロパティの値には、、、およびが含まれます。
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-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-ratios
Sass マップの名前が に変更され$aspect-ratios
、その値が単純化されて、クラス名とパーセンテージがkey: value
ペアとして含まれるようになりました。- CSS 変数が生成され、Sass マップの値ごとに含まれるようになりました。の
--bs-aspect-ratio
変数を変更して、.ratio
任意のカスタム アスペクト比を作成します。
- クラスの名前が変更
-
速報 「スクリーン リーダー」クラスは「視覚的に非表示」のクラスになりました。
- Sass ファイルを から
scss/helpers/_screenreaders.scss
に変更しましたscss/helpers/_visually-hidden.scss
.sr-only
and.sr-only-focusable
を.visually-hidden
andに改名.visually-hidden-focusable
sr-only()
and mixinsの名前sr-only-focusable()
をvisually-hidden()
andに変更しましvisually-hidden-focusable()
た。
- Sass ファイルを から
-
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"]')
-
popperConfig
Bootstrap のデフォルトの Popper 設定を引数として受け入れる関数として渡すことができるため、このデフォルト設定を自分のやり方でマージできます。ドロップダウン、ポップオーバー、およびツールチップに適用されます。 -
Popper 要素の配置を改善するために、 のデフォルト値が に
fallbackPlacements
変更されました。ドロップダウン、ポップオーバー、およびツールチップに適用されます。['top', 'right', 'bottom', 'left']
-
_getInstance()
→などの public static メソッドからアンダースコアを削除しましgetInstance()
た。