Bootstrap5設置ガイド
※2020/12/10:v5.0.0-beta1の公開に伴い更新。
PST(米国太平洋時間)2020/6/16にBootstrap v5.0.0-alpha1が公開されました。ここではBootstrap5の使い方をv4.xからの変更箇所も含めて日本語で解説しています。
解説はできるだけ最新版(v5.0.0-beta1)に対応するよう更新しています。
※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。
※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。
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では、フレームワーク全体にオプションのスタイル・シートとしてレスポンシブ機能を追加しました。Bootstrap3は、それを基にしてモバイルファーストのアプローチをデフォルトでレスポンシブするようにライブラリを再度書き直しました。
Bootstrap4では、Sassへの移行とCSSのFlexboxへの移行という2つの重要なアーキテクチャ上の変更を考慮してプロジェクトを書き直しました。我々の意図は、新しいCSSプロパティ、より少ない依存関係、最新のブラウザ間での新技術の導入を推進することで、Web開発コミュニティを少し進化させる手助けをすることです。
最新リリースであるBootstrap 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に移転した。
※公式サイトの各バージョンの解説は、https://getbootstrap.com/docs/versions/にある(3.0、3.1、3.2を除く)。
名称について
Bootstrapは常に、単にBootstrapと呼ばれなければなりません。前にTwitterも大文字のsもありません。
○ Bootstrap | × BootStrap | × Twitter Bootstrap |
ライセンスについて
Bootstrapは、コードがMITライセンス、ドキュメントがクリエイティブ・コモンズにより公開され、2011年の公開から現在まで、著作権はBootstrapの執筆者とTwitter社が保有している。
Bootstrap5の特長
- jQueryがなくても動作が可能になった(jQueryとの依存関係を解消)が、従来の設定でも動作は可能(v6からは動作不可になる予定)
- Popper v2に対応
- Internet Explorerをサポート外にして、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-*
に変更 - RFSによるレスポンシブ・フォントサイズがデフォルトで有効
- ブレークポイントに超特大(
xxl
)を追加するなどグリッドシステムを強化 - CSS Gridレイアウトに対応
- リンク部分の下線が無効から有効に
更新履歴
- PST 2020/6/16にBootstrap v5.0.0-alpha1が公開
- (PST 2020/8/4にBootstrap v4.5.1が公開)
- (PST 2020/8/6にBootstrap v4.5.2が公開)
- PST 2020/9/29にBootstrap v5.0.0-alpha2が公開
- (PST 2020/10/13にBootstrap v4.5.3が公開)
- PST 2020/11/11にBootstrap v5.0.0-alpha3が公開
- PST 2020/12/7にBootstrap v5.0.0-beta1が公開
- (PST 2021/1/19にBootstrap v4.6.0が公開)
- 今後はv4と機能調整をしながら、v5.0.0-bata1⇒v4.6.0⇒v5.0.0-bata2⇒v4.6.x⇒v5.0.0-安定版の順で公開する予定(v4とv5のリリース予定)
Bootstrap5.xの変更箇所(設定やCSSスタイルなどをピックアップ)
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.jsのバージョンが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
)を廃止(単語の間隔がよりランダムになり、読みにくくなるため)
- テキストの太さユーティリティクラスにフォントスタイルなし(