Bootstrap5設置ガイド
PST(米国太平洋時間)2021/5/5にBootstrap v5.0.0が公開されました。ここではBootstrap5の使い方をv4.xからの変更箇所も含めて日本語で解説しています。
解説はできるだけ最新版(v5.3.3)に対応するよう更新しています。
※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。
※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。
Bootstrapとは?
Bootstrapは当初米Twitter社から提供されていたが、プロジェクトのメイン開発者であるMark Otto、Jacob Thorntonの両氏は2012年9月末までにTwitter社を退社し、Twitter社から分離して独立したオープンソースプロジェクトとなった。
そのため名称が「Twitter Bootstrap」から「Bootstrap」に変更され、サイトもBootstrap3の時点でhttp://twitter.github.com/bootstrap/からhttp://getbootstrap.comに移転した。
2022年現在、すべてのウェブサイトの約22%で使用されている(年ごとのJavaScriptライブラリの使用統計はこちら)。
※公式サイトの各バージョンの解説は、https://getbootstrap.com/docs/versions/にある(3.0、3.1、3.2を除く)。
名称について
ライセンスについて
※もともとはTwitter社も著作権の併記がされていたが、2022年12月にこれを削除している(理由は不明)。
Bootstrap5の特長
- jQueryがなくても動作が可能になった(jQueryとの依存関係を解消)が、従来の設定でも動作は可能(v6からは動作不可になる予定)
- Popper v2に対応
- Internet Explorerをサポート外にして、CSSカスタムプロパティ(CSS変数)が使用可能に
- RTL(右書き)モードを導入し、各CSSファイルのRTL版も提供
- ダークモードに対応
- フォームスタイルをカスタムフォームと統合(設定は従来的に、スタイルはカスタムフォーム的に)
- ユーティリティAPIによって容易にユーティリティクラスのカスタマイズが可能となり、ユーティリティクラスだけのCSSファイル(
bootstrap-utilities.css
,bootstrap-utilities.min.css
)も提供 - ES Modulesに対応したJSファイル(
bootstrap.esm.js
,bootstrap.esm.min.js
)を提供 - BootstrapのJavaScriptプラグインで使用するデータ属性が
data-*
からdata-bs-*
に変更 - 各コンポーネントのJavaScriptの記述をES6(ES2015)に変更
- RFSによるレスポンシブ・フォントサイズがデフォルトで有効
- ブレークポイントに超特大(
xxl
)を追加するなどグリッドシステムを強化 - CSS Gridレイアウトに対応
- SassコンパイラがNode Sass(LibSass)からDart Sassに変更
- リンク部分の下線が無効から有効に
更新履歴
- PST 2020/6/16にBootstrap v5.0.0-alpha1が公開
- PST 2020/9/29にBootstrap v5.0.0-alpha2が公開
- PST 2020/11/11にBootstrap v5.0.0-alpha3が公開
- PST 2020/12/7にBootstrap v5.0.0-beta1が公開
- PST 2021/2/10にBootstrap v5.0.0-beta2が公開
- PST 2021/3/23にBootstrap v5.0.0-beta3が公開
- PST 2021/5/5にBootstrap v5.0.0が公開
- PST 2021/5/13にBootstrap v5.0.1が公開
- PST 2021/6/22にBootstrap v5.0.2が公開
- PST 2021/8/5にBootstrap v5.1.0が公開
- PST 2021/9/7にBootstrap v5.1.1が公開
- PST 2021/10/5にBootstrap v5.1.2が公開
- PST 2021/10/9にBootstrap v5.1.3が公開
- PST 2022/5/13にBootstrap v5.2.0-beta1がプレリリース
※アップデートの量と前回のリリースからの期間を考慮して、まずはベータ版としてプレリリース。 - PST 2022/7/19にBootstrap v5.2.0が公開
- PST 2022/9/8にBootstrap v5.2.1が公開
- PST 2022/10/3にBootstrap v5.2.2が公開
- PST 2022/11/22にBootstrap v5.2.3が公開
※緊急性の高いバグが見つかったため早急に修正。 - PST 2022/12/24にBootstrap v5.3.0-alpha1がプレリリース
- PST 2023/3/24にBootstrap v5.3.0-alpha2がプレリリース
- PST 2023/4/3にBootstrap v5.3.0-alpha3がプレリリース
Node Sassのコンパイルエラーをいくつか修正 - PST 2023/5/30にBootstrap v5.3.0が公開
※当初はv5.3.0のベータ版を出す計画だったが取り止め。 - PST 2023/7/26にBootstrap v5.3.1が公開
- PST 2023/9/14にBootstrap v5.3.2が公開
- PST 2024/2/20にBootstrap v5.3.3が公開
Bootstrap5.xの変更箇所(設定やCSSスタイルなどをピックアップ)
v5.3.3 変更内容の詳細
- SassでBootstrapを構築する際に
variables-dark.scss
を手動でインポートする必要があったのでカラー・モードに関する変更点を修正。現在は_variables.scss
は自動的に_variables-dark.scss
をインポートする。すでに_variables-dark.scss
を手動でインポートしている場合は、そのまま継続してください。
【導入】
- JavaScript:HTMLサニタイザーデフォルトの
allowList
値のグローバル属性にdd
,dl
,dt
を追加 - Vite:Viteを構成するの
vite.config.js
の設定を更新
【カスタマイズ】
- カラーモード:JavaScriptの
color-modes.js
を更新
【コンポーネント】
- バッジの設定をすべて
span.badge.text-bg-{themecolor}
に - アコーディオン:Sass変数の
$accordion-button-focus-border-color
が非推奨に - オフキャンバス:メソッドに
dispose
(破棄)を追加 - ポップオーバー:メソッドのJavaScriptの設定を更新
【拡張】
- Bootstrapアイコン:更新履歴を追加
v5.3.2 変更内容の詳細
【導入】
- はじめに:コミュニティのツールを一部追加
- ダウンロード:代替CDNを新設
- JavaScript:JavaScriptフレームワークでの使用パッケージにVue 3用のBootstrapVueNextを追加
【カスタマイズ】
- CSS変数:
- デフォルトのroot変数に
--bs-highlight-color
を追加 - ダークモードのroot変数に
--bs-highlight-color
,--bs-highlight-bg
を追加
- デフォルトのroot変数に
【コンテンツ】
- 文字の体裁:文字の装飾の
<mark>
のダークモード用の背景色設定を追加
v5.3.1 変更内容の詳細
【導入】
- Javascript:イベントの設定例で
if (!data) {}
を削除 - Webpackでの使用:BootstrapのインポートのPostCSSでCSSを処理するためのwebpack用ローダーで
plugins: () => [
をplugins: [
に変更
【カスタマイズ】
- Sassのカスタマイズ:コンパイルと組み込みを追加
- カラーモード:
$body-color-dark
を$gray-500
から$gray-300
に変更し、ダークモードのカラーコントラストを向上 - CSS変数:ダークモードのroot変数の
--bs-body-color
,--bs-body-color-rgb
,--bs-secondary-color
,--bs-secondary-color-rgb
,--bs-tertiary-color
,--bs-tertiary-color-rgb
の色設定を変更
【フォーム】
- フォームテキスト:
<input>
の[aria-labelledby]
の設定を[aria-describedby]
に戻す - チェック&ラジオ:チェックボックス切替ボタンとラジオ切替ボタンに基本クラスボタンの設定を追加
【コンポーネント】
- アイコン付きアラートのアイコンを繰り返し使用する場合の設定:
svg[style="display: none;"]
をsvg.d-none
に変更 - ボタン:
- 常にブロックボタンの
<a>
タグの場合の設定を変更 - ボタンプラグインの切替ボタンに基本クラスボタンの設定を追加
- 常にブロックボタンの
- カードのナビゲーション、ドロップメニューアイテムの無効化、リンク付きリストグループ、ナビゲーションバーのナビゲーション、基本のナビゲーション、プレースホルダ:それぞれリンクが無効の場合(
a.disabled
)で、v5.1.1で不要になったaria-disabled="true"
の設定が復活 - 折り畳み:基本の設定と複数の切替とターゲットのボタンの間隔の設定を追加
- ナビゲーションバー:ダーク・ナビゲーションバーの罫線の設定を変更
- ナビ&タブ:タブの移動で Home キーと End キーに対応
- スピナー:ボタンに設定する場合の
role="status"
の設定箇所を変更
【ヘルパー】
- 縦仕切り線:Sass変数の変数を
$vr-border-width
変数に変更
v5.3.0 変更内容の詳細
各解説の"v5.3.0"での変更はv5.3.0-alpha版での変更も含むので、v5.3.0-alpha1, v5.3.0-alpha2, v5.3.0-alpha3の各変更も合わせて参照して下さい。
【導入】
- クイックスタート:Popperのバージョンが2.11.6から2.11.8に
- webpackでの使用:
src/index.html
の設定:src="./main.js"
の設定を削除 - Viteでの使用:
vite.config.js
の設定:server
からhot: true
の設定を削除
【カスタマイズ】
- カラーモード:
- JavaScript:
color-modes.js
の設定、カラーモードの切替の設定方法を変更 - テーマカラーを追加を新設
- JavaScript:
- CSS変数:デフォルトのroot変数に
--bs-heading-color: inherit;
を追加
【コンテンツ】
- テーブル:カラーバリエーションで背景色ユーティリティクラス
.bg-{color}
(文字色ユーティリティクラス.text-{color}
)や文字&背景色ヘルパークラス.text-bg-{themecolor}
を入れても反映されなくなった
【コンポーネント】
- ドロップダウン:ダークドロップダウンのナビゲーションバーで使用する場合の設定を変更
- ナビゲーションバー:ダークナビゲーションバー、外部コンテンツの設定をそれぞれ変更
【ユーティリティ】
- 位置ユーティリティ:マーカーの設定の
*-dark
を*-secondary
に変更
(v5.3.0-alpha3) 変更内容の詳細
各解説ではv5.3.0-alpha3版での変更も"v5.3.0"と記載しています。
- webpackでの使用:
src/index.html
の設定:src="./main.js"
の設定を削除package.json
の設定:"build": "webpack build",
⇒"build": "webpack build --mode=production",
- RFSのバージョンがv9.0.6からv10.0.0に
- アラート:ライブの実例でJavascriptの設定変更
- モーダル:様々なモーダルコンテンツでJavascriptの設定変更
- 表示ユーティリティ:インライン・グリッド表示として表示用に
.d(-{breakpoint})-inline-grid
、印刷用に.d-print-inline-grid
を追加
(v5.3.0-alpha2) 変更内容の詳細
各解説ではv5.3.0-alpha2版での変更も"v5.3.0"と記載しています。
- v5.3.0-alpha1では
$headings-color-dark: #fff;
の設定だったため見出し文字(<h*>
,.h*
)がダークモードでは白字になっていたが、v5.3.0-alpha2では$headings-color-dark: null;
となりダークモードでも標準の文字色で表示される - レイアウト、コンテンツ、フォーム、コンポーネント、ヘルパー、ユーティリティの各解説の以下の項目を名称変更(既に名称変更したものと統一)
- 「Sass」⇒「CSS」
- 「変数」⇒「Sass変数」
- 「マップ」⇒「Sassマップ」
- 「mixin」⇒「Sassミックスイン」
- 「ループ」⇒「Sassループ」
- 「ユーティリティAPI」⇒「SassユーティリティAPI」
.text-muted
は非推奨になったので、HTML設定内ではすべて.text-body-secondary
に変更
【導入】
- JavaScript:Boottrapをモジュールとして使用する場合は
"@popperjs/core"
はESM Popper CDNリファレンスを使用 - webpackでの使用、Parcelでの使用、Viteでの使用の設定をそれぞれ更新
【カスタマイズ】
- カラーシステム:ユーティリティの生成でインポートするSassファイルに
bootstrap/scss/variables-dark
を追加 - カラーモード:カラーモードの入れ子の項目を削除
- CSS変数:
--bs-{themecolor}-text
が--bs-{themecolor}-text-emphasis
に変更- デフォルトのroot変数
- フォーカスリンク関連の変数(
--bs-focus-ring-*
)を追加 - 角丸の極大の大きさの変数:
--bs-border-radius-2xl
ではなく、--bs-border-radius-xxl
を使用する仕様に変更 - v5.3.0-alpha1でフォームコントロール関連の変数(
--bs-form-control-bg
,--bs-form-control-disabled-bg
)を追加したが、--bs-body-bg
,--bs-secondary-bg
に再割り当てたのでv5.3.0-alpha2で削除 - フォーム入力検証関連の変数(
--bs-form-valid-*
,--bs-form-invalid-*
)を追加
- フォーカスリンク関連の変数(
- フォーカス変数を新設
【コンテンツ】
- 文字の体裁:見出しのカスタマイズで補助文の設定が
small.text-muted
からsmall.text-body-secondary
に変更
【フォーム】
- フォームコントロール:
- フォームテキストがフォームの概要から移動し、
<input>
内の[aria-describedby]
を[aria-labelledby]
に変更 - 関連するCSS変数が削除されたので、CSSのCSS変数の項目も削除
- フォームテキストがフォームの概要から移動し、
- インプットグループ:基本のインプットグループのラベル付きアドオンにヘルプの例文を追加
【コンポーネント】
- アコーディオン:ヘッダとコンテンツの関連付けのアクセシビリティの設定は不要に
- ボタン:基本クラスを新設し、ボタンの設定はバリエーションに変更(裏技のv3のDefault風ボタンの設定をダークモード対応に変更)
- 閉じるボタン:CSS変数を使用した構築に移行
- リストグループ:リストグループの背景色から背景色バリエーションに名称変更
- ナビゲーションバー:オフキャンバス付きナビゲーションバーの
button.navbar-toggler
に[aria-label]
を追加 - ナビ&タブ:アンダーラインナビゲーションを新設し、JavaScript動作にもアンダーラインナビゲーションの場合を追加
- オフキャンバス:ダークバージョンの従来の設定方法は非推奨に
- プレースホルダ:
a.btn.btn-primary.disabled.placeholder
からhref="#"
,tabindex="-1"
を削除 - プログレスバー:ラベルがバーより長い場合の設定方法が追加
- トースト:ライブの実例のJavaScriptの記述を修正
【ヘルパー】
- 色付きリンク:
- リンクの色に強調文字カラー
.link-body-emphasis
を追加 - リンクユーティリティと併用を新設
- リンクの色に強調文字カラー
- フォーカスリングを新設
- アイコンリンクを新設
【ユーティリティ】
- ユーティリティAPI:APIの使用の際にインポートするSassファイルに、
bootstrap/scss/variables-dark
を追加 - 境界ユーティリティ:罫線の色に
.border-black
を追加 - 文字色ユーティリティ:
.text-{themecolor}-emphasis
(.text-dark-emphasis
を除く) のcolor
が若干暗めになる - リンクユーティリティを新設
【実例】
- ダークモードでの表示に対応
- HTML設定内の
.text-muted
はすべて.text-body-secondary
に変更 - スターターカテゴリを新設
(v5.3.0-alpha1) 変更内容の詳細
各解説ではv5.3.0-alpha1での変更も"v5.3.0"と記載しています。
ダークモードに対応
※本サイトのライトモードとダークモードの切替は右上のナビゲーションバーで可能(デフォルトはオート(ブラウザの設定に準ずる))。
- light(デフォルト)とdarkのカラーモードをグローバルにサポート。カラーモードは
:root
要素、包括的クラスを持つ要素やコンポーネントのグループやdata-bs-theme="light|dark"
を持つコンポーネント上で直接グローバルに設定できる。また、新しいcolor-mode()
mixin も組み込まれ、好みに応じてdata-bs-theme
セレクタかメディアクエリでルールセットを出力できる。 - カラーモードは各コンポーネントのダークカラーバリエーションを置き換えるので、
.btn-close-white
,.carousel-dark
,.dropdown-menu-dark
,.navbar-dark
は非推奨に。 - 新しい拡張カラーシステムを追加。新しいテーマカラー(
$theme-colors
ではない)を追加し、color
とbackground-color
に新しく二次Bodyカラー、三次Bodyカラー、強調文字カラーを使用し、よりニュアンスのあるシステム全体のカラーパレットを実現。これらの新しいカラーは、Sass変数、CSS変数、ユーティリティクラスとして利用できる。 - テーマカラーのSass変数、CSS変数、ユーティリティクラスを拡張し、強調文字色、淡い背景色、淡い罫線色などを追加。これらはSass変数、CSS変数、ユーティリティクラスとして利用可能。
- ダークモード特有の再定義を格納するため、新しく
_variables-dark.scss
スタイルシートを追加。このスタイルシートは、インポートスタック内の既存の_variables.scss
ファイルの直後にインポートする必要がある。
詳細は、新設のカラーモードに記載。
【カスタマイズ】
- Sassのカスタマイズ:
- Sass オプション:
$enable-dark-mode
を追加 - カラーシステム:カラーパレットと新色を使用を新設
- カラーモードを新設
- CSS変数:root変数内にデフォルトとダークモードを新設し、デフォルトのroot変数に
- カラーモードの新設に伴い、従来の変数をライトモード(
[data-bs-theme=light]
)用にし、ダークモード([data-bs-theme=dark]
)用の変数を追加 - ブレークポイント関連の変数(
--bs-breakpoint-**
)が復活 - テキストカラーの変数(
--bs-{themecolor}-text
), 淡い背景色の変数(--bs-{themecolor}-bg-subtle
), 淡い罫線の色の変数(--bs-{themecolor}-border-subtle
), 強調文字カラーの変数(--bs-emphasis-color
), 二次カラーの変数(--bs-secondary-color
), 二次背景色の変数(--bs-secondary-bg
), 三次カラーの変数(--bs-tertiary-color
), 三次背景色の変数(--bs-tertiary-bg
), リンクの装飾の変数(--bs-link-decoration
), ボックスシャドウの変数(--bs-box-shadow-*
), フォームコントロールの変数(--bs-form-control-*-bg
)などが追加
- カラーモードの新設に伴い、従来の変数をライトモード(
【フォーム】
【コンテンツ】
【コンポーネント】
- アラート:Sass mixinの
alert-variant()
は非推奨に - ボタングループ:ラジオボタングループの設定に
name
属性の設定を入れ忘れてたので追加 - カード:グリッドマークアップの使用、ユーティリティの使用、テキストの配置にそれぞれカード間のマージンを追加
- カルーセル:
- 基本の設定から
[data-bs-ride]
を外す(アクセシビリティの観点から、自動再生カルーセルの使用の回避を推奨) - カルーセルの自動再生を新設し、スライドのみを移設してコントロールなしの自動再生カルーセルに変更
- ダークバージョンの
.carousel-dark
は非推奨に
- 基本の設定から
- 閉じるボタン:ホワイト・バージョンをダーク・バージョンに変更し、
.btn-close-white
は非推奨に - ドロップダウン:ダークドロップダウンの
.dropdown-menu-dark
は非推奨に - リストグループ:
- リストグループ・アイテムのカラーバリエーションは、SassループでCSS変数を再定義するようになり、Sass mixin(mixinから名称変更)の
list-group-item-variant()
は非推奨に - リストグループの背景色の中にリンクやボタンについてが独立の項目になり、アクティブ用の背景色の設定は廃止
- ループからSassループに名称変更
- リストグループ・アイテムのカラーバリエーションは、SassループでCSS変数を再定義するようになり、Sass mixin(mixinから名称変更)の
- モーダル:ツールチップとポップオーバーでポップオーバーの起動ボタンの設定を
<a>
から<button>
に変更 - ナビゲーションバー:カラーモードの新設に伴い、
- デフォルトのナビゲーションの設定:
nav.navbar.bg-light
⇒nav.navbar.bg-body-tertiary
- ダーク・ナビゲーションバーの設定:
.navbar.navbar-dark.bg-dark
⇒.navbar.bg-body-secondary[data-bs-theme="dark"]
- 明るめの背景色のナビゲーションバーの設定:
.navbar
⇒.navbar[data-bs-theme="light"]
- 暗めの背景色のナビゲーションバーの設定:
.navbar.navbar-dark
⇒.navbar[data-bs-theme="dark"]
.navbar-dark
は非推奨に
- デフォルトのナビゲーションの設定:
- プログレスバー:
【ユーティリティ】
- 背景色ユーティリティ:
.bg-{themecolor}-subtle
,.bg-body-secondary
,.bg-body-tertiary
が追加 - 定義済の文字色ユーティリティクラスと背景色ユーティリティクラスの配色が背景ユーティリティのページに収まりきれないので子ページに分離
- 境界ユーティリティ:
- 文字色ユーティリティ:
.text-{themecolor}-emphasis
,.text-body-emphasis
,.text-body-secondary
,.text-body-tertiary
を追加.text-muted
は非推奨に
- はみ出しユーティリティ:横方向のはみ出しクラス(
.overflow-x-{value}
)と縦方向のはみ出しクラス(.overflow-y-{value}
)を新設 - オブジェクト・フィットユーティリティ(
.object-fit-{breakpoint}-{value}
)を新設 - 空白ユーティリティ:ギャップユーティリティが
display: grid
の要素だけでなくdisplay: flex
の要素でも使用可能になり、上下にギャップ(.row-gap(-{breakpoint})-{size}
)、左右にギャップ(.column-gap(-{breakpoint})-{size}
)を新設 - テキストユーティリティ:文字の太さに中間の太さの文字クラス(
.fw-medium
)を追加
v5.2.3 変更内容の詳細
v5.2.2 変更内容の詳細
【コンポーネント】
- モーダルのタイトルの設定:
h5.modal-title
からh1.modal-title.fs-5
に変更 - ナビゲーションバーのオフキャンバス:
form.d-flex
に.mt-3
を追加
v5.2.1 変更内容の詳細
【導入】
- クイックスタート:Popperのバージョンが2.11.5から2.11.6に
【レイアウト】
- グリッドシステム:列とガターの変数に
$grid-row-columns
を追加
【コンポーネント】
- 折り畳み:
parent
オプションのタイプからjQuery object
を外し、デフォルトをfalse
からnull
に修正 - ポップオーバー:カスタム
container
にモーダルダイアログ内のポップオーバーの設定方法を追加 - スクロールスパイのオプション
threshold
を追加rootMargin
のデフォルトを0px 0px -40%
から0px 0px -25%
に修正target
のタイプからjQuery object
を外し、デフォルトをnull
に修正
【実例】
- 注目事項にタイトル付き注目事項を追加
v5.2.0 変更内容の詳細
各解説の"v5.2.0"での変更はv5.2.0-beta1での変更も含むので、v5.2.0-beta1の変更も合わせて参照して下さい。
【導入】
- はじめに:コミュニティツールからSlackルームを外し(v5.2.0公開時に閉鎖)、GitHubディスカッションを追加
- JavaScript
- JavaScriptフレームワークでの使用を新設
- jQuery関連とJavaScriptを無効にする項目を後ろに回して更新
- JavaScriptの記述:
document.getElementById('ID')
⇒document.querySelector('#ID')
- webpackでの使用とParcelでの使用を全面的に刷新し、Viteでの使用を新設
【カスタマイズ】
【コンテンツ】
- 文字の体裁の表示見出し:設定するSass変数に
$display-font-family
と$display-font-style
を追加
【フォーム】
- チェック&ラジオ:チェックボックスの無効化に不確定チェックボックスでの実例を追加
- フローティングラベル:インプットグループを新設
【コンポーネント】
- 各コンポーネントのJavaScriptの記述:
document.getElementById('ID')
⇒document.querySelector('#ID')
- アラート:アイコン付きで使うアイコンの
width
とheight
を24
⇒1rem
に変更 - ボタングループ:ボタンとドロップダウンを関連付けるための
button.btn.btn-{themecolor}.dropdown-toggle
のid="ID"
とul.dropdown-menu
のaria-labelledby="ID"
属性はそれぞれ不要に(v4.6.2でバックポート) - カルーセル:
.carousel
のdata-bs-interval="false"
の設定は不可になり削除 - ドロップダウン:ボタンとドロップダウンを関連付けるための
button.btn.btn-{themecolor}.dropdown-toggle
のid="ID"
とul.dropdown-menu
のaria-labelledby="ID"
属性はそれぞれ不要に(v4.6.2でバックポート) - リストグループのチェックボックスとラジオボタン
- ラベルの設定が
input.form-check-input
内のiaria-label
属性から⇒input.form-check-input
の後にlabel.form-check-label
の追加に変更 - ラジオボタンでの実例を追加
- アイテム全体をクリックする際の設定:
label.form-check-label
に.stretched-link
(伸長リンク)の追加に変更
- ラベルの設定が
- ナビゲーションバー
- ドロップダウンの設定:リンクとドロップダウンを関連付けるための
a.nav-link.dropdown-toggle
のid="ID"
とul.dropdown-menu
のaria-labelledby="ID"
属性はそれぞれ不要に(v4.6.2でバックポート) - オフキャンバスのDarkバージョンを新設
- ドロップダウンの設定:リンクとドロップダウンを関連付けるための
- オフキャンバス
- ボタンとドロップダウンを関連付けるための
button.btn.btn-{themecolor}.dropdown-toggle
のid="ID"
とul.dropdown-menu
のaria-labelledby="ID"
属性はそれぞれ不要に - Darkオフキャンバスを新設
- ボタンとドロップダウンを関連付けるための
- プログレスバー:
.progress-bar
にaria-label
を入れる - スクロールスパイ:非表示要素を新設
【ユーティリティ】
- ユーティリティAPI
- ユーティリティを追加、ユーティリティを変更、ユーティリティを削除で、
bootstrap/scss/utilities/api
の設定位置を変更 - ユーティリティを削除で、
map-remove()
Sass関数を使用する方法を追加 - ユーティリティを一度に追加、削除、変更を新設
- ユーティリティを追加、ユーティリティを変更、ユーティリティを削除で、
- カラーユーティリティ:
scss/_variables.scss
内の$text-muted
の値(.text-muted
の色)をv5.2.0-beta1で変更したが、.bg-dark
上では文字が全く見えないので元に戻した
【拡張】
- Bootstrapアイコン:Composerでインストール可能になったのでnpmをPackage managerに変更
(v5.2.0-beta1) 変更内容の詳細
各解説ではv5.2.0-beta1での変更も"v5.2.0"と記載しています。
サイトのデザインを刷新
- ナビゲーションバーなどの色がより鮮やかに
- サイドバーのセクションが折りたたまれないシンプルなレイアウトに(モバイルではオフキャンバスで表示)
- コピーボタンはアイコンのみに
- 一部の見本に"StackBlitzで編集"ボタンを設置
【導入】
- はじめに
- ページを刷新
- クイックスタート:Popperのバージョンが2.10.2から2.11.5に
- JavaScript:JavaScriptの記述をES6(ES2015)に変更
- webpack:コンパイル済SassのインポートのJavaScriptの記述をES6(ES2015)に変更
- Parcel
- Bootstrapのインストール:構成ファイルの内容が一部変更
- アプリケーションの構築:設定方法がParcel2に対応
- Sassのカスタマイズ
scss/_maps.scss
を新設- Bootstrapを部分的に組み込む場合、必須でインポートするSassファイルに
bootstrap/scss/maps
を追加
- Sassオプション:
$enable-grid-classes
から$enable-container-classes
を分離して追加 - カラーシステム
- ユーティリティの生成でインポートするSassファイルに
bootstrap/scss/maps
を追加 - カラーSassマップにblack($black)を追加
- ユーティリティの生成でインポートするSassファイルに
- CSS変数
【レイアウト】
- Z-index:
$zindex-toast: 1090;
を追加
【コンテンツ】
- Reboot
- CSS変数:「CSS変数の追加」にもとの「CSS変数」を加えて更新し、
--#{$variable-prefix}
を--#{$prefix}
に変更 - 基準のフォントスタック:Arial(基本のwebフォールバック)の位置を移動し、Helvetica Neue(古いiOSとmacOSバージョンのUIフォント)のコメント表記を修正
- 横仕切り線:「文字の体裁」から移動し、線の幅の設定を
height
からborder-top
プロパティにスタイル変更 - ユーザー入力:
<kbd>
タグを入れ子にしても太字にならなくなった
- CSS変数:「CSS変数の追加」にもとの「CSS変数」を加えて更新し、
- テーブル
- デフォルトのテーブルでは、
thead
とtbody
やtbody
とtfoot
の仕切り線の太さ(2px)の設定がなくなる。 - 仕切り線のオプトインクラスとして、
.table-group-divider
を新設 - 列が縞ストライブのテーブル用に
.table-striped-columns
を新設
- デフォルトのテーブルでは、
【フォーム】
- チェック&ラジオ
- 不確定チェックボックス:JavaScriptの記述をES6(ES2015)に変更
- 順序を反転用に
.form-check-reverse
を新設
- フローティングラベル
- 選択メニューとレイアウトの設定で
.form-select
内の[aria-label]
を削除 - 読み取り専用プレーンテキストを新設
- 選択メニューとレイアウトの設定で
- 入力検証
- カスタムスタイル:JavaScriptの記述をES6(ES2015)に変更
【コンポーネント】
- 各コンポーネントのJavaScriptの記述をES6(ES2015)に変更
-
ほぼすべてのコンポーネントをCSS変数を使用するように更新。Sassは引き続きすべてをサポートするが、各コンポーネントは、コンポーネントの基本クラス(
.btn
など)にCSS変数を含めるように更新され、Bootstrapのよりリアルタイムのカスタマイズを可能にした。次のコンポーネントは、CSS変数を使用した構築に移行:
- アコーディオン
- アラート
- バッジ
- パンくずリスト
- ボタン
- カード
- ドロップダウン
- リストグループ
- モーダル
- ナビゲーションバー
- ナビ&タブ
- オフキャンバス
- ページ送り
- ポップオーバー
- プログレスバー
- スピナー
- トースト
- ツールチップ
CSS変数の使用法は、Bootstrap v6まではやや不完全であり、これらを全面的に実装したいが、重大な変更を引き起こすリスクがある。可能な限り、CSS変数の数を増やしていくが、v5では実装がわずかに制限される可能性がある。例えば、ソースコードで
$alert-border-width: var(--bs-border-width)
を設定した場合(デフォルトでは$alert-border-width: $border-width
)、何らかの理由で$alert-border-width * 2
を実行していると、独自のコードで潜在的なSassが壊れる。 - すべてのコンポーネントのオプションで
data-bs-config
(JSON文字列として単純なコンポーネント構成が格納可能)をサポート - バッジ
- 背景色:文字&背景色ヘルパーが新設されたので、
span.badge.text-bg-{themecolor}
の設定も可能に
- 背景色:文字&背景色ヘルパーが新設されたので、
- ボタン
- v3のDefault風ボタンの設定(裏技)をCSS変数を使用したものに変更
- サイズの設定にCSS変数を使用した設定方法を追加
- カード
- カードの背景と色:文字&背景色ヘルパーが新設されたので、
.card.text-bg-{themecolor}
の設定も可能に
- カードの背景と色:文字&背景色ヘルパーが新設されたので、
- ドロップダウン
- ドロップの方向に中央揃え(
.dropdown-center
)とドロップアップの中央揃え(.dropup-center
)を新設 - ドロップの方向のドロップライトをドロップエンドに、ドロップレフトをドロップスタートに名称変更
- ドロップスタートの分離ボタンの設定:全体を
div.btn-group
で囲む必要がなくなり、.btn-group.dropstart
のrole="group"
も不要に - ドロップメニューのフォーム:
button.btn.dropdown-toggle
に[data-bs-auto-close="outside"]
を入れる
- ドロップの方向に中央揃え(
- モーダル
- モーダルでトースト表示(裏技):
.modal-dialog.modal-sm
⇒.modal-dialog[style="max-width:350px"]
- モーダルでトースト表示(裏技):
- ナビゲーションバー
.navbar-light
が非推奨に(.navbar
の中にスタイル設定が組み込まれたため)- フォーム:
<form>
要素にアクセシビリティとしてrole="search"
を入れる - ナビゲーションバーの配置に最下部に達するまで固定されるナビゲーションバーを新設
- ナビ&タブ
- JavaScript動作
div.tab-pane
に、tabindex="0"
属性を入れる- 各ナビゲーションに無効状態のタブ/ピルを追加
- JavaScript動作
- オフキャンバス
- ポップオーバー
- 実例の項目を整理し、カスタムポップオーバーを新設
- Sass変数:使用する変数の削減により
$popover-arrow-color
,$popover-arrow-outer-color
は非推奨に setContent
メソッドを追加
- スクロールスパイ
- 交差オブザーバー API(Intersection Observer API)を使用するように書き直され、相対的な親ラッパーが不要に(設定がナビゲーションとリストグループに限定する必要がなくなった)
- 実例の項目を整理し、単純なアンカーでの設定を新設
- オプション:
offset
とmethod
を廃止し、rootMargin
とsmoothScroll
を追加
- トースト
- ツールチップ
- 実例の項目を整理し、カスタムツールチップを新設
- Sass変数:使用する変数の削減により
$tooltip-arrow-color
は非推奨に setContent
メソッドを追加
【ヘルパー】
- 文字&背景色ヘルパーとして
.text-bg-{themecolor}
を新設 - 位置ヘルパー:最下部に達するまで固定
.sticky-bottom
とレスポンシブで最下部に達するまで固定.sticky-{breakpoint}-bottom
を新設
【ユーティリティ】
- ユーティリティAPI
- CSS変数名の変更用に
css-variable-name
オプションを追加 - クラスの設定:
class: null
の場合、values
キーごとにクラスを生成できるように - ユーティリティの追加、変更、削除する際のインポートするSassファイルに、
bootstrap/scss/maps
,bootstrap/scss/mixins
,bootstrap/scss/utilities/api
を追加
- CSS変数名の変更用に
- 背景ユーティリティ:RGBカラーと不透明度のマップの設定が
scss/_variables.scss
から新設のscss/_maps.scss
に変更 - 境界ユーティリティ
- カラーユーティリティ
scss/_variables.scss
内の$text-muted
の値を変更し、.text-muted
の色合いが.text-secondary
と同じから.text-body
より薄めなものに- RGBカラーと不透明度のマップの設定:
scss/_variables.scss
から新設のscss/_maps.scss
に変更
- テキストユーティリティ:文字の太さユーティリティクラスに若干太めの文字(
.fw-semibold
)を追加
【拡張】
- アイコン:オプションのアイコンライブラリにTabler Iconsを追加
- Bootstrapアイコンを新設
【実例】
- オフキャンバス付きナビゲーションバーとスクロールして最下部に達するまで最下部に固定されるナビゲーションバーを新設
- リストグループスニペットに設定例を追加
v5.1.2 変更内容の詳細
v5.1.1 変更内容の詳細
bootstrap.css
だけでなく、bootstrap-reboot.css
,bootstrap-grid.css
にも:root
CSS変数を組み込むことになった
【導入】
- クイックスタート:Popperのバージョンが2.9.2から2.10.1に
- webpack:JavaScriptのインポートに全てをインポートする方法を追加
【カスタマイズ】
- Sass オプション:
$enable-smooth-scroll
を追加 - CSS変数::root CSS変数に
--bs-body-color-rgb
を追加し、--bs-body-bg-rgb
の値を変更
【コンテンツ】
- Reboot:CSS変数の追加を追加
【コンポーネント】
- ボタン
- ナビゲーション付きカード、ドロップダウン、リンク付きリストグループ、ナビゲーション、ナビゲーションバー、ページ送りの無効リンクの場合には、
href
属性、tabindex="-1"
、aria-disabled="true"
の設定が不要に(v4.6.1でバックポート) - モーダル
- モーダルの切替:v5.1.0でモーダル2にある「モーダル1に戻る」ボタンを押してもモーダル1に戻らないバグが発生していたのを修正(設定の変更あり)
- YouTube動画の埋め込み:YouTube IFrame Player APIを利用したYouTube動画の埋め込みの実例を追加
- プレースホルダ:使い方の見本で
a.btn.btn-{themecolor}.disabled.placeholder
にtabindex="-1"
が抜けていたので追加
【ヘルパー】
- 積み重ねヘルパー:実例の横並びフォームの設定を変更
【ユーティリティ】
- 背景ユーティリティ:v5.1.0で
.bg-body
のcolor
が.text-body
と同一になるバグが発生していたのを修正(設定の変更なし)
v5.1.0 変更内容の詳細
【導入】
- クイックスタート:Popperのバージョンが2.9.2から2.9.3に
- ツールの構築を開発に貢献に名称変更(構築ツールは、Bootstrapを依存関係として使用することとは関係なく、貢献するためのものであることを明確にするためらしい)
【カスタマイズ】
- BootstrapのソースSassファイルをインポートする際にrootの設定がオプションから必須に、オプションの設定例はコンポーネントだけでなく、ユーティリティやヘルパーも表示
- カラーシステムにユーティリティの生成を追加
- CSS変数
:root
CSS変数にグレースケールカラーの変数(--bs-gray-*
), RGBカラーの変数(--bs-{color}-rgb
),<body>
スタイルの変数(--bs-body-*
)を追加- グリッドブレークポイントを追加
【レイアウト】
- CSSグリッド(
.grid
>.g-col-*
)を新設 - グリッド:行列グリッドに行によって列数を変えるを削除⇒それに伴い横並びフォームで各インプットが幅100%に表示されるバグも解消
- Z-indexの設定を一部変更
【コンテンツ】
【コンポーネント】
- プレースホルダを新設
- アラート
- ボタン:モバイルのみブロック表示(
<a>
タグの場合)の設定を変更 - 折り畳み:水平方向に折り畳む(
.collapse.collapse-horizontal
)を新設 - モーダル:データ属性経由にモーダルを閉じる設定も追加
- ナビゲーションバー:オフキャンバスナビゲーションバーを新設
- オフキャンバス:データ属性経由にオフキャンバスを閉じる設定も追加
- トースト
【ユーティリティ】
- 不透明度ユーティリティクラス(
.opacity-{value}
)を新設 - ユーティリティAPI
- APIのオプションに
css-var
,local-vars
を追加 - APIの説明にプロパティ、値、CSS変数ユーティリティ、ローカルCSS変数を追加し、カスタム・クラスプレフィックスはクラスに、レスポンシブ・ユーティリティはレスポンシブに、印刷ユーティリティは印刷時に変更し、ユーティリティの変更は削除
- APIの使用に再定義ユーティリティを追加
- APIのオプションに
- 背景ユーティリティ・カラーユーティリティ
- CSS変数を使用しての構築に移行(
.bg-{color}
と.text-{color}
の{color}
のプロパティがHEX値からRGBテーマカラーCSS変数と透明度アルファ値CSS変数に) - 背景ユーティリティとカラーユーティリティのそれぞれ不透明度を新設
.bg-black
と.text-black
を追加.text-black-50
と.text-white-50
はv5.1.0で非推奨となり、v6.0.0で削除予定
- CSS変数を使用しての構築に移行(
【ヘルパー】
【実例】
v5.0.2 変更内容の詳細
【レイアウト】
- グリッド:行列グリッドに行によって列数を変えるを追加
【フォーム】
- フォームコントロール:読み取り専用コントロール(
[readonly]
)にテキストを入れる場合は、[placeholder]
ではなく[value]
で設定
【コンポーネント】
- ボタン、トーストの各プラグインに
getInstance
メソッドを追加 - アラート、ボタン、カルーセル、折り畳み、ドロップダウン、リストグループ、モーダル、ナビ&タブ、オフキャンバス、ポップオーバー、スクロールスパイ、トースト、ツールチップの各プラグインに
getOrCreateInstance
メソッドを追加 - バッジ:バッジの設定を見出しとボタンに分け、さらに位置付けを新設
- カード:水平スタイルのイメージの設定を
img.card-img
からimg.img-fluid.rounded-start
に変更
【ユーティリティ】
- ユーティリティAPI
- 優先度を追加し、一部の設定例の出力CSSに
!important
を追加 - ユーティリティの変更にレスポンシブを有効にするを追加
- 優先度を追加し、一部の設定例の出力CSSに
v5.0.1 変更内容の詳細
- 設定上の変更は見られない
v5.0.0 変更内容の詳細
v5.0.0-beta3 変更内容の詳細
- ほとんどすべてのコンテンツ、フォーム、コンポーネント、ユーティリティの各解説に「Sass」の項目を追加
- Emmetショートハンド集を新設
【導入】
- クイックスタート:Popperのバージョンが2.6.0から2.9.1に
- ブラウザとデバイス:サポート対応ブラウザの変更(Legacy Edgeの表記を削除など)
- Parcelを使用してプロジェクトにBootstrapを組み込む方法を追加
- JavaScript:コンストラクタのCSSセレクタを追加(すべてのプラグインで最初の引数としてCSSセレクタの受け入れが可能になり、DOM要素か任意の有効なCSSセレクタを渡して、プラグインの新しいインスタンスが作成可能に)
【カスタマイズ】
- Sassのカスタマイズ:インポート、変数のデフォルト値で変数、mixinの設置場所の変更(4.6.1でバックポート)
- ノンブロッキング・ファイルを更新
【レイアウト】
- Z-index:オフキャンバス・コンポーネントの新設に伴い
$zindex-offcanvas
を追加し、それより手前に表示されるものの値が10ずつ増える
【コンポーネント】
- オフキャンバス(
.offcanvas-*
)を新設 - v5でクラス廃止となったメディアオブジェクトをFlexユーティリティに移動
- ドロップダウン:
flip
オプションを廃止 - リストグループ:番号付きを新設
- モーダル:モーダルの切替を新設
- ナビゲーションバー
【実例】
- スニペットカテゴリを新設
- オフキャンバスをオフキャンバスナビゲーションバーに名称変更し、カテゴリを実験からナビゲーションバーに移動(実験カテゴリは削除)
v5.0.0-beta2 変更内容の詳細
【導入】
- クイックスタート:Popperのバージョンが2.5.4から2.6.0に
- ファイルの内容:
bootstrap-utilities.css
にはユーティリティだけでなく、ヘルパーも組み込まれるようになった。 - JavaScript:コンポーネント間でロジックを相互化できるようにするベースコンポーネント用に
js/dist/base-component.js
を新設 - ツールの構築:SassコンパイラのツールがNode SassからDart Sassに変更され、解説(v4.6.0でバックポート)も追加
- 右書き:左書きと右書きの同時使用を追加
【カスタマイズ】
- カスタマイズの概要:CSPと組み込みSVGを追加(v4.6.0でバックポート)
- Sass オプション:
$enable-deprecation-messages
のデフォルトの設定がfalse
からtrue
に変更 - 常にHTTPSを使用を更新
【フォーム】
- インプットグループ:チェックボックスとラジオボタンの設定で
.form-check-input
に.mt-0
を追加 - フォームの検証状態のカスタマイズ:
form-validation-state
mixinに新しく3つのオプションパラメータtooltip-color
,tooltip-bg-color
,focus-box-shadow
を追加
【コンポーネント】
- カルーセル
- スライドコントロールの設定をリンクボタンからボタンに変更(v4.6.1でバックポート)
- インジケータの設定をリストからボタンに変更
- タッチスワイプを無効にするを新設(v4.6.0でバックポート)
slide
オプションの名称をride
に戻す
- ドロップダウン
- ドロップダウンメニューには、ドロップダウンの位置が静的な場合は
data-bs-popper="static"
属性が設定され、ドロップダウンがナビゲーションバーにある場合はdata-bs-popper="none"
が設定されることになった。これはJavaScriptによって追加され、Popperのポジショニングに干渉することなくカスタムのポジショニングスタイルを使用するのに役立つ。 - ドロップダウンのすべてのイベントがドロップダウン切替ボタンで発動され、親要素にバブルアップされることになった
- ドロップメニューの配置に配置オプションを追加
- オプション
boundary
のデフォルトの設定がscrollParent
からclippingParent
に変更reference
のタイプにobject
を追加- v5.0.0-beta1で廃止された
offset
が復活 popperConfig
のタイプにfunction
を追加
- ドロップダウンメニューには、ドロップダウンの位置が静的な場合は
- ナビ&タブ:JavaScript動作のタブ/ピル部分が
a.nav-link[href]
からbutton.nav-link[data-bs-target type="button"]
に変更(v4.7.0でバックポート) - ナビゲーションバー:スクロールを新設(v4.6.0でバックポート)
- ポップオーバー
- 無効な要素の設定方法を変更
- オプション
fallbackPlacements
の設定タイプとデフォルト値を変更boundary
のデフォルトの設定がscrollParent
からclippingParent
に変更- v5.0.0-beta1で廃止された
offset
が復活 popperConfig
のタイプにfunction
を追加
- トースト:設定例にライブを新設(v4.6.0でバックポート)
- ツールチップ
- 無効な要素の設定方法を変更
- オプション
fallbackPlacements
の設定タイプとデフォルト値を変更boundary
のデフォルトの設定がscrollParent
からclippingParent
に変更- v5.0.0-beta1で廃止された
offset
が復活 popperConfig
のタイプにfunction
を追加
【ヘルパー】
- 比率のカスタマイズ:CSSカスタムプロパティを
--aspect-ratio
から--bs-aspect-ratio
に名称変更 - 伸長リンク:テーブルの場合(裏技)は、機能しない場合があるため削除(v4.6.0でバックポート)
- 視覚的に非表示ヘルパー:
:focus-within
を使用して、.visually-hidden-focusable
をコンテナでも機能するように拡張
【ユーティリティ】
- ユーティリティAPI
- APIを使用してユーティリティの追加、変更、削除の設定で
@import "bootstrap/scss/functions";
,@import "bootstrap/scss/variables";
の追加が必要に - ユーティリティの変更にユーティリティの名前を変更を追加
- APIを使用してユーティリティの追加、変更、削除の設定で
- 背景ユーティリティがカラーユーティリティから分離
- 背景ユーティリティ、カラーユーティリティ、表示ユーティリティにSassの項目を追加
【拡張】
- アプローチ:コード規約を追加(v4.6.0でバックポート)
v5.0.0-beta1 変更内容の詳細
【導入】
- クイックスタート:Popper v2に対応(バージョンが1.16.1から2.5.4に)
- ツールの構築:RTLCSSを追加
- RTL(右書き)モードを導入
それに伴い、水平方向に依存する変数、ユーティリティ、mixinは、より論理的な名前に名称変更 —left
(左)とright
(右)の代わりにstart
(行頭)とend
(行末)を使用
【カスタマイズ】
- カラー関数:
scale-color()
関数をshift-color()
関数に変更
【コンポーネント】
- 他のライブラリとの競合を防ぐため、すべてのJavaScriptプラグインの
data
属性に名前空間bs
を追加(例:data-toggle
⇒data-bs-toggle
) - パンくずリスト
.breadcrumb
の設定でpadding
を0
に、background-color
とborder-radius
の設定を削除して外観を簡素化- 仕切り(旧セパレータ)の変更や削除をするのに、
--bs-breadcrumb-divider
CSSカスタムプロパティを入れる方法などを追加
- ドロップダウン
- ドロップレフト:
.dropleft
⇒.dropstart
(RTL導入に伴いクラス名変更) - ドロップライト:
.dropright
⇒.dropend
(RTL導入に伴いクラス名変更) - ドロップメニューの配置(RTL導入に伴いクラス名変更)
.dropdown-menu(-{breakpoint})-left
⇒.dropdown-menu(-{breakpoint})-start
.dropdown-menu(-{breakpoint})-right
⇒.dropdown-menu(-{breakpoint})-end
- Popper v2対応に伴い、
offset
オプションを削除(popperConfig
パラメータを使用すれば引き続き実行可能)
- ドロップレフト:
- モーダル:
show
オプションを廃止 - ポップオーバー、ツールチップ
customClass
オプションを追加(v4.6.0でバックポート)- Popper v2対応に伴い、
offset
オプションを削除(popperConfig
パラメータを使用すれば引き続き実行可能)し、fallbackPlacement
オプションは、fallbackPlacements
に名称変更
- トースト
- 縦積み用のコンテナとして
.toast-container
を追加 - 位置ユーティリティクラスを使用した位置設定が可能に
- 縦積み用のコンテナとして
【ユーティリティ】
- ユーティリティAPIに
state
,rtl
オプションを追加
ユーティリティの削除にRTLのユーティリティを削除を追加 - 枠の罫線ユーティリティ(RTL導入に伴いクラス名変更)
.border-left
⇒.border-start
.border-right
⇒.border-end
.border-left-0
⇒.border-start-0
.border-right-0
⇒.border-end-0
- 境界の角丸ユーティリティ(RTL導入に伴いクラス名変更)
.rounded-left
⇒.rounded-start
.rounded-right
⇒.rounded-end
- 横の配置ユーティリティ(RTL導入に伴いクラス名変更)
.float(-{breakpoint})-left
⇒.float(-{breakpoint})-start
.float(-{breakpoint})-right
⇒.float(-{breakpoint})-end
- 位置ユーティリティ
.left-{position}
⇒.start-{position}
(RTL導入に伴いクラス名変更).right-{position}
⇒.end-{position}
(RTL導入に伴いクラス名変更)- 要素を中央に配置:
.translate-middle-x
,.translate-middle-y
を追加
- マージンユーティリティ(RTL導入に伴いクラス名変更)
.ml(-{breakpoint})-{size}
⇒.ms(-{breakpoint})-{size}
.mr(-{breakpoint})-{size}
⇒.me(-{breakpoint})-{size}
- パディングユーティリティ(RTL導入に伴いクラス名変更)
.pl(-{breakpoint})-{size}
⇒.ps(-{breakpoint})-{size}
.pr(-{breakpoint})-{size}
⇒.pe(-{breakpoint})-{size}
- 文字の配置ユーティリティ(RTL導入に伴いクラス名変更)
.text(-{breakpoint})-left
⇒.text(-{breakpoint})-start
.text(-{breakpoint})-right
⇒.text(-{breakpoint})-end
【実例】
- チートシートとRTL版チートシートを新設(左書きと右書きの配置の違いを比較)
- 各CDNファイルの提供元をBootstrapのCDNに合わせてjsDelivrに変更
v5.0.0-alpha3 変更内容の詳細
【導入】
- CDNの提供元:StackPathからjsDelivrに変更(v4.5.3でバックポート)
- サポート対応ブラウザ:Microsoft Edge Legacyのサポートを終了
【カスタマイズ】
- カラー関数:
color-level()
,lighten()
,darken()
の各関数と$level
,$theme-color-interval
の各変数などを廃止し、tint-color()
,shade-color()
,scale-color()
の各関数と$weight
変数などを使用 - テーマカラー:
$dark
の設定:$gray-800
⇒$gray-900
これに伴い、.table-dark
,.btn-dark
,.btn-outline-dark
,.alert-dark
,.list-group-item-dark
,.link-dark
,.border-dark
,.text-dark
,.bg-dark
のカラー設定も変更 - root変数の
--bs-font-sans-serif
や基準のフォントスタックに"Liberation Sans"
を追加(v4.6.0でバックポート)
【フォーム】
- フォームのファイル選択:
.form-control
クラスを使用するようにし、.form-file-*
クラスは廃止、任意のJavaScriptは不要に - フォームの入力コントロール、選択メニューの無効化設定の解説を追加
- フォームのチェックボックス切替ボタンとラジオ切替ボタンの無効化の設定が可能に
- フローティングラベル(
.form-floating
)を完全にサポートしたので実例からフォームコンポーネントに昇格 - 検証フィードバックのインプットグループで境界線の角丸が欠落するバグを解消(v4.6.0でバックポート)
【コンポーネント】
- アコーディオン
- 「折り畳み」から独立した項目に移動。
- カードコンポーネントクラス(
.card-*
)から独自のアコーディオンコンポーネントクラスの設定に変更(.accordion-*
を新設) - 外枠線のない設定が可能に(
.accordion-flush
を使用)
- ブロックボタン:
.btn-block
を廃止し.d-grid.gap-{size}
を使用した設定に変更 - ページ送りの現在の位置:
span.visually-hidden
は不要に(v4.6.0でバックポート)
【ユーティリティ】
- ユーティリティAPIにAPIの使用を追加
- 境界の角丸
- CSS Gridレイアウトに対応した
.d(-{breakpoint})-grid
(グリッド表示ユーティリティ)と.gap(-{breakpoint})-{size}
(ギャップユーティリティ)クラスを追加 - はみ出しユーティリティ:
.overflow-visible
,.overflow-scroll
を追加 - 文字の太さとイタリック体:
font-{style}
ユーティリティは.fst-{style}
と、.font-weight-{weight}
ユーティリティは.fw-{weight}
クラス名を変更
v5.0.0-alpha2 変更内容の詳細
【導入】
- クイックスタート:Popperのバージョンが1.16.0から1.16.1に(v4.5.1でバックポート)
- JavaScriptのHTMLサニタイザーの
whitelist
をallowlist
に名称変更し、これに伴いポップオーバーとツールチップのオプションwhiteList
もallowList
に名称変更 - webpackの設定で
postcssOptions
キーに対応
【カスタマイズ】
$theme-colors
マップにカラーを追加する場合は、一旦カスタムカラーの変数を設定する必要あり- 全てのカラー:Sassマップの
$green
(#28a745 ⇒ #198754)と$cyan
(#17a2b8 ⇒ #0dcaf0)のcolor
が変更
それに伴い{xxx}-success
と{xxx}-info
のcolor
も変更
【フォーム】
- フォームの入力検証:サーバー側の検証設定でアクセシビリティの設定を追加(v4.5.1でバックポート)
【コンポーネント】
- ボタングループでのチェック/ラジオ切替ボタンをボタンプラグインからボタングループに移動し、アクセシビリティの設定の追加と切替ボタンの設定を変更
- カルーセルのダーク・バージョン用に
.carousel-dark
を新設 - 閉じるボタン:
.close
を.btn-close
にクラス名変更し、span[aria-hidden="true"]
>×
が不要に(アラート、モーダル、トーストも同様)
暗めの背景に対応するホワイト・バージョン用に.btn-close-white
を新設 - カードコンポーネントによるアコーディオンの設定を調整
- ドロップダウンメニューのダーク・バージョン用に
.dropdown-menu-dark
を新設 - 縦積みピルナビゲーション:グリッドクラスからFlexユーティリティクラスによる設定に変更
- スクロールスパイ:
<body>
以外の要素に[data-spy="scroll"]
を設定する場合は[tabindex="0"]
を入れる - トースト:
delay
(非表示の遅延時間)のデフォルトが500
(0.5秒)から5000
(5秒)に変更
【ヘルパー】
- 動画の埋め込みなどアスペクト比を維持するヘルパークラスが
.embed-responsive.embed-responsive-**by*
から.ratio.ratio-**x*
にクラス名変更し、子要素のクラス設定は不要になり、.embed-responsive-item
は廃止(項目も「動画の埋め込み」から「比率ヘルパー」に名称変更)。
Sassマップも$embed-respond-aspect-ratio
から$ratio-aspect-ratios
に名称変更
Sassファイルもscss/helpers/_embed.scss
からscss/helpers/_ratio.scss
に名称変更 - 支援技術を除くすべてのデバイスの要素を非表示にするクラスを
.sr-only
,.sr-only-focusable
から.visually-hidden
,.visually-hidden-focusable
にクラス名変更(項目も「スクリーンリーダー」から「視覚的に非表示」に名称変更)
Sassファイルもscss/helpers/_screenreaders.scss
からscss/helpers/_visually-hidden.scss
に名称変更
【ユーティリティ】
- ポインターイベント:アクセシビリティの設定を追加
- 罫線の太さユーティリティクラス(
.border-{size}
)を新設
【拡張】
- アイコン:オプションのアイコンライブラリにCoreUI Iconsを追加(v4.5.3でバックポート)
v5.0.0-alpha1 変更内容の詳細
【項目の移動】
- 「導入」のテーマの解説を「カスタマイズ」として独立した項目に変更
- 「レイアウト」の概要をブレークポイント、コンテナ、Z-indexに分離し、グリッドの一部を列アイテム、ガターに分離
- フォームの解説を「コンポーネント」より独立した項目に変更
- インプットグループを「コンポーネント」から「フォーム」に移動
- コード(コード表示、コードブロック、変数、ユーザー入力、サンプル出力)の解説を「コンテンツ」の独立した項目からReboot内に移動
- ボタンの「ボタンのアクティブ化」の項目はボタングループに移動
- ボタンプラグインのチェックボックスとラジオボタンは、「フォーム」のチェックボックスとラジオボタンの切替ボタンに移動
- 閉じるアイコンボタンを「ユーティリティ」から「コンポーネント」に移動(名称も「閉じるボタン」に変更)
- 画像置換は
.text-hide
クラスとmixinの削除とともに削除 - 「ユーティリティ」のうち、クリアフィックス、動画の埋め込み、位置ユーティリティの一部、スクリーンリーダー、伸長リンク、テキストの省略を「ヘルパー」として別項目に分離
※おそらくCSSプロパティが単一のクラスは「ユーティリティ」に、別途mixinが必要だったりCSSプロパティが複数(レスポンシブを除く)のクラス(ユーティリティAPIが使用できないもの)は「ヘルパー」に分離したと考えられる
【導入】
- 基本のテンプレート
- レスポンシブ・メタタグの設定で
shrink-to-fit=no
が不要に - jQueryの設置が不要に
- レスポンシブ・メタタグの設定で
- ファイルの内容
- ユーティリティクラスのみ組み込んだCSSファイル(
bootstrap-utilities.css
とbootstrap-utilities.min.css
)を提供 - ES Modulesに対応したJSファイル(
bootstrap.esm.js
とbootstrap.esm.min.js
)を提供
- ユーティリティクラスのみ組み込んだCSSファイル(
- ツールのセットアップ:ドキュメントの構築ツールがJekyllからHugoに変更(それに伴い構築システムでのRubyのインストールも不要に)(v4.6.0でバックポート)
- webpackにJavaScriptをインポートする場合、必要なプラグインが指定可能に
- デフォルトでRFSが有効に
- ブラウザとデバイス:「iOSでの焦点」「印刷での注意点」「Androidの標準ブラウザ」の各項目は削除
- JavaScript:データ属性APIの無効と
data-api
の名前空間とともに名前空間としてプラグインの名前を組み込む方法は削除
【カスタマイズ】
- Sassのカスタマイズ
$grays
,$colors
,$theme-colors
,$spacers
,$embed-responsive-aspect-ratios
,$form-validation-states
の各変数からmap-merge
を削除color()
,theme-color()
,gray()
関数を削除
- Sassオプション
$enable-grid-classes
(グリッドシステム用のCSSクラスの生成を有効/無効)を無効にしてもコンテナクラス(.container(-{fluid|breakpoint})
)の生成は無効にならなくなった$enable-prefers-reduced-motion-media-query
(特定のアニメーション遷移の抑制を有効/無効) ⇒$enable-reduced-motion
に名称変更$enable-pointer-cursor-for-buttons
(非無効のボタン要素での指カーソルの表示の有効/無効) ⇒$enable-button-pointers
に名称変更$enable-responsive-font-sizes
(レスポンシブ・フォントサイズの有効/無効)は$enable-rfs
に名称変更し、デフォルトでtrueに設定$enable-hover-media-query
と$enable-print-styles
(印刷を最適化するスタイル)を削除
- 全てのカラー
- Sassマップの
$blue
(#007bff ⇒ #0d6efd)と$pink
(#e83e8c ⇒ #d63384)のcolor
が変更
それに伴い{xxx}-primary
と<code>
のcolor
も変更 - Sassで定義される各カラーの陰影に応じたマップと変数を提供
- Sassマップの
- root変数
- 背景をグラデーション化する変数(
--bs-gradient
)を追加 - ブレークポイント変数(
--breakpoint-**
)を削除
- 背景をグラデーション化する変数(
【レイアウト】
- ブレークポイント
- ブレークポイントに1400pxのビューポートに対応した超特大(
xxl
)を追加 media-breakpoint-down()
は、次のブレークポイントではなく、そのブレークポイント自体を使用することになったmedia-breakpoint-between()
の2番目のパラメーターは、次のブレークポイントではなく、そのブレークポイント自体を使用することになった
- ブレークポイントに1400pxのビューポートに対応した超特大(
- コンテナ
- レスポンシブ・コンテナに
.container-xxl
を追加 - Sassのカスタマイズ等の解説を新設
- レスポンシブ・コンテナに
- グリッド
- グリッドのデフォルトのガター幅が
30px
(それぞれの端に15pxずつ)から1.5rem
(それぞれの端に0.75remずつ)に変更 .col-xxl(-*)
を追加- 行列グリッドクラスに
.row-cols(-{breakpoint})-auto
と.row-cols-xxl-*
を追加 - 「複数行の等幅」の解説は削除
- グリッドのデフォルトのガター幅が
- 列アイテム
- 水平方向の配置クラスに
.justify-content-evenly
(列の間隔を両端から均等に配置)を追加 - グリッド列の順序変更:
.order(-{breakpoint})-*
の設定できる整数が、0~12より0~5に変更され、.order-last
の設定もorder:13
からorder:6
に変更 .row
を設定せず、.col(-{breakpoint})-*
+.col(-{breakpoint})-*
...だけでグリッドの設定が可能に
- 水平方向の配置クラスに
- ガター
- グリッドにレスポンシブでガター(列間の余白)を設定する
.g({x|y})(-{breakpoint})-{size}
を新設 - ガターなしの設定:
.no-gutters
から.g(-{breakpoint})-0
に変更(レスポンシブな設定が可能に)
- グリッドにレスポンシブでガター(列間の余白)を設定する
【コンテンツ】
- Reboot
- ページデフォルト
<body>
のtext-align
の設定:left
からscss/_variables.scss
の$body-text-align
変数で設定可能に<body>
のfont-size
の設定:scss/_variables.scss
の$font-size-root
変数で設定可能に
- 基本のフォントスタック:system-uiを追加し、BlinkMacSystemFontを削除
- リンク(
<a>
):text-decoration
の設定がnone
からunderline
に変更(リンク部分に下線がつくことに) - リスト(
<ul>
,<ol>
):padding-left
をブラウザのデフォルトの40px
から2rem
にリセット - コードブロック:
.pre-scrollable
は廃止 - フォーム:
<legend>
ではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される - 引用:引用元の属性を
<blockquote>
の外側に配置
- ページデフォルト
- 文字の体裁
- 見出し(
<h1>
~<h4>
,.h1
~.h4
)、表示見出し(.display-1
~.display-6
)ではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される - 表示見出しに
.display-5
と.display-6
を追加 <small>
,.small
のfont-size
が80%
から0.875rem
に変更- 引用
</blockquote>
の手前の<p>
で.mb-0
は不要に<blockquote>
を<figure>
や<figcaption>
と組み合わせる設定に変更- 引用の配置:
blockquote.blockquote.text-{center|right}
からfigure.text-{center|right}
に変更
- 見出し(
- テーブル
- セルの
border-top
の設定がなくなったので、<thead>
と<tbody>
の境界線の太さで2pxの設定がなくなり、セルのpadding
が0.75rem⇒0.5remに変更 <tr>
に.table-dark
を追加した場合と、<th>
,<td>
に.table-dark
を追加した場合では背景色、枠線色が異なる現象が解消.table-{themecolor}
独自のborder-color
の設定がなくなった- カラーバリエーション・テーブルやアクセント付きテーブルの設定にCSSカスタムプロパティを使用
- テーブルを入れ子にしても子テーブルは親テーブルのスタイルを継承しなくなった(子テーブル独自のスタイル設定が可能に)
- テーブルの罫線:
table.table.table-bordered
に.border-{themecolor}
(罫線の色ユーティリティクラス)を追加すれば罫線の色が変更可能に <table>
,<tr>
,<th>
,<td>
にそれぞれ.align-**
を入れてテーブルの垂直方向の配置設定が可能に- テーブルの見出し:
thead.thead-{dark|light}
からthead.table-{themecolor}
に変更 - テーブルのキャプションを上部に配置する
.caption-top
を新設
- セルの
【フォーム】
- フォームの概要
- フォームテキスト(旧ヘルプテキスト):
.form-text
にあらかじめフォントサイズや色などを組み込んだので、<small>
や.text-muted
の設定は不要に
- フォームテキスト(旧ヘルプテキスト):
- フォームコントロール
- 基本の設定
.form-group
を廃止(.mb-3
などを使用)- フォームのラベル(
<label>
)には.form-label
の設定が必要に
- カラーピッカー用の設定:
input[type="color"].form-control
に.form-control-color
を追加 - データリスト:
input.form-control
で<datalist>
に対応可能に
- 基本の設定
- 従来のフォーム設定(
.form-xxx
)とカスタム・フォーム設定(.custom-xxx
)を一本化し、設定は従来的(.form-xxx
)に、スタイルはカスタム・フォーム的に統一- 選択メニュー:
select.form-control
をカスタム選択メニュー(select.custom-control
)のスタイルにして、新たにselect.form-select
に統一 - チェックボックスとラジオボタン:チェックボックスとラジオボタン(
.form-check
> [input.form-check-input
+label.form-check-label
])をカスタムチェックボックスとラジオボタン(div.custom-control.custom-{checkbox|radio}
> [input.custom-control-input
+label.custom-control-label
])のスタイルにして、.form-check
> [input.form-check-input
+label.form-check-label
] に統一 - ファイル選択:
.form-control-file
をカスタム・ファイル選択(.custom-file
)のスタイルにして、新たに.form-file
に統一し、さらに設定変更(label.form-file-label
内にspan.form-file-text
とspan.form-file-button
を設定) - レンジ入力:
.form-control-range
をカスタム・レンジ入力(.custom-range
)のスタイルにして、新たに.form-range
に統一
- 選択メニュー:
- チェックボックスとラジオボタン
- ラベル無し:
div.form-check
>input.form-check-input.position-static
からdiv
>input.form-check-input
に変更 - 切替ボタン:
.btn-group-toggle
とdata-toggle="buttons"
は不要になり、label.btn.btn-{themecolor}
><input>
からinput.btn-check
+label.btn.btn-{themecolor}
に変更
- ラベル無し:
- ファイル選択:大きめと小さめのサイズとして、
.form-file-lg
と.form-file-sm
を追加 - レンジ入力:無効化状態に、
pointer-events: none
を追加 - インプットグループ
- アドオン部分を囲む
div.input-group-prepend
やdiv.input-group-append
が不要に(.input-group-prepend
,.input-group-append
は廃止) - アドオン内をチェックボックスやラジオボタンする場合:
<input>
に.form-check-input
を入れる
- アドオン部分を囲む
- フォーム・レイアウト:グリッドクラスやユーティリティクラスでより簡潔に設定が可能なため
.form-row
,.form-group
,.form-inline
は廃止 - 入力検証:検証フィードバックをツールチップにする場合は、各
.col-md-*
に.position-relative
を追加し、.mb-3
を削除
【コンポーネント】
- 全てのJavaScriptの設定をjQueryに依存しない方法に変更(jQueryが検出された場合は従来の設定でも使用可)
- ソースファイルからJavaScriptを構築するのに
util.js
は必要でなくなった模様 - ボタングループ、ドロップダウン、リストグループ、ナビゲーション、ナビゲーションバーの各リンクをアクティブ化する場合は、
.active
で同じ要素にaria-current="true"
を入れる - ボタン、閉じるボタン、ページ送りの無効化状態に、
pointer-events: none
を追加 - アラート、カルーセル、折り畳み、ドロップダウン、リストグループ、モーダル、ナビ&タブ、ポップオーバー、スクロールスパイ、ツールチップの各プラグインに
getInstance
メソッドを追加 - アラート:
.alert-{themecolor}
内の<hr>
要素ではcolorにrgba()
を使用 - バッジ
- 通常のバッジの設定:
span.badge.badge-{themecolor}
⇒span.badge.bg-{themecolor}
- ピルバッジの設定:
span.badge.badge-{themecolor}.badge-pill
⇒span.badge.bg-{themecolor}.rounded-pill
- リンクのfocusとhoverのスタイルを廃止
- 通常のバッジの設定:
- パンくずリスト:セパレータの設定のうち、SVGアイコンのBASE64へのエンコードが不要に
- カード
- v4のカードデッキは、グリッドカードによる設定に変更(
.card-deck
は廃止) - カードコラム:
.card-columns
による設定からMasonryのJSファイルを使用した設定方法に変更(.card-columns
は廃止)
- v4のカードデッキは、グリッドカードによる設定に変更(
- カルーセル
ride
オプションはslide
に名称変更し、タイプにboolean
を追加number
メソッドは、to
に名称変更nextWhenVisible
メソッドを追加
- 閉じるボタン:
.close
ではビューポートが1200px未満の場合、自動的にフォントサイズが拡大縮小される - 折り畳み:カードコンポーネントによるアコーディオンのタイトルのリンク部分が
.text-body
から.link-dark.text-decoration-none
に変更 - ドロップダウン
- ドロップダウンボタンの設定で
aria-haspopup="true"
属性が不要に - セマンティックなHTMLマークアップを促進するためドロップメニューの設定を
div.dropdown-menu
>a.dropdown-item
からul.dropdown-menu
>li
>a.dropdown-item
に変更 - 横仕切り線:
div.dropdown-divider
から<li>
>hr.dropdown-divider
に変更
- ドロップダウンボタンの設定で
- リストグループ
- アクティブなアイテムにアクセシビリティの設定を追加(v4.6.0でバックポート)
- チェックボックスとラジオボタンをリストグループアイテム内に配置可能に
- モーダル:フルスクリーン・モーダルクラス(
.modal-fullscreen(-{breakpoint}-down)
)を新設 - ナビゲーションバー
- すべてのナビゲーションバーにおいて、
.navbar
の直下を.container(-{fluid|breakpoint})
(コンテナクラス)で囲む必要がある - アクティブメニューのリンク:
li.nav-item.active
>a.nav-link
>span.sr-only
からli.nav-item
>a.nav-link.active[aria-current="page"]
に変更
- すべてのナビゲーションバーにおいて、
- ポップオーバー:
template
オプション:.arrow
⇒.popover-arrow
- ツールチップ:
template
オプション:.arrow
⇒.tooltip-arrow
- ジャンボトロン:他のユーティリティクラスで構築可能なので、ジャンボトロンのクラス(
.jumbotron
,.jumbotron-fluid
)は廃止(本サイトでは設定例のみ表示) - メディアオブジェクト:他のユーティリティクラスで構築可能なので、メディアオブジェクトのクラス(
.media
,.media-body
)は廃止(本サイトでは設定例のみ表示)
【ヘルパー】
- ホバー状態のリンクの色を強調するリンクヘルパークラス(
.link-{themecolor}
)を新設 - 動画の埋め込み
[title]
の設定を追加$embed-respond-aspect-ratio
の記載方法がリストからSassマップに変更
- 位置ヘルパー:レスポンシブで最上部に達すると固定する
.sticky-{breakpoint}-top
を新設 - スクリーンリーダーのフォーカス時には表示:
.sr-only.sr-only-focusable
⇒.sr-only-focusable
- 伸張リンクをグリッドに設定する場合、
.col-*
に.position-static
は不要に
【ユーティリティ】
- ブレークポイントに超特大(
xxl
)が追加されたので、各.{property}-xxl(-{value})
クラスを追加 scss/_utilities.scss
ファイルにある$utilities
マップにユーティリティクラスの設定を移動し、クラス設定の解説としてユーティリティAPIを新設- カラーユーティリティ
- 文字色:
<a>
タグに.text-{themecolor}
を入れてもホバー時に濃いめに強調表示されなくなった⇒リンクヘルパークラス(.link-{themecolor}
)を使用 - 背景色
.bg-body
を追加<a>
タグに.bg-{themecolor}
を入れてもホバー時に濃いめに強調表示されなくなった
- 背景色のグラデーション化:
.bg-{themecolor}
に.bg-gradient
(デフォルトで生成済)を追加して設定が可能になったので、.bg-gradient-{themecolor}
は廃止
- 文字色:
- Flexユーティリティ
- 主軸方向のアイテムの整列クラスに
.justify-content(-{breakpoint})-evenly
を追加 - Flexアイテムの表示順:
.order(-{breakpoint})-*
の設定できる整数が、0~12より0~5に変更され、.order(-{breakpoint})-last
の設定もorder:13
からorder:6
に変更
- 主軸方向のアイテムの整列クラスに
- 相互作用ユーティリティ:ポインターイベントクラスとして、
.pe-{auto|none}
を新設 - 空白ユーティリティ:マイナスのマージンユーティリティクラス(
.m{sides}(-{breakpoint})-n{size}
)はデフォルトで生成されなくなった - テキストユーティリティ
- 文字の太さユーティリティクラスにフォントスタイルなし(
.font-normal
)を追加 - 行間ユーティリティクラスとして、
.lh-{size}
を新設 - 等幅フォントの設定:
.text-monospace
から.font-monospace
に名称変更 - テキストの装飾ユーティリティクラスに下線(
.text-decoration-underline
)と取消線(.text-decoration-line-through
)を追加 - 文字の均等割付ユーティリティクラス(
.text-justify
)を廃止(単語の間隔がよりランダムになり、読みにくくなるため)
- 文字の太さユーティリティクラスにフォントスタイルなし(
【拡張】
- アイコン
- Bootstrapアイコンを新設(v4.5.1でバックポート)
- オプションのアイコンライブラリにicofontを追加(v4.5.3でバックポート)