Bootstrap5設置ガイド
PST(米国太平洋時間)2021/5/5にBootstrap v5.0.0が公開されました。ここではBootstrap5の使い方をv4.xからの変更箇所も含めて日本語で解説しています。
解説はできるだけ最新版(v5.3.0-alpha3)に対応するよう更新しています。
※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。
※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。
Bootstrapとは?
もともとTwitter社のデザイナーや開発者が作成したBootstrapは、世界で最も人気のあるフロントエンドのフレームワークとオープンソースプロジェクトの1つとなっています。
Bootstrapは、Mark Otto(@mdo)、Jacob Thornton(@fat)の両氏によって2010年の中頃にTwitter社で作成されました。オープンソースのフレームワークになる前に、BootstrapはTwitter Blueprintという名で知られていました。数か月の開発期間を経て、Twitter社は最初のHack Week(社内イベント)を開催し、あらゆる技術レベルの開発者が外部の指導を受けずに飛び込んだため、プロジェクトが爆発的に拡大しました。公開前の1年以上の間、同社の社内ツール開発のスタイル・ガイドとして機能し、現在も続いています。
当初2011年8月19日(金)に公開され、その後v2とv3による2つの大きな書き換えを含む20回以上の更新をしてきました。Bootstrap2(2012/1/31公開)では、オプションのスタイル・シートとしてフレームワーク全体にレスポンシブ機能を追加しました。Bootstrap3(2013/8/19公開)は、それを基にしてモバイルファーストのアプローチをデフォルトでレスポンシブするようにライブラリを再度書き直しました。
Bootstrap4(2018/1/18公開)では、Sassへの移行とCSSのFlexboxへの移行という2つの重要なアーキテクチャ上の変更を考慮してプロジェクトを再度書き直しました。我々の意図は、新しいCSSプロパティ、依存関係の減少、最新のブラウザ間での新技術の導入を推進することで、Web開発コミュニティを少しずつ前進させる支援をすることです。
最新リリースであるBootstrap5(2021/5/5公開)は、重大な機能変更を最小限に抑えて、v4のコードベースの改善に重点を置いています。既存の機能とコンポーネントを改善し、古いブラウザのサポートを削除し、通常のJavaScriptのjQueryを削除し、ツールの一部としてCSSカスタムプロパティのようなより将来に適したテクノロジーを採用しました。
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を除く)。
名称について
Bootstrapは常に、単にBootstrapと呼ばれなければなりません。前にTwitterも大文字のsもありません。
ライセンスについて
Bootstrapは、コードがMITライセンス、ドキュメントがクリエイティブ・コモンズにより公開され、2011年の公開から現在まで、著作権はBootstrapの執筆者が保有している。
※もともとは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のコンパイルエラーをいくつか修正
※当初はv5.3.0のベータ版を出す計画だったが取り止めて、次回のアップデートでv5.3.0の安定版を出す予定。 - v5.3.0での更新予定(2022/05/13のブログ記事より)
- ダークモードに対応⇒v5.3.0-alpha1で対応済
- HTMLを記述するだけで、クラスと属性をプログラムで切り替える属性切替プラグイン。
- フォームをCSS変数を使用した構築に移行。
- 上部に貼り付くテーブルの見出し。
- ユーティリティAPIを変更するためのミックスインと関数。
- フローティングラベルフォームに"常にフローティング"を追加。
Bootstrap5.xの変更箇所(設定やCSSスタイルなどをピックアップ)
(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でバックポート)