Bootstrap4移行ガイド
※2022/7/20:v4.6.2の公開に伴い更新。
PST(米国太平洋時間)2018/1/18にBootstrap v4.0.0安定版が公開されました。これまでのBootstrap3.xから4.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでBootstrap4の使い方を3.xからの変更箇所を交えて解説しています。
解説はできるだけ最終版(v4.6.2)に対応するよう更新しています。
※Bootstrap 4は、2023/1/1に正式なサポートを終了すると発表されました。
※Bootstrap5.xの解説は、Bootstrap5設置ガイドをご覧下さい。
※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では、フレームワーク全体にオプションのスタイル・シートとしてレスポンシブ機能を追加しました。Bootstrap3は、それを基にしてモバイルファーストのアプローチをデフォルトでレスポンシブするようにライブラリを再度書き直しました。
Bootstrap4では、Sassへの移行とCSSのFlexboxへの移行という2つの重要なアーキテクチャ上の変更を考慮してプロジェクトを書き直しました。我々の意図は、新しいCSSプロパティ、より少ない依存関係、最新のブラウザ間での新技術の導入を推進することで、Web開発コミュニティを少し進化させる手助けをすることです。
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と呼ばれなければなりません。前にTwitterは不要で、大文字は省略形であるBのみでsは大文字ではありません。
○ Bootstrap | × BootStrap | × Twitter Bootstrap |
ライセンスについて
Bootstrapは、コードがMITライセンス、ドキュメントがクリエイティブ・コモンズにより公開され、2011年の公開から現在まで、著作権はBootstrapの執筆者とTwitter社が有している。
Bootstrap4の特長
Bootstrap4について
Bootstrapプロジェクトチームは、2014/10/29のv3.3.0公開時のブログ記事でBootstrap4のアルファ版が数週間でできると発表した(アルファ版は2015/8/19に公開された)。
その際に挙げた特長は以下のとおり。
- CSS開発言語がLessからSassに変更
- ツールの構築システムがGruntからnpm scriptsに変更
- グリッドシステムの改善(モバイルデバイスに新しいグリッド層を追加)
- 任意追加でFlexboxのサポート(Flexboxベースのグリッドシステムとコンポーネントを利用するためCSSを再コンパイル)⇒Flexboxはデフォルトで有効に
- パネル、サムネイル、囲み枠を廃止し新しいコンポーネントとしてカードを追加
- Normalize.cssではなくRebootという新しいモジュールの中ですべてのHTMLをリセット
- ブランドの新しいカスタマイズオプション(
gradient
transition
shadow
などのスタイル装飾をスタイルシートからSass変数に移動) - Internet Explorer8とiOS6はサポート外にし、サイズの単位をpxからremとemに切り替え⇒Internet Explorer9もサポート外に追加
- すべてのJavaScriptプラグインを書き直し(Universal Module Definitionをサポートし、ECMAScript2015(ECMAScript6)に書き直された)
- ツールチップとポップオーバーの自動配置を改善(Tetherというライブラリを使用⇒Popper.jsに変更)
- ドキュメントを改善してMarkdown記法で書き直し(CSS、Components、JavaScriptに分かれていたドキュメントをDocumentationに統一し、検索を可能にした)
更新履歴
- PST 2015/8/19にBootstrap v4.0.0-alphaが公開
- PST 2015/12/8にBootstrap v4.0.0-alpha.2が公開
- PST 2016/7/27にBootstrap v4.0.0-alpha.3が公開
- PST 2016/9/5にBootstrap v4.0.0-alpha.4が公開
- PST 2016/10/19にBootstrap v4.0.0-alpha.5が公開
- PST 2017/1/6にBootstrap v4.0.0-alpha.6が公開
- PST 2017/8/10にBootstrap v4.0.0-betaが公開
- PST 2017/10/19にBootstrap v4.0.0-beta.2が公開
- PST 2017/12/28にBootstrap v4.0.0-beta.3が公開
- PST 2018/1/18にBootstrap v4.0.0安定版が公開
- PST 2018/4/9にBootstrap v4.1.0が公開
- PST 2018/4/30にBootstrap v4.1.1が公開
- PST 2018/7/12にBootstrap v4.1.2が公開
- PST 2018/7/24にBootstrap v4.1.3が公開
- PST 2018/12/21にBootstrap v4.2.0を公開したが、直後にnpmで誤りが判明したので、修正してBootstrap v4.2.1を公開し直した。
- PST 2019/2/11にBootstrap v4.3.0が公開
- PST 2019/2/13にBootstrap v4.3.1が公開(新しいHTMLサニタイザーを実装することにより、ツールチップとポップオーバープラグインのXSSの脆弱性(CVE-2019-8331)を修正)
- PST 2019/11/26にBootstrap v4.4.0が公開
同日長期サポートに移行(新機能の追加を停止し、バグの修正、セキュリティや解説の更新のみ行う) - PST 2019/11/28にBootstrap v4.4.1が公開(v4.4.0で
add()
とsubtract()
を導入したが、node-sassでは機能するもののDart SassやRuby Sassで問題が発生するので修正) - PST 2020/5/12にBootstrap v4.5.0が公開(当初はパッチ修正版としてv4.4.2を公開予定だったが、v4と今後のv5のギャップを埋めるのに役立つ新機能などを搭載したのでバージョン名を変更した)
- PST 2020/8/4にBootstrap v4.5.1が公開
- PST 2020/8/6にBootstrap v4.5.2が公開
- PST 2020/10/13にBootstrap v4.5.3が公開
- PST 2021/1/19にBootstrap v4.6.0が公開
- (PST 2021/5/5にBootstrap v5.0.0が正式に公開)
- PST 2021/10/28にBootstrap v4.6.1が公開
- PST 2021/11/1にメンテナンスサポートに移行(重大なバグの修正、セキュリティや解説の更新のみ行う)
- PST 2022/7/19にBootstrap v4.6.2が公開
- PST 2023/1/1にサポート終了
Bootstrap4の今後
Bootstrapプロジェクトチームは、2018/12/21のv4.2.1公開時のブログ記事では、Bootstrap5(2021/5/5公開)では、コードベースに対する大幅な変更はなく、PostCSSに移行も検討したがv5ではそのままSassを使用し、残骸の除去や既存のコンポーネントを改善し、古いブラウザ(IE10/11)やjQueryとの依存関係を排除することに注力するとし、2019年早々にも計画をプレビューし開発モードに入るとした。
そして、2019/7/24のブログ記事でBootstrap 4は、v4.4.0の公開(2019/11/26)をもって長期サポート(LTS)に移行し、今後、新機能は提供されないが、引き続きバグの修正、セキュリティやドキュメントの更新を受け付けていると発表した。
さらに、2022/7/20のv4.6.2公開時のブログ記事で、v4.6.2のリリース以降は、v5.2.0のリリース(2022/7/20)をもって、すべてをv5以降に注力することにし、主要なセキュリティや依存関係の更新以外に、v4.6.xに意味のある更新を出す予定はなく、2023年1月1日にBootstrap 4のサポートを正式に終了すると発表した(それ以降も長く使用し続けることは大いに歓迎している)。
Bootstrap3との主な変更点
(v4への移行を一部加筆、Bootstrap v4.6.2時点)
v4.6.xでの変更
v4.6.xでの設定変更一覧
v4.6.2 変更内容の詳細
- アクセシビリティ:推奨されるカラーコントラストに「WCAG 2.1の非テキストカラーコントラスト比3:1」を追加
- 文字の体裁:
<small>
,.small
のfont-size
が80%から0.875remに変更 - ボタングループ:ボタンとドロップダウンを関連付けるための
button.btn.btn-{themecolor}.dropdown-toggle
のid="ID"
とul.dropdown-menu
のaria-labelledby="ID"
属性はそれぞれ不要に - 折り畳み:水平方向に折り畳むを新設
- ドロップダウン:
- ドロップダウンボタンとドロップダウンを関連付けるための
button.btn.btn-{themecolor}.dropdown-toggle
のid="ID"
とul.dropdown-menu
のaria-labelledby="ID"
属性はそれぞれ不要に - ドロップレフトの分離ボタンの設定:
.btn-group.dropleft
のrole="group"
が不要に
- ドロップダウンボタンとドロップダウンを関連付けるための
- ナビゲーションバーのドロップダウン設定:リンクとドロップダウンを関連付けるための
a.nav-link.dropdown-toggle
のid="ID"
とul.dropdown-menu
のaria-labelledby="ID"
属性はそれぞれ不要に - ナビゲーション:JavaScript動作のタブ/ピル部分が
a.nav-link[href]
からbutton.nav-link[data-bs-target type="button"]
に変更
v4.6.1 変更内容の詳細
- ※各項目の【Bootstrap3.xとの変更箇所】を【変更履歴】の【v4.0.0】に変更
- jQueryのバージョン:3.5.1⇒3.6.0(CDNの提供元も:JQueryからjsDelivrに変更)
- テーマ:
- ソースSassファイルのインポート:オプションBの変数、mixinの設置場所の変更
- 変数のデフォルト値:変数、mixinの設置場所の変更
- ツールのセットアップ:セットアップ用のツールは、Node.js16/npm8に対応
- ボタン
- カルーセル:スライドコントロールの設定をリンクボタンからボタンに変更
- ドロップダウンボタンの設定で
aria-haspopup="true"
属性が不要に - ナビゲーション付きカード、ドロップダウン、リンク付きリストグループ、ナビゲーション、ナビゲーションバー、ページ送りの無効リンクの場合には、
href
属性、tabindex="-1"
、aria-disabled="true"
の設定が不要に
v4.6.0 変更内容の詳細
- はじめに:CSPと組み込みSVGを追加
- テーマ:変数のデフォルト値の変数の上書きの設置場所が変更
- ツールの構築:
- ツールのセットアップ:ドキュメントの構築ツールがJekyllからHugoに変更(それに伴い構築システムでのRubyのインストールも不要に)
- Sassコンパイラを追加
- 利用可能な変数の
--font-sans-serif
や基準のフォントスタックに"Liberation Sans"
が追加 - ブロックボタンのモバイルのみブロック表示(裏技)の設定を変更
- カルーセル:タッチスワイプを無効にするを新設
- フォーム:水平フォーム、インプットグループの検証の設定を変更
- リストグループ:アクティブなアイテムにアクセシビリティの設定を追加
- ナビゲーションバー:スクロールを新設
- ページ送り:ページ送りの現在の位置で
span.sr-only
は不要に - ポップオーバー、ツールチップに
customClass
オプションが追加 - トースト:設定例にライブを新設
- 伸長リンク:テーブルの場合(裏技)は、機能しない場合があるため削除
- アプローチ:コード規約を追加
v4.5.xでの変更
v4.5.xでの設定変更一覧
v4.5.3 変更内容の詳細
- CDNの提供元:StackPathからjsDelivrに変更
- ポップオーバー:GPUアクセラレーションと変更されたシステムDPIが原因で、Windows10デバイスでポップオーバーがぼやける現象と回避策を注意喚起
- アイコン:オプションのアイコンライブラリにicofontとCoreUI Iconsが追加
v4.5.2 変更内容の詳細
- 設定上の変更は見られない
- v4.4.0のレスポンシブコンテナの追加から最新の行と列の調整まで、グリッドシステムに段階的な変更を加えていくつかの問題は解決したが、新たに動作の不具合が見つかったので修正(一旦削除した
make-container-max-widths
mixinの復活、.row
からflex: 1 0 100%
の削除)
v4.5.1 変更内容の詳細
- Popper.jsのバージョンが1.16.0から1.16.1に
- リストグループ付きカード:カードヘッダとリストの間の二重線が解消
- フォーム:入力検証のサーバー側の検証にアクセシビリティの設定を追加
- モーダル:モーダルコンテンツで
div.modal
のrole="dialog"
属性の追加は不要に - ナビゲーション:幅一杯と等幅サイズを
<nav>
で設定する場合やタブ/ピルナビゲーションをナビゲーションで設定する場合は、a.nav-link
に.nav-item
の追加は不要に - ナビゲーションバー:ナビゲーションを
<nav>
><div>
で設定する場合は、a.nav-link
に.nav-item
の追加は不要に - 単語の改行:スタイル設定にv4.5.0で外された
word-break: break-word
を再設定
v4.5.0 変更内容の詳細
- jQueryのバージョンが3.4.1から3.5.1に
- サポート対応ブラウザ:Windows 10 Mobileはサポート終了に伴いサポート外に、MacOS版のEdgeが公開されたのでサポート対象に
- ツールの構築:セットアップツールはNode.js10未満、Ruby2.6未満をサポート外に。
JavaScriptのminifierツールがUglifyJSからterserに変更 - Reboot:ボタン上のポインターを新設(デフォルトのカーソルを
pointer
に変更可能) - フォーム:インプットグループの検証の回避策(インプット部分の角丸の設定バグ回避)を新設
- モーダル:モーダルコンテンツで
div.modal-dialog
からrole="document"
属性の追加は不要にbackdrop
オプションでstatic
を設定した場合、escキーを押したらモーダルが閉じられるように再変更(escキーを押しても閉じられないためにはdata-keyboard="false"
を入れる必要がある) - タブ/ピルナビゲーション:
li.nav-item
に、role="presentation"
を入れることに(v3の設定に戻る) - スクロールスパイの
target
オプションのタイプにjQueryオブジェクトとDOM要素が追加 - 相互作用ユーティリティクラスとして、
.user-select-{all|auto|none}
を新設 - 単語の改行:
.text-break
のスタイルがword-break: break-word
,overflow-wrap:break-word
からword-wrap:break-word
に変更 - 均等サイズのボタングループ(※裏技)の設定方法を
.btn.w-100
から.btn.flex-fill
に変更
v4.4.xでの変更
v4.4.xでの設定変更一覧
v4.4.1 変更内容の詳細
- 裏技のモバイルのみブロック表示(
<button>
タグやインプット<input>
ボタンの場合):.btn.btn-{themecolor}.w-auto
⇒.btn.btn-{themecolor}.flex-fill.flex-md-grow-0
- 折り畳みのカードコンポーネントによるアコーディオンをカードヘッダのどこをクリックしても開閉可能な仕様に変更
これに伴い裏技の「カードヘッダのどこをクリックしても開閉可能」を削除
v4.4.0 変更内容の詳細
【新設】
- フォームなどの埋め込み背景画像SVGを簡素化するために
escape-svg()
関数を導入 - CSSに組み込まれた
calc
機能によるエラーやゼロ値を回避するためにadd()
とsubtract()
関数を導入 - レスポンシブ・コンテナ(
.container-{breakpoint}
)を新設 - 行列グリッドクラスとして
.row-cols(-{breakpoint})-*
を新設
カードで使用する場合のグリッドカードも新設 - ドロップダウン、ポップオーバー、ツールチップにpopperConfigオプションが追加
【更新】
- jQueryのバージョンが3.3.1から3.4.1に
- Popper.jsのバージョンが1.14.7から1.16.0に
.btn
に.text-nowrap
を追加してボタンのテキストの折り返しを無効にすることが可能に- ボタンプラグインの設定で
autocomplete="off"
は不要に - モーダル:
backdrop
オプションがstatic
のときに、モーダルの外側だけでなくescキーを押してもモーダルが閉じられなくなった。また閉じない時のアニメーションも追加
イベントとしてhidePrevented.bs.modal
も追加 - FeatherがIconicに代わって推奨アイコンとなり、推奨外のオプションアイコンライブラリからGlyphを削除
v4.3.xでの変更
v4.3.xでの設定変更一覧
v4.3.1 変更内容の詳細
【新設・追加】
- ツールチップとポップオーバープラグインのXSSの脆弱性(CVE-2019-8331)を修正するためHTMLサニタイザーを実装
v4.3.0 変更内容の詳細
【新設・追加】
- 無効でない
<button>
と<input>
ボタン要素では指カーソル()になる- Sassオプションに
$enable-pointer-cursor-for-buttons
が追加 - Rebootの設定で無効でない
<button>
と<input>
ボタン要素ではカーソルが矢印カーソル()から指カーソル()に変更 - ボタンによるリストグループでリンクのカーソルが矢印カーソル()から指カーソル()に変更
- Sassオプションに
- 文字の体裁:レスポンシブの
font-size
の設定がmixinからRFSの使用に変更- Sassオプションに
$enable-responsive-font-sizes
が追加
- Sassオプションに
- カード:水平スタイルの設定例を追加
- 折り畳み:カードヘッダのどこをクリックしても開閉可能の設定がBootstrapの定義済クラスを追加するだけで可能に
- フォーム:
scss/_variables.scss
ファイルにある$form-validation-states
マップを使ってSassでカスタマイズ可能に - リストグループ:水平スタイル
.list-group-horizontal
とレスポンシブに対応した.list-group-horizontal-{sm|md|lg|xl}
が追加 - モーダル:モーダル本体をスクロール可能にする
.modal-dialog-scrollable
が追加 - 境界ユーティリティ:角丸の大きさに
.rounded-{sm|lg}
が追加 - 表示ユーティリティのvalue値は、
scss/_variables.scss
内の$displays
変数を変更してSCSSを再コンパイルすることで変更可能に - 包含ブロックをクリック可能にする伸長リンクとして
.stretched-link
を新設 - 単語の改行設定に
.text-break
が追加
【更新】
- Popper.jsのバージョンが1.14.6から1.14.7に
v4.2.xでの変更
v4.2.xでの設定変更一覧
v4.2.1 変更内容の詳細
- 設定上の変更は見られない
- スクロールスパイ:
method
,target
オプションが追加
v4.2.0 変更内容の詳細
【新設・追加】
- yarnでインストール可能に
- テーマ:Sassオプションに
$enable-prefers-reduced-motion-media-query
(遷移効果の抑制)、$enable-validation-icons
(検証状態のアイコン)が追加 - カルーセル:個別のアイテムに循環の間隔設定が可能に
タッチスクリーンデバイス上での左右のスワイプが可能となり、オプションにtouch
が追加 - ドロップダウン:特定のナビゲーションバーまたはタブ付きナビゲーションのドロップダウンメニューを表示/非表示させるため、メソッドに
show
とhide
が追加
ドロップダウンメニューの配置がレスポンシブに対応(.dropdown-menu{-sm|-md|-lg|-xl}-left
が追加) - フォーム:カスタムフォームに切替スイッチを追加
data-browse
属性でカスタムファイル入力の"参照"ボタンをHTMLでカスタマイズ可能に - モーダル:モーダルの大きさに特大
.modal-xl
が追加
アニメーションの変更を追加 - ページのロード状態を示すスピナーを新設
- 軽量な通知メッセージを表示するトーストを新設
- 境界ユーティリティ:角丸の設定に長丸を設定する
.rounded-pill
が追加 - はみ出しユーティリティ:要素のはみ出し部分の表示を設定する
.overflow-auto
と.overflow-hidden
を新設 - サイズユーティリティ:ビューポイント100%に設定する
.vw-100
,.vh-100
と、最小をビューポイント100%に設定する.min-vw-100
,.min-vh-100
を新設 - 空白ユーティリティ:マイナスのマージンクラス(
.m{sides}(-{breakpoint})-n{size}
)を新設 - テキストユーティリティ:文字の折り返しに
.text-wrap
が追加
文字の太さに.font-weight-lighter
と.font-weight-bolder
が追加
テキストやリンクの色などを親要素から継承する.text-reset
を新設
装飾線を無効にする.text-decoration-none
を新設
【更新】
- メディアオブジェクトの解説がレイアウトからコンポーネントに移動
- Popper.jsのバージョンが1.14.3から1.14.6に
- フォーム:
div.form-check
の部分もdiv.form-group
で囲む - インプットグループ:
.input-group
に.flex-nowrap
を追加して折り返し無効が可能に - リストグループ:ヘッダありリンクつきリストグループのリンク(
a.list-group-item.list-group-item-action
)の設定 で.flex-column.align-items-start
(アイテムを縦積み左寄せ)が不要に - ドロップダウン・リストグループ・ナビゲーション:無効の場合は、
.disabled
と同じ要素にtabindex="-1" aria-disabled="true"
を追加 - ページ送り:アイコン操作のリスト部分で
span.sr-only
の設定が不要に
リンクを無効化する場合、a.page-link
にaria-disabled="true"
も追加 - 実例で使われているBootstrapのJSファイルをPopper.jsが含まれているバンドル版に変更
v4.1.xでの変更
v4.1.xでの設定変更一覧
v4.1.3 変更内容の詳細
- ブラウザとデバイス:npmプロジェクト間で意図しない継承されたブラウザ設定を避けるため、
package.json
のbrowserslist設定を別のファイル(.browserslistrc
)に移動 - 実例:一部の実例の設定変更
v4.1.2 変更内容の詳細
- 設定上の変更は見られない
v4.1.1 変更内容の詳細
- Popper.jsのバージョンが1.14.0から1.14.3に
- フォーム:カスタムファイル選択で検証スタイルの設定が可能に
- 画像置換:デフォルトで非表示に
v4.1.0 変更内容の詳細
- BootstrapCDNの提供元がMaxCDNからStackPathに変更
- jQueryのバージョンが3.2.1から3.3.1に
- Popper.jsのバージョンが1.12.9から1.14.0に
- アクセシビリティ:macOSとiOSのSafariで提供されている
prefers-reduced-motion
メディア機能(モーションを小さくする機能)をサポート - テーブル:罫線のないテーブル用に
.table-borderless
が追加 - パンくずリスト:セパレータの変更方法を追加
- カルーセル:スライドをフェード遷移するために
.carousel-fade
が追加
遷移期間を変更する方法を追加 - 折り畳み:カードによるアコーディオンの設定でカード同士を合体させるために
.accordion
が追加 - ドロップダウン:フリーフォームのテキスト付きドロップダウンメニューの設定が可能に
リンクの無いドロップダウンメニューアイテムを作成するのに.dropdown-item-text
が追加
オプションにreference
,display
が追加 - フォーム:レンジ入力(input type="range")用に
.form-control-range
が追加。同様にカスタムフォームのレンジ入力として.custom-range
が追加 - ナビゲーションバー:フォームの右寄せを設定変更
- カラーユーティリティ:文字色に
.text-body
,.text-black-50
,.text-white-50
が追加 - Flexユーティリティ:アイテムを幅一杯にするために
.flex(-{breakpoint})-fill
が追加
アイテムの伸縮用に.flex(-{breakpoint})-{grow|shrink}-0
と.flex(-{breakpoint})-{grow|shrink}-1
が追加 - 画像置換
.text-hide
を廃止(コンパイル時に警告が表示)⇒v5で削除予定 - 陰影ユーティリティ(
.shadow(-{size})
)を新設 - サイズユーティリティ:幅と高さを
auto
に設定する.w-auto
と.h-auto
が追加 - テキストユ ーティリティ:等幅フォントの設定用に
.text-monospace
が追加
v4.0.0安定版での変更(Stable changes)
Beta3からv4.0安定版への移行には大きな変更はないが、いくつかの変更はある。
印刷(Printing)
- 印刷表示ユーティリティの問題を修正。以前は
.d-print-*
クラスを使用すると、突然他の.d-*
クラスを上書きした。それを他の表示ユーティリティとマッチし、そのメディアにのみ適用(@media print
)。 - 他のユーティリティとマッチする利用可能な印刷表示ユーティリティを拡張。Beta3では
block
,inline-block
,inline
,none
しかなかったが、v4.0安定版にはflex
,inline-flex
,table
,table-row
,table-cell
が追加。
つまり、.d-print-flex
,.d-print-inline-flex
,.d-print-table
,.d-print-table-row
,.d-print-table-cell
が追加。 @page
size
を指定する新しい印刷スタイルで、ブラウザ間での印刷プレビューのレンダリングを修正。
v4.0.0安定版での設定変更一覧
- グリッド:列の順序変更で、
.order(-{breakpoint})-0
と優先的に最後に表示させる用に.order(-{breakpoint})-last
が追加 - フォーム:入力検証のフィードバックをツールチップで表示可能にするため
.valid-tooltip
が追加 - リストグループ:
.list-group-flush
を追加して枠なし表示が可能に - 境界ユーティリティ:罫線の表示位置用に
.border-top
,.border-right
,.border-bottom
,.border-left
が追加。 - 表示ユーティリティ:印刷時の表示用に
.d-print-flex
,.d-print-inline-flex
,.d-print-table
,.d-print-table-row
,.d-print-table-cell
が追加
v4.0.0-beta.3での変更(Beta 3 changes)
Beta2では、ベータ段階で大きな変化が見られたが、まだBeta3のリリースで対処しなければならないものがいくつか存在する。これらの変更は、Beta2以前のバージョンのBootstrapからBeta3に更新する場合に適用。
その他(Miscellaneous)
- 未使用の
$thumbnail-transition
変数を削除。何も変更しておらず、ちょうど余分なコードだった。 - npmパッケージには、ソースファイルとdistファイル以外のファイルは含まれていない。それらに頼って、自分で
node_modules
フォルダを通してスクリプトを実行していたなら、自分のワークフローを適応させること。
フォーム(Forms)
カスタムとデフォルトの両方のチェックボックスとラジオを書き換え。現在、両方ともHTML構造(外側の
<div>
で囲んだ<input>
や<label>
)と同じレイアウトスタイル(デフォルトの縦積みスタイル、修飾子クラスの横並びスタイル)を一致させた。これにより、inputの状態に基づいてラベルをスタイルすることができ、disabled
属性(以前は親クラスが必要)のサポートが簡素化され、フォームの検証機能によりうまくサポート。その一環として、カスタムフォームのチェックボックスやラジオで複数の背景イメージを管理するためのCSSを変更。以前は、削除した
.custom-control-indicator
要素に背景色、グラデーション、SVGアイコンの設定が存在し、背景グラデーションをカスタマイズすると、1つ変更するたびにそのすべてを置き換えていたが、今度は、塗りつぶしとグラデーションの.custom-control-label::before
とアイコンを扱う.custom-control-label::after
に分けた。横並びのカスタムチェックボックスを作成するには、
.custom-control-inline
を追加することに。- inputベースのボタングループのセレクタを更新。スタイルと動作用の
[data-toggle="buttons"] { }
の代わりに、JSの動作用だけにdata
属性を使い、新しい.btn-group-toggle
クラスに依存してスタイル。
つまり、チェックボックスやラジオボタンの使用では、.btn-group[data-toggle="buttons"]
に.btn-group-toggle
を追加することに。 .col-form-label
を改善して.col-form-legend
を削除。これにより.col-form-label-sm
と.col-form-label-lg
は<legend>
要素でも簡単に使用可能に。- カスタムファイル入力は、
$custom-file-text
Sass変数に変更。それはもはや入れ子になったSassマップではなく、現在はSassから生成された唯一の擬似要素であるように、Browse
(参照)ボタンを1つの文字列に提供。Choose file
(ファイルを選択)テキストは、.custom-file-label
から取得されるようになった。
インプットグループ(Input groups)
- インプットグループのアドオンは、入力コントロールに対する配置を固有のものに。
.input-group-prepend
と.input-group-append
の2つのクラスを新設し、.input-group-addon
と.input-group-btn
を廃止。明示的にappendまたはprependを使う必要があるが、CSSの多くを単純化。appendまたはprependの中なら、どこにでも存在するようにボタンを配置するが、.input-group-text
にテキストを入れて囲む。 - 複数のテキスト入力設定と、同様に検証スタイルをサポート(ただしグループごとで1つの入力のみが検証可能)。
- サイズのクラスは、個々のフォーム要素ではなく、親の
.input-group
に設定。
v4.0.0-beta.3での設定変更一覧
- Popper.jsのバージョンが1.12.3から1.12.9に
- Reboot:情報詳細表示(
<details> > <summary>
)使用時のアンカーを指カーソル にリセット - コード:コード表示(
<code>
)の文字色、文字サイズの変更と背景の設定がなくなった - テーブル:レスポンシブテーブルの設定を
table.table.table-responsive
からv3のようにdiv.table-responsive > table.table
に戻した - ボタン:プラグインによるチェックボックスやラジオボタンの使用では、
div.btn-group[data-toggle="buttons"]
に.btn-group-toggle
を追加することに - ドロップダウン:ドロップライト
.dropright
、ドロップレフト.dropleft
が可能に - フォーム:チェックボックスとラジオボタンを書き換え(カスタムフォームを含む)
カスタム選択メニューで大きめのサイズ.custom-select-lg
、multiple
属性、size
属性のサポートが追加
カスタムファイル選択を書き換え - インプットグループ:設定を全面的に書き換え
1つのグループで複数のコントロールの設置が可能に
コントロールの部分が、カスタム選択メニュー、カスタムファイル入力でも使用可能に - モーダル:垂直方向に中央に配置するため
.modal-dialog-centered
が追加 - ナビゲーション:個々のタブをアクティブにするJavaScriptの設定方法を変更
- リンクされていないボタン、ナビゲーションバー切替ボタン、閉じるボタンにカーソルを合わせた際に、指カーソル に変化する仕様に戻した
- ドロップダウン、ポップオーバー、ツールチップ:
boundary
オプションが追加
v4.0.0-beta.2での変更(Beta 2 changes)
Beta版では、大きな変化がないことを目指しているが、物事は常に計画どおりに進むとは限らない。以下は、Beta1からBeta2に移行する際の留意点。
変更(Breaking)
$badge-color
変数と.badge
でその使い方を削除。background-color
に基づいてcolor
を選ぶために色のコントラスト関数を使うので、変数は不要になった。- CSSのネイティブ
grayscale
フィルタとの衝突を避けるため、grayscale()
関数の名前をgray()
に変更。 .table-inverse
,.thead-inverse
,.thead-default
の名前を.*-dark
と.*-light
に変更して、他の場所で使用されているカラースキームと一致させた。
つまり、.table-inverse
⇒.table-dark
.thead-default
⇒.thead-light
.thead-inverse
⇒.thead-dark
にそれぞれ変更。- レスポンステーブルは、各グリッドのブレークポイントごとにクラスを生成するようになった。beta1で使用していた
.table-responsive
は.table-responsive-md
のように変更。必要に応じて.table-responsive
や.table-responsive-{sm,md,lg,xl}
が使用可能に。 - 代替パッケージ(例:Yarnやnpm)があるので、パッケージマネージャーとしてのBowerのサポートを廃止。詳細については、bower/bower#2298を参照。
- Bootstrapは、依然としてjQuery1.9.1以上で対応しているが、バージョン3.xを使用することを推奨。これは、v3.xがサポートされているブラウザはBootstrapでサポートされているものであり、v3.xではいくつかのセキュリティ上の修正があるため。
- 未使用の
.form-control-label
クラスを削除。このクラスを使用していたなら、<label>
を垂直方向に配置した.col-form-label
クラスと重複していた。 color-yiq
を、color
プロパティを含むmixinから値を返す関数に変更。これを使用して任意のCSSプロパティで使用可能に。例えば、color-yiq(#000)
の代わりに、color: color-yiq(#000);
という色を書くことが可能。
v4.0.0-beta.2での設定変更一覧
- Popper.jsのバージョンが1.11.0から1.12.3に
- HTML5のdoctypeの宣言が大文字から小文字に
- Windows Phone 8.1のサポートが終了したので、Windows Phone 8のIE10バグの回避策の掲載を削除
- コンパイル済のjsファイルが、
bootstrap.bundle.js
とbootstrap.bundle.min.js
の他に、あらかじめPopper.jsが組み込まれているbootstrap.bundle.js
とbootstrap.bundle.min.js
も使用可能に - カスタマイズの方法の記載をカスタマイズオプションからテーマに変更
- グリッド:列の順序変更で、優先的に最初に表示させる用に
.order(-{breakpoint})-first
が追加
一旦廃止になった空白列(オフセット)の設定が.offset(-{breakpoint})-*
で復活 - Reboot:デフォルトのfont-familyに絵文字用のフォントが追加
- テーブル:暗めのテーブルのクラスを
.table-inverse
⇒.table-dark
に変更
表見出し用のクラスを.thead-default
⇒.thead-light
、.thead-inverse
⇒.thead-dark
にそれぞれ変更
レスポンステーブルの設定に.table-responsive-{sm,md,lg,xl}
を追加し、従来の.table-responsive
は常時レスポンシブ表示用に変更 - イメージ:
<picture>
要素に対応 - アラート:メッセージを閉じるアイコンボタンを付ける場合は、《閉じるアイコンボタン》⇒《アラート文》の順から《アラート文》⇒《閉じるアイコンボタン》の順に変更
- パンくずリスト:リストで設定する場合も
<nav>
で囲むことと、アクセシビリティの設定を追加 - 折り畳み:オプションの
parent
のタイプにjQuery objectとDOM elementが追加 - ドロップダウン:メニューフォーム(
div.dropdown-menu
内に<form>
を入れる)が可能に
オプションのplacement
は廃止され、offset
のタイプにfunctionが追加 - フォーム:ラベル無しのチェックボックスとラジオボタンでは、
input.form-check-input
に.position-static
を追加することに - ナビゲーション:タブJavaScriptプラグインを使用する際には、ドロップダウンの使用は不可に、一部のアクセシビリティの設定を変更
- ポップオーバー:オプションの
container
のタイプにelement
と、selector
のタイプにfalse
がそれぞれ追加 - プログレスバー:太さの設定が
.progress-bar
にstyle="height:**;"
を入れるから.progress
にstyle="height:**;"
を入れるに変更 - ツールチップ:オプションの
container
のタイプにelement
と、selector
のタイプにfalse
がそれぞれ追加 - アラート、ボタン、カルーセル、折り畳み、ドロップダウン、モーダル、タブ、スクロールスパイの各プラグインのメソッドに
dispose
(破棄)が追加 - カラーユーティリティ:背景のグラデーション用に
.bg-gradient-{themecolor}
が追加 - 表示ユーティリティ:テーブル行表示用に
.d(-{breakpoint})-table-row
が追加 - 位置ユーティリティ:共通の値として、通常の位置
.position-static
、相対位置.position-relative
、絶対位置.position-absolute
、固定位置.position-fixed
、Sticky位置.position-sticky
が追加 - テキストユーティリティ:細めの文字用に
.font-weight-light
が追加
ハイライト(Highlights)
- モーダルに新しく
pointer-events
を導入。外側の.modal-dialog
はカスタムクリック処理用のpointer-events:none
イベントを通り抜ける(クリックすると.modal-backdrop
を受け付け可能)。そして実際の.modal-content
をpointer-events:auto
に置き換える。
概要(Summary)
ここでは、v3からv4に移行する際に知っておくべき重大な項目を紹介。
サポート対応ブラウザ(Browser support)
- IE8, IE9をサポート外に。Internet Explorerは10以上、iOSは7以上をサポート。必要とするならv3を使用すること。
※実質的にはAutoprefixerをサポートするブラウザ(Chrome45以上、Firefox通常安定版+ESR版、EdgeHTML12以上、Explorer10以上、iOS9以上、Safari9以上、非公式でAndroid4.4以上とOpera30以上)をサポート。 - Androidのバージョン5.0 LollipopのブラウザとWebViewは公式サポートに追加、それ以前のAndroidのバージョンのブラウザとWebViewは非公式でのサポートのまま。
全体の変更(Global changes)
- Flexboxがデフォルトで有効に。一般的にこれはfloatやその他のコンポーネント間の移動を意味する。
- ソースCSSファイルが、LessからSassに変更。
- デバイスのビューポートはタイプサイズの影響を受けないため、メディアクエリやグリッドの動作には
px
が使用されるが、主なCSSの単位は、px
からrem
に変更。 - 全体のフォントサイズは、
14px
から1rem
(ブラウザのデフォルトは16px
)に変更。 font-family
は、デフォルトのWebフォント(Helvetica Neue, Helvetica, Arial)を廃止し、各デバイスのシステムフォントを自動継承するフォントスタックに変更。- 5番目のオプション(
576px
以下の極小デバイスのアドレス指定)を追加し、それらのクラスから-xs
の挿入を削除した。例:.col-6.col-sm-4.col-md-3
。 - SCSS変数(例:
enable-gradients: true
)を使用して、設定可能なオプションで別のオプションのテーマに置き換え可能。 - Gruntの代わりに一連のnpmスクリプトを使用するようにシステムを改良。すべてのスクリプトについては
package.json
を、ローカル開発のニーズについてはプロジェクトのreadmeを参照する。 - Bootstrapの非レスポンスでの使用はサポートしない(
non-responsive.css
は提供しない)。 - オンラインでのカスタマイズを廃止し、より包括的なセットアップドキュメントとカスタマイズされた構築方法を採用。
- 一般的なCSSのプロパティ値とmargin/paddingのショートカット用に、数多くの新しいユーティリティクラスを追加。
- 視力の弱い人や色盲のユーザーに配慮して、v3のものよりコントラスト比を高めて鮮やかな色遣いに。
- テーマカラーとして、Secondary、Light、Darkが追加。
グリッドシステム(Grid system)
- Flexboxに移動
- グリッドmixinと定義済のクラスにFlexboxのサポートが追加。
- Flexboxの一環として、垂直および水平配置クラスのサポートも含む。
- 更新されたグリッドクラス名と新しいグリッド層
- より細かく制御するため768px以下に新しい
sm
グリッド階層が追加され、xs
,sm
,md
,lg
,xl
となった。これはまた、すべての階層でレベルが1つ上がることを意味する(v3の.col-md-6
が、v4の.col-lg-6
に該当)。 xs
グリッドクラスは、設定されたピクセル値でなくmin-width:0
スタイルを適用し始めることをより正確に表すために、中間の記号挿入を必要としないように修正。.col-xs-6
は.col-6
になる。その他のすべてのグリッド層には、記号挿入(たとえば、sm
)が必要。
- より細かく制御するため768px以下に新しい
- グリッドサイズ、mixin、および変数が更新
- グリッド溝にはSassマップが追加され、各ブレークポイントで特定の溝幅を指定可能。
- グリッドmixinを更新し、
make-col-ready
プレップmixinとmake-col
を使用して、個々の列サイズのflex
とmax-width
を設定。 - 新しいグリッド階層を考慮し、グリッド・システムのメディアクエリのブレークポイントとコンテナ幅を変更して、最大幅は
12
列で割り切れるようにした。 - グリッドのブレークポイントとコンテナ幅は、いくつかの別々の変数ではなく、Sass map (
$grid-breakpoints
と$container-max-width
) によって処理されるようになった。これらは、@screen-*
変数を完全に置き換え、グリッド階層を完全にカスタマイズすることを可能にした。 - メディアクエリも変更。メディアクエリ宣言は毎回同じ値の繰り返しではなく、
@include media-breakpoint-up/down/only
を用いる。つまり@media (min-width: @screen-sm-min) { ... }
と書く代わりに@include media-breakpoint-up(sm) { ... }
と書くようにした。
コンポーネントの変更(Components)
- パネル(Panels)、サムネイル(Thumbnails)、囲み枠(Wells)を廃止し、新しくカード(Cards)に統一。
- Glyphiconsアイコンフォントを廃止。アイコンが必要な場合、いくつかのオプションがある:
- Glyphiconsの上級バージョン
- GitHubのOcticons
- Font Awesome
- そのほかの代替リストについては、拡張 > アイコンに記載。
- AffixのjQueryプラグインを廃止。
- 代わりに
position: sticky
の使用を推奨。詳細および特定のポリフィルの推奨事項については、See the HTML5 Please entryに記載。提案の1つが、それを実装するために@support
ルールを使用すること(例:@supports (position: sticky) { ... }
)。
※CSSでposition: sticky
を設定する場合、.sticky-top
が使用可能に。 - Affixを使用して追加のnon-
position
スタイルを適用していた場合、ポリフィルはその使用をサポートしていない可能性がある。そのような使用オプションの1つが、サードパーティのScrollPos-Stylerライブラリ。
- 代わりに
- 本質的に若干カスタマイズされたボタンということで、ページャー(Pager)を廃止。
- 子セレクタでなく、より多くの入れ子でないクラスセレクタを使用するように、ほとんど全てのコンポーネントの内部構造を改善。
各項目での変更事項(By component)
このリストは、コンポーネントなどのv3.x.xとv4.0.0の間での主な変更点を列挙。
グリッドシステム(Grid system)
sm
として新しい576px
グリッドブレークポイントが追加。つまり、合計5つの階層(xs
,sm
,md
,lg
,xl
)に。.col-xs-*
は全てのデバイスに対応するため、.col-*
に名称変更。- Flexboxへの移行によってより簡単なグリッドクラスにするため、レスポンシブ・グリッド修飾子クラスを名称変更。例えば、
.col-{breakpoint}-offset-*
は、.offset(-{breakpoint})-*
に変更(※offsetは4.0.0-beta.1で一旦廃止されたが、4.0.0-beta.2で復活)。 - 新しいFlexboxで動作する
order
クラスが追加されたので、pushとpull修飾子クラスは廃止。例えば.col-8.col-push-4
と.col-4.col-pull-8
の代わりに.col-8.order-2
と.col-4.order-1
を使用。
つまり、.col-{breakpoint}-{push,pull}-*
は、.order(-{breakpoint})-*
に変更。
優先的に最初/最後に表示させるために.order(-{breakpoint})-first
,.order(-{breakpoint})-last
も使用可能。 - 列の可変幅コンテンツ用に
.col(-{breakpoint})-auto
が追加。 - Flexboxのグリッドシステムとコンポーネント用ユーティリティクラスが追加。
- 左右脇の余白を削除可能にする
.no-gutters
を新設。
Reboot
Rebootは、Bootstrap4の新機能で、CSSをNormalizeをベースに新しく構築したやや独断的なリセットスタイルシート。このファイルに表示されるセレクタは要素のみで使用し、クラスはつけていない。これにより多くのモジュールアプローチのためにリセットスタイルをコンポーネントスタイルから分離。最も重要なリセットは box-sizing: border
の変更で、多くの要素、リンクスタイル、多くのフォーム要素のリセットで rem
単位から em
単位への変更も含まれている。
文字の体裁(Typography)
- すべての
.text-
ユーティリティを、_utilities.scss
ファイルに移動。 - ページヘッダ(Page header)
.page-header
を廃止し、見出し表示用に新しく.display-*
を新設。 .dl-horizontal
は廃止。代わりに、<dl>
で.row
を使用し、その子要素の<dt>
と<dd>
にグリッド列クラス(およびmixin)を使用。長い項目の場合は、<dt>
に.text-truncate
を追加して省略させる。- 再設計された引用(ブロッククォート)は、そのスタイルを
<blockquote>
要素から単一のクラス.blockquote
に移動し、枠線のスタイルを廃止。.blockquote-reverse
は廃止され、配置には.text-{center,right}
クラスを使用。 .list-inline
(横並びリスト)では、li
要素に.list-inline-item
が必要に。
コード(Code)
<code>
のスタイルは、文字色、文字サイズの変更と背景の設定がなくなり、<a>
(リンク)内にあるときには、フォントの大きさと字体以外はリセットされることに。
イメージ(Images)
.img-responsive
は、.img-fluid
に名称変更。.img-rounded
は、.rounded
に、.img-circle
は.rounded-circle
にそれぞれ名称変更され、境界ユーティリティに移動。- 横の配置ユーティリティクラスなどでイメージの配置が可能に。
<picture>
要素に対応して特定の<img>
に.img-*
が設定可能に。
テーブル(Tables)
- ほぼすべての
>
セレクタのインスタンスが削除。つまり、入れ子になったテーブルは自動的に親からスタイルを継承し、セレクタと潜在的なカスタマイズが大幅に簡素化。 - レスポンシブテーブルは、
囲み要素が不要となり、単に<table>
に.table-responsive
を入れるだけに。
つまり設定がdiv.table-responsive > table.table
からtable.table.table-responsive
に変更。div.table-responsive > table.table
の設定のまま。(※v4.0.0-beta.3で元に戻る)
特定のブレークポイント以下でレスポンシブ表示になるよう.table-responsive-{breakpoint}
が追加(従来の.table-responsive
は.table-responsive-md
に)。 .table-condensed
は、一貫性のため.table-sm
に名称変更。- 暗めのテーブル用に新しく
.table-dark
オプションが追加。 - 表見出しオプションとして、
.thead-light
と.thead-dark
が追加。 - 行/セルの背景色のクラスである
.**
は、.table-**
に名称変更。
つまり、.active
,.success
,.warning
,.danger
,.info
は、それぞれ.table-active
,.table-success
,.table-warning
,.table-danger
,.table-info
に名称変更され、.table-secondary
,.table-light
,.table-dark
が追加。 - 罫線のないテーブル用に
.table-borderless
が追加【v4.1.0】。
図表(Figures)
- 画像のキャプション用に、新しく
figure.figure
,img.figure-img
,figcaption.figure-caption
を新設。
アラート(Alert)
- 色の種類に
.alert-primary
,.alert-secondary
,.alert-light
,.alert-dark
が追加 - アラートをフェードインで閉じる:
.alert-dismissible.fade.in
⇒.alert-dismissible.fade.show
に変更。 - 《閉じるアイコンボタン》⇒《アラート文》の順から《アラート文》⇒《閉じるアイコンボタン》の順に変更
ラベルとバッジ(Labels and badges)
.label
と.badge
を統合して.badge
に統一し、<label>
要素から曖昧さを排除し、関連コンポーネントを簡素化。- 丸みを帯びた"pill"外観のための修飾子クラスとして
.badge-pill
を追加。 .badge
は、リストグループやその他のコンポーネントで自動的に配置しないので、右寄せなどには別途ユーティリティクラスが必要に。.badge-default
(v3での.label-default
)を.badge-secondary
に名称変更して、他の場所で使用されていたコンポーネント修飾子クラスと一致させた。
パンくずリスト(Breadcrumbs)
.breadcrumb
の子要素に、明示的なクラス.breadcrumb-item
が必要に。- 設定は、
ol.breadcrumb > li
⇒<nav> > ol.breadcrumb > li.breadcrumb-item
に変更。
ボタン(Buttons)
.btn-default
は、.btn-secondary
に名称変更し、.btn-light
と.btn-dark
が追加。- 新しく
.btn-outline-*
(アウトラインボタン)が追加。 .btn-xs
を完全に廃止し、.btn-sm
はv3の時よりもサイズが小さくなった。button.js
jQueryプラグインのステートフルボタン機能は、$().button(string)
と$().button('reset')
メソッドを含めて完全に廃止。その代わりにカスタムJavaScriptの使用を推奨。それは必要な方法で正確に動作するという利点がある。- プラグインの他の機能(チェックボックスボタン、ラジオボタン、切替ボタン)は、引き続きv4でも保持。
- プラグインによるチェックボックスやラジオボタンの使用では、
.btn-group[data-toggle="buttons"]
に.btn-group-toggle
を追加することに。 - IE9以上は
:disabled
をサポートしているので、ボタンの[disabled]
は:disabled
に変更。しかしIE11でもフィールドセットの無効化はまだバグだらけなので、fieldset[disabled] は依然として必要。
ボタングループ(Button group)
- Flexboxでコンポーネントを書き直し。
.btn-group-justified
(等幅サイズ)は廃止。代わりに、.w-100
の要素を囲むラッパーとして<div class="btn-group d-flex" role="group"></div>
を使用する。.btn-xs
(極小サイズのボタン)の廃止に伴い、.btn-group-xs
を完全に廃止。- ボタンツールバーのボタングループ間の明示的な間隔を削除。今後はmarginユーティリティクラスを使用する。
カルーセル(Carousel)
- コンポーネント全体を見直し、デザインとスタイリングを簡素化した。再定義するスタイル、新しいインジケータ、新しいアイコンが少なくなった。
- すべてのCSSは入れ子にせずに名前が変更され、各クラスには接頭辞に
.carousel-
が付くことに。- カルーセル項目については、
.next
,.prev
,.left
,.right
が、それぞれ.carousel-item-next
,.carousel-item-prev
.carousel-item-left
.carousel-item-right
に名称変更。 .item
は、.carousel-item
に名称変更。- 前/次のコントロールの場合、
.carousel-control.right
と.carousel-control.left
は、.carousel-control-prev
と.carousel-control-next
になった。つまり、特定の基本クラスが不要に。 - フェード遷移でスライドをアニメーション化するために
.carousel-fade
が追加【v4.1.0】。
- カルーセル項目については、
- レスポンシブしやすいすべてのスタイルを削除し、必要に応じてユーティリティ(例:特定のビューポートにキャプションを表示)やカスタムスタイルを追加した。
- カルーセル項目のイメージのイメージ再定義を削除し、ユーティリティに追加した(スライドコントロールのアイコンは、Glyphiconsアイコンではなく、
span.carousel-control-prev-icon
,span.carousel-control-next-icon
で設定)。 - 新しいマークアップとスタイルを組み込むためにカルーセルの実例を調整。
折り畳みスタイル(Collapse)
- コンテンツが開いた状態で表示:
.collapse.in
⇒.collapse.show
に変更。 - アコーディオンの設定:v3のパネルからカードでの作成に変更。
ドロップダウン(Dropdowns)
- 親セレクタからすべてのコンポーネント、修飾子などの単一クラスに切り替え。
設定は、ul.dropdown-menu > li > a
⇒div.dropdown-menu > a.dropdown-item
に変更。 - ドロップダウンスタイルを簡素化して、上向きまたは下向きの矢印がドロップメニューに取り付けられた。
- ドロップダウンスタイルとマークアップを再構築して、
<a>
または<button>
ベースのドロップダウン項目を簡単に組み込むことが可能。 .divider
は、.dropdown-divider
に名称変更。- ドロップダウンの項目に、
.dropdown-item
が必要に。 - キャレット(▼)
<span class="caret"></span>
が不要に。CSSの.dropdown-toggle
の::after
で自動的に提供。 - ドロップアップだけでなく、ドロップライト
.dropright
、ドロップレフト.dropleft
も可能に。 div.dropdown-menu
内に<form>
を入れることが可能に。- 分離ボタンドロップダウンでドロップダウンキャレットの周りに適切な間隔を設定するため、
button.btn.dropdown-toggle
に.dropdown-toggle-split
が必要に。 - メニューが開いた状態で表示:
.open > .dropdown-menu
⇒.show > .dropdown-menu
に変更。 - Popper.jsの利用に伴い、オプションが新設。
$().dropdown('update')
,$().dropdown('dispose')
メソッドが追加。- リンクの無いドロップダウンメニューアイテムを作成するのに
.dropdown-item-text
が追加【v4.1.0】。
フォーム(Forms)
- 要素は、
_reboot.scss
ファイルにリセット。 .control-label
は、.col-form-label
に名称変更。.input-lg
と.input-sm
は、それぞれ.form-control-lg
と.form-control-sm
に名称変更。- 簡略化のため
.form-group-*
を廃止し、代わりに.form-control-*
を使用。 .help-block
を廃止し、ブロックレベルのヘルプテキストの場合は.form-text
に変更。横並びのヘルプテキストやその他の柔軟なオプションについては、.text-muted
のようなユーティリティクラスを使用する。- チェックボックスとラジオボタンの設定に、
.form-check
,.form-check-label
,.form-check-inline
,.form-check-input
を追加して機能を大幅に改善。 .radio-inline
と.checkbox-inline
は廃止。.form-check
と様々な.form-check-*
クラスのために.checkbox
と.radio
は廃止。- グリッドを使ったフォームの整備:
.form-horizontal
クラスの要件を廃止。.form-group
は、mixinを介して.row
を適用しなくなった。従って水平グリッドレイアウト(例:<div class="form-group row">
)では、.row
が必要に。.form-control
の垂直中央向けラベルに新しく.col-form-label
が追加。- ラベルの大きめのサイズ
.col-form-label-lg
と、小さめのサイズ.col-form-label-sm
が追加。 - グリッドクラスによるコンパクトフォームレイアウト用に新しく
.form-row
を追加(.row
の代わり.form-row
を使用)。
- 検証スタイルは、CSS
:invalid
と:valid
の疑似クラスを介したHTML5フォーム検証機能を使用したスタイルに変更され、.has-warning
,.has-error
,.has-success
,.has-feedback
,.form-control-feedback
はそれぞれ廃止。 - 新しくカスタムフォーム(チェックボックス、ラジオ、選択メニュー、およびファイル入力用)のオプション
custom-*
,custom-control-*
を新設。 .form-control-static
(静的テキスト)は、.form-control-plaintext
(読み取り専用プレーンテキスト)に名称変更。- レンジ入力(input type="range")用に
.form-control-range
が追加。同様にカスタムフォームのレンジ入力として.custom-range
が追加【v4.1.0】
ジャンボトロン(Jumbotron)
- 幅一杯のジャンボトロン用に
.jumbotron-fluid
が追加。
リストグループ(List groups)
- Flexboxでコンポーネントを書き直し。
a.list-group-item
を明示的なクラスの.list-group-item-action
に置き換えて、リストグループのリンクとボタンバージョンの項目をスタイル。
設定は、a.list-group-item
⇒a.list-group-item.list-group-item-action
button.list-group-item
⇒button.list-group-item.list-group-item-action
にそれぞれ変更。- 背景色に、Primary
.list-group-item-primary
、Secondary.list-group-item-secondary
、Light.list-group-item-light
、Dark.list-group-item-dark
が追加。 - 右側にバッジをとりつける場合は、《項目の内容》⇒《バッジの表示》(
span.badge.badge-{theme-color}.badge-pill
)の順に記載する必要がある。 - 空白ユーティリティクラスで代用可能なので、
.list-group-item-heading
と.list-group-item-text
は廃止。 - 枠なし表示用に
.list-group-flush
クラスが追加。 - タブJavaScriptプラグインを使用して、リストグループでタブ切替パネルの作成が可能に。
インプットグループ(Input group)
.input-group-prepend
(前のアドオン用)と.input-group-append
(後のアドオン用)を新設し、.input-group-addon
と.input-group-btn
は廃止。- 片側に複数のアドオンの設定が可能に。
- 複数のコントロールの設定が可能に。
- コントロールはテキスト入力だけでなく、カスタム選択メニュー、カスタムファイル入力でも使用可能に。
メディアオブジェクト(Media object)
- Flexboxと空白ユーティリティクラスで構築することになったので、
.media
と.media-body
のみで設定可能となり、.media-object
,.media-heading
,.media-left
,.media-right
,.media-top
,.media-middle
,.media-bottom
,.media-list
は廃止。
モーダル(Modal)
- Flexboxでコンポーネントを書き直し。
- Flexboxへ移行したので、floatは使用しておらず、ヘッダー内の閉じるアイコンの配置が崩れる可能性がある。フローティングコンテンツが最初に来るが、もはやFlexboxはない。その場合は閉じるアイコンを更新してモーダルのタイトルを修正する。
つまり、モーダルのヘッダの記載順が《閉じるアイコンボタン》⇒《タイトル》の順から《タイトル》⇒《閉じるアイコンボタン》の順に変更。 - モーダルを垂直方向に中央に配置するため
.modal-dialog-centered
が追加。 remote
オプション(外部コンテンツを自動的にロードしてモーダルに挿入するために使用)と、それに対応するloaded.bs.modal
イベントは廃止。代わりにクライアント側のテンプレートやデータバインディングフレームワークを使用するか、 jQuery.load を自分で呼び出すことを推奨。
ナビゲーション(Navs)
- Flexboxでコンポーネントを書き直し。
- ほぼすべての
>
セレクタを廃止し、入れ子でないクラスを使用した簡単なスタイル設定に。 .nav > li > a
のようなHTML特有のセレクタの代わりに.nav
,.nav-item
,.nav-link
といったクラスを使用し、HTMLの柔軟性と拡張性が向上。
設定は、ul.nav > li > a
⇒ul.nav > li.nav-item > a.nav-link
(またはnav.nav > a.nav-link
)に変更。- Flexユーティリティクラスの使用で、ナビゲーションの右寄せ(
.justify-content-end
)や中央揃え(.justify-content-center
)が可能に - 縦積みナビゲーション(
.nav-stacked
)は、Flexユーティリティクラスの.flex-column
が新設されたので廃止。 - 均等サイズのナビゲーション(
.nav-justified
)はv3.3.0でサポート外となったが、v4で復活。 - 不均等サイズの幅一杯のナビゲーション(
.nav-fill
)が追加。 - タブJavaScriptプラグインを使用する際には、ドロップダウンの使用は不可に。
- タブパネルをフェードインさせる:
.tab-pane.fade.in
⇒.tab-pane.fade.show
に変更。
ナビゲーションバー(Navbar)
Flexboxでは、配置、レスポンシブ性、カスタマイズのサポートが強化され、ナビゲーションバーが完全に書き直された。
- レスポンシブ性の高いナビゲーションバーの動作は、必須の
.navbar-expand(-{breakpoint})
を介して.navbar
クラスに適用され、これまでは変数の変更が少なく、再コンパイルが必要だったナビゲーションバーを折りたたむボタンの位置が選択可能に。 .navbar-default
は、.navbar-light
に、.navbar-inverse
は、.navbar-dark
に変更。各ナビゲーションバーにはこれらのうちのどちらかが必要だが、これらのクラスはbackground-color
(背景色)を設定しなくなった。代わりに本質的にはcolor
(文字色)にしか影響しない。- ナビゲーションバーでは、何らかの背景色の設定が必要に。背景色ユーティリティ(
.bg-*
)から選択するか、上記の.navbar-light
,.navbar-dark
クラスを設定して配色のカスタマイズをする。 - Flexboxスタイルを指定すると、ナビゲーションバーでFlexユーティリティが使用可能に。
.navbar-toggle
は、.navbar-toggler
になり、異なるスタイルと内部マークアップ(3つ以上の<span>
)はなくなった。- もはや必要ではないので、
.navbar-form
は完全に廃止。代わりに.form-inline
を使用して、必要に応じてmarginユーティリティを適用する。 - ナビゲーションバーには、デフォルトで
margin-bottom
やborder-radius
が設定されなくなったので、必要に応じてユーティリティを使用する。 - ナビゲーションバーを特徴とするすべての実例は、新しいマークアップを含むように更新された。
ページ送り(Pagination)
- Flexboxでコンポーネントを書き直し。
.pagination
の子孫の要素に、明示的なクラス(.page-item
,.page-link
)が必要に。
設定は、ul.pagination > li > a
⇒ul.pagination > li.page-item > a.page-link
に変更。- Flexユーティリティクラスの使用で、v3で廃止となったページ送りの右寄せ(
.justify-content-end
)や中央揃え(.justify-content-center
)が復活。 .pager
コンポーネントは廃止(ボタンとバッジ(.btn.page-link.badge-pill
)で代用的に同じような外観で使用することは可能)。
ポップオーバー(Popovers)
- viewportオプションは廃止。
- templateオプションのテンプレートが一部変更。
- Popper.jsの利用に伴い、offset、fallbackPlacement、boundaryオプションが追加。
- メソッドで、
.popover('destroy')
は、.popover('dispose')
に名称変更し、.popover('enable')
,.popover('disable')
,.popover('toggleEnabled')
,.popover('update')
が追加。
プログレスバー(Progress)
- HTML5の
<progress>
要素を使用して設定するように変更する予定だったが取り止めに(従来同様div.progress > div.progress-bar
で設定)。 - プログレスバーの太さの設定が可能に。
- プログレスバーの色の設定には、背景色ユーティリティクラス(
.bg-{theme-color}
)を使用するので、.progress-bar-{theme-color}
は廃止。例えば、class="progress-bar progress-bar-danger"
は、class="progress-bar bg-danger"
となる。 - アニメーションプログレスバーの
.active
を.progress-bar-animated
に変更。
スクロールスパイ(ScrollSpy)
- ナビゲーション形式だけでなく、リストグループ形式での使用が可能に。
ツールチップ(Tooltips)
- viewportオプションは廃止。
- Popper.jsの利用に伴い、offset、fallbackPlacement、boundaryオプションが追加。
- メソッドで、
.tooltip('destroy')
は、.tooltip('dispose')
に名称変更し、.tooltip('enable')
,.tooltip('disable')
,.tooltip('toggleEnabled')
,.tooltip('update')
が追加。
パネル、サムネイル、囲み枠(Panels, thumbnails, and wells)
新しいコンポーネント「カード」ができたので完全に廃止。
パネル(Panels)
.panel
は、.card
に。.panel-default
は、廃止され代替もなし。.panel-group
は、廃止され代替もなし。(.card-group
はあるが、全く異なるもの).panel-heading
は、.card-header
に。.panel-title
は、.card-header
に。目的の外観に応じて、見出しの要素やクラス(例:<h3>
,.h3
)や太字の要素やクラス(例:<strong>
,<b>
,.font-weight-bold
)でも使用可能。.card-title
は、同様な名前が付けられているが、カードのコンテンツのタイトル用で、.panel-title
とは外観が異なる。.panel-body
は、.card-body
に。.panel-footer
は、.card-footer
に。.panel-primary
,.panel-success
,.panel-info
,.panel-warning
,.panel-danger
は、それぞれ.bg-{themecolor}
,.text-{themecolor}
,.border-{themecolor}
の使用に。
サムネイル(Thumbnails)
div.thumbnail
は、div.card
に。div.caption
は、div.card-body
に。
囲み枠(Wells)
.well
は、.card.card-body.bg-light
に。.well.well-lg
は、.card.card-body.bg-light.p-5
に。.well.well-sm
は、.card.card-body.bg-light.p-2
に。
境界ユーティリティ(Borders)
- 枠罫線用のクラスとして、
.border
,.border-0
,.border-top
,.border-right
,.border-bottom
,.border-left
,.border-top-0
,.border-right-0
,.border-bottom-0
,.border-left-0
を新設。 - 罫線の色が
.border.border-{themecolor}
または.border.border-white
で設定可能に。 .rounded
,.rounded-top
,.rounded-right
,.rounded-bottom
,.rounded-left
,.rounded-circle
,.rounded-0
を新設し、角丸の位置指定が可能に。- 画像だけでなく、背景色クラスやボタンなどでも設定可能。
カラーユーティリティ(Colors)
- 文字色に
.text-secondary
,.text-dark
,.text-light
,.text-white
が追加。.text-muted
のリンクスタイルは削除。
さらに.text-body
,.text-black-50
,.text-white-50
が追加【v4.1.0】 - テキストやリンクの色などを親要素から継承する
.text-reset
が追加【v4.2.0】 - 背景色に
.bg-secondary
,.bg-dark
,.bg-light
,.bg-white
と 透過用に.bg-transparent
が追加。 - 背景のグラデーション用に
.bg-gradient-{themecolor}
が追加。
クリアフィックス(Clearfix)
- 古いバージョンのブラウザのサポートを中止するように更新。
表示ユーティリティ(Display property)
- 大量の
.hidden-*
ユーティリティクラスを新しい表示ユーティリティクラスに変更。例えば、.hidden-sm-up
の代わりに.d-sm-none
を使用。.hidden-print
ユーティリティの名前を変更して、表示ユーティリティの命名規則を使用。詳細はレスポンシブユーティリティの項目に記載。 - レスポンシブ・ユーティリティの閲覧時の表示/非表示クラスを次のとおりに変更。
.visible-{breakpoint}-inline
⇒.d(-{breakpoint})-inline
.visible-{breakpoint}-block
⇒.d(-{breakpoint})-block
.visible-{breakpoint}-inline-block
⇒.d(-{breakpoint})-inline-block
.hidden-{breakpoint}
⇒.d(-{breakpoint})-none
.d(-{breakpoint})-none
,.d(-{breakpoint})-table
,.d(-{breakpoint})-table-cell
,.d(-{breakpoint})-table-row
,.d(-{breakpoint})-flex
,.d(-{breakpoint})-inline-flex
を新設。- レスポンシブ・ユーティリティの印刷時の表示/非表示クラスを次のとおりに変更。
.visible-print-block
⇒.d-print-block
.visible-print-inline
⇒.d-print-inline
.visible-print-inline-block
⇒.d-print-inline-block
.hidden-print
⇒.d-print-none
.d-print-flex
,.d-print-inline-flex
,.d-print-table
,.d-print-table-row
,.d-print-table-cell
を新設。
動画の埋め込み(Embeds)
- 21:9のアスペクト比:
.embed-responsive-21by9
と、1:1のアスペクト比:.embed-responsive-1by1
が追加。
Flexユーティリティ
- 大量のFlexユーティリティクラスを新設。
.flex(-{breakpoint})-row
,.flex(-{breakpoint})-column
,.justify-content(-{breakpoint})-*
,.align-items(-{breakpoint})-*
,.align-self(-{breakpoint})-*
,.flex(-{breakpoint})-fill
,.flex(-{breakpoint})-grow-*
と.flex(-{breakpoint})-shrink-*
,.flex(-{breakpoint})-wrap
,.order(-{breakpoint})-*
,.align-content(-{breakpoint})-*
など。
横の配置ユーティリティ(Float)
- レスポンシブ配置として
.float(-{breakpoint})-{left,right,none}
クラスが追加され、.pull-left
と.pull-right
は、それぞれ.float-left
と.float-right
に名称変更。
位置ユーティリティ(Position)
- 要素の位置決めなどに使用する
.position-static
,.position-relative
,.position-absolute
,.position-fixed
,.position-sticky
,.fixed-top
,.fixed-bottom
,.sticky-top
を新設。
サイズユーティリティ(Sizing)
- widthのユーティリティクラスとして、
.w-25
,.w-50
,.w-75
,.w-100
,.w-auto
を新設。 - heightのユーティリティクラスとして、
.h-25
,.h-50
,.h-75
,.h-100
,.h-auto
を新設。 - max-widthのユーティリティクラスとして、
.mw-100
と、max-heightのユーティリティクラスとして、.mh-100
を新設。
空白ユーティリティ(Spacing)
margin
の設定として、.m{sides}(-{breakpoint})-{size}
クラスを新設。padding
の設定として、.p{sides}(-{breakpoint})-{size}
クラスを新設。.mx-auto
が新設されたので、.center-block
は廃止。
テキストユーティリティ(Text)
- レスポンシブな文字の配置として
.text(-{breakpoint})-{left,center,right}
が追加。 - 文字の太さとイタリック体の設定として、
.font-weight-bold
,.font-weight-normal
,.font-weight-light
,.font-italic
を新設。
縦の配置ユーティリティ(Vertical alignment)
.align-baseline
,.align-top
,.align-middle
,.align-bottom
,.align-text-top
,.align-text-bottom
を新設。
可視性ユーティリティ(Visibility)
- 表示:
.show
は、.visible
または.d-block
に変更。 - 領域自体も非表示:
.hidden
は、.d-none
に変更。
ベンダープレフィックスmixin(Vendor prefix mixins)
v3.2.0で廃止されたBootstrap3のベンダープレフィックスmixinは、Bootstrap4で削除。Autoprefixerを使用しているので、もはや必要ない。
以下のmixinを削除:animation
, animation-delay
, animation-direction
, animation-duration
, animation-fill-mode
, animation-iteration-count
, animation-name
, animation-timing-function
, backface-visibility
, box-sizing
, content-columns
, hyphens
, opacity
, perspective
, perspective-origin
, rotate
, rotateX
, rotateY
, scale
, scaleX
, scaleY
, skew
, transform-origin
, transition-delay
, transition-duration
, transition-property
, transition-timing-function
, transition-transform
, translate
, translate3d
, user-select
レスポンシブ・ユーティリティ(Responsive utilities)
すべての @screen-
変数は、v4.0.0で削除。代わりに、Sass mixinの media-breakpoint-up()
, media-breakpoint-down()
, media-breakpoint-only()
または、Sass mapの $grid-breakpoints
を使用する。
レスポンシブ・ユーティリティクラスの整備⇒レスポンシブ・ユーティリティクラスは、明示的な表示ユーティリティを優先して削除。
- jQueryの
$(...).hide()
と$(...).show()
に干渉するため、.hidden
と.show
は廃止。代わりに[hidden]
属性に切り替えるか、style="display: none;"
やstyle="display: block;"
のようなスタイルを使用する(.show
は.visible
か.d-block
を、.hidden
は.d-none
を使用)。 .hidden-
クラスは、名称変更されたプリントユーティリティを除いてすべて廃止。- v3の次のクラスは廃止:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
- v4 alphaの次のクラスも廃止:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
.hidden-xl-up
.hidden-xl-down
- 印刷時のユーティリティは
.hidden-
や.visible-
で始まるのではなく、.d-print-
で始まるよう変更。
明示的な .visible-*
クラスを使用するのではなく、単にそのスクリーンサイズでは非表示にしないことで要素の表示が可能。1つの .d-*-none
クラスと1つの .d-*-block
クラスを組み合わせて特定のスクリーンサイズの間だけ要素を表示することが可能(例:.d-none.d-md-block.d-xl-none
は、デバイスが中、大のときのみ要素を表示)。
v4のグリッドブレークポイントの変更は、同じ結果を得るために、1段階ブレークポイントを大きくする必要があることに注意。新しいレスポンシブ・ユーティリティクラスは、要素の可視性を1つの連続したビューポートサイズの範囲として表現できず、あまり一般的でない事例では対応しようとしない。そのような場合は代わりにカスタムCSSを使用する必要がある。