ブートストラップv3からv4の変更点をご紹介

2017-08-27 最終更新日:2017-08-27

ようやくv4のβ版が登場しました。あれから２年です。。。長いですね。

あとはβ版が何個か出たら正式リリースするようなのでもう少しで正式版はリリースしそうです。

多少変わるところはあるかもしれませんがガラッと変わることはなさそうなのでv3との違いを載せておこうかと思います。

実際リリースされたらここの記事も変更するようにします。

現状のv4のマイグレーションドキュメントの翻訳です。Google翻訳を使っているので変な言葉になっているかもしれませんがご了承下さい。適宜に変えております。

概要

ここでは、V4にV3から移動するときに注意点などを記載しておきます。

ブラウザのサポート

v4ではIE8、IE9とiOS 6のサポートを落としました。現在はIE10以上とiOS7以上になっております。
Androidのバージョン5.0のロリポップのブラウザとWebViewのための公式のサポートを追加しました。

グローバルな変更

flexboxは、デフォルトで有効になっています。一般的に、floatはコンポーネントから外します。
ソースCSSファイルをLessからSassに切り替えました。
主なCSSユニットとしてpxからremに切り替えました。デバイスビューポートはタイプサイズの影響を受けないため、ピクセルは依然としてメディアクエリやグリッド動作に使用されます。
グローバルフォントサイズがより大きくなりました。14pxから16pxになりました。
第5のオプション（576px以下の小型デバイスへの対応）のクラスから-xsインフィックスを削除しました。例：.col-6.col-sm-4.col-md-3。
独立したオプションのテーマを、SCSS変数を使用して設定可能なオプションに置き換えました。(例： $enable-gradients: true)
Gruntの代わりに一連のnpmスクリプトを使用するようにシステムを改良しました。すべてのスクリプトについてはpackage.json、ローカル開発のニーズについてはプロジェクトのreadmeを参照してください。
Bootstrapのノンレスポンシブはサポートされなくなりました。
オンラインカスタマイザを廃止し、より包括的なセットアップドキュメントとカスタマイズされたビルドを採用しました。
一般的なCSSプロパティー値ペアとマージン/パディングスペースショートカット用の新しいユーティリティクラスが数十追加されました。

グリッドシステム

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）が必要です。
更新されたグリッド・サイズ、ミックスイン、および変数。
- グリッド溝にはSassマップが追加され、各ブレークポイントで特定の溝幅を指定できます。
- グリッドミックスを更新し、make-col-ready prep mixinとmake-colを使用して、個々のカラムサイジングのフレックスと最大幅を設定しました。
- グリッドシステムのメディアクエリのブレークポイントとコンテナの幅を変更して、新しいグリッド層を考慮し、カラムが最大幅で12で割り切れるようにしました。
- グリッドブレークポイントとコンテナの幅は、いくつかの別々の変数ではなく、Sassマップ（$grid-breakpointsと$container-max-widths）によって処理されるようになりました。これらは@screen- *変数を完全に置き換え、グリッド層を完全にカスタマイズできるようにします。
- メディアクエリも変更されました。同じ値でメディアクエリ宣言を繰り返すのではなく、@include media-breakpoint-up / down / onlyだけを持つようになりました。 @media（min-width：@ screen-sm-min）{…}を書くのではなく、@include media-breakpoint-up（sm）{…}を書くことができます。

コンポーネント

すべての包括的なコンポーネント、カード用のパネル、サムネイル、ウェルを削除しました。
Glyphiconsアイコンフォントを削除しました。アイコンが必要な場合、いくつかのオプションがあります：
- Glyphiconsの上位バージョン
- Octicons
- Font Awesome
- 代替候補のリストについては、「拡張」ページを参照してください。
AffixのjQueryプラグインを削除しました。
- 代わりにposition：stickyを使用することをお勧めします。詳細および特定のポリフィルの推奨事項については、HTML5 Pleaseエントリを参照してください。 1つの提案は、それを実装するために@supportsルールを使用することです（例えば、@supports（position：sticky）{…}）/
- Affixを使用して追加の非位置スタイルを適用していた場合、ポリフィルはユースケースをサポートしていない可能性があります。そのような用途の1つのオプションは、サードパーティのScrollPos-Stylerライブラリです。
本質的にわずかにカスタマイズされたボタンであるため、ページャコンポーネントを削除しました。
オーバーアイデンティティの子セレクタの代わりに、より多くのネストされていないクラスセレクタを使用するように、ほぼすべてのコンポーネントをリファクタリングしました。

リブート

ブートストラップ4の新機能は、やや心強いリセットスタイルでNormalizeをベースにした新しいスタイルシートであるRebootです。このファイルに表示されるセレクタは、要素のみを使用します。クラスはありません。これにより、よりモジュラーなアプローチのために、リセットスタイルがコンポーネントスタイルから分離されます。最も重要なリセットには、box-sizing: border-box、多くの要素、リンクスタイル、および多くのフォーム要素のリセットでemからrem単位に移動することが含まれます。

タイポグラフィ

すべてのtext-*クラスユーティリティを_utilities.scssファイルに移動しました。
ボーダーとは別に、すべてのスタイルをユーティリティーで適用できるので、page-headerクラスをドロップします。
.dl-horizontalが削除されました。代わりに、<dl>で.rowを使用し、その<dt>と<dd>の子にグリッド列クラス（またはミックスイン）を使用します。
カスタム<blockquote>スタイリングがクラス-blockquoteとblockquote-reverseクラスモディファイアに移動しました。
list-inlineクラスでは、子リストアイテムに新しいlist-inline-itemクラスが適用されている必要があります。

イメージ

img-responsiveクラスからimg-fluidクラスに変更されました。
img-roundedクラスからroundedクラスに変更されました。
img-circleクラスからrounded-circleクラスに変更されました。

テーブル

ほぼすべてのセレクタのインスタンスが削除されました。つまり、ネストしたテーブルは自動的に親からスタイルを継承します。これにより、> セレクタと潜在的なカスタマイズが大幅に簡素化されます。
レスポンステーブルはラッピング要素を必要としません。代わりに、tableクラス応答の権利を<table>に入れてください。
table-condensedクラスからtable-smクラスに変更されました
新しいtable-inverseクラスオプションが追加されました。
テーブルヘッダー修飾子を追加：thead-defaultクラスとthead-inverseクラス。
名前付きプレフィックスを持つように変更されたコンテキストクラス。それゆえactiveクラス、successクラス、warningクラス、dangerクラス、table-infoクラスをtable-activeクラス、table-successクラス、table-warningクラス、table-dangerクラス、table-infoクラスに変更します。

フォーム

要素を_reboot.scssファイルにリセットしました。
control-labelクラスをform-control-labelクラスに変更しました。
input-lgクラスおよびinput-smクラスをform-control-lgクラスおよびform-control-smクラスにそれぞれ変更しました。
単純化のためform-group-クラスを削除しました。代わりにform-control-クラスを使用してください。
help-blockクラスを削除し、ブロックレベルのヘルプテキストの場合はform-textクラスに置き換えました。インラインヘルプテキストやその他の柔軟なオプションについては、text-mutedクラスのようなユーティリティクラスを使用してください。
radio-inlineクラスとcheckbox-inlineクラスを削除しました。
横形フォームが一新された：
- form-horizontalクラスの要件を削除しました。＊form-groupクラスはミックスイン経由ではrowクラスのスタイルを適用しなくなりました。したがって、水平グリッドレイアウト（例：<div class="form-group row">）ではrowクラスが必要になります。
- 新しいform-control-labelクラスを追加し、form-controlsクラスを使用してラベルを垂直方向に中央揃えにしました。
- コンパクトフォームレイアウトの新しいform-rowクラスをグリッドクラスに追加しました（form-rowクラスのためにrowクラスを入れ替えてください）。
カスタムフォームのサポートを追加しました（チェックボックス、ラジオ、選択、およびファイル入力用）。
CSSを介してHTML5フォームの検証サポートを追加：無効で有効な疑似クラス。
has-errorクラスからhas-dangerクラスへ変更。
form-control-staticクラスからform-control-plaintextクラスへ変更。

ボタン

btn-defaultクラスからbtn-secondaryクラスへ変更
btn-xsクラスを完全に削除しました。btn-smクラスはv3よりも比例しています。
button.js jQueryプラグインのステートフルボタン機能が削除されました。これには、$().button(string) と$().button(‘reset’)メソッドが含まれます。ちょっとしたカスタムJavaScriptを使用することをお勧めします。これは、あなたが望むように正確に動作する利点があります。
- プラグインの他の機能（チェックボックスボタン、ボタンラジオ、シングルトグルボタン）はv4で保持されています。
IE9以上がサポートしているため、[disabled] から:disabledに変更。ただし、ネイティブで無効になっているフィールドセットはIE11でもまだバグが多いので、fieldset[disabled]はまだ必要です。

ボタングループ

flexboxでコンポーネントを書き換えました。
btn-group-justifiedクラスを削除しました。
btn-xsクラスを完全に削除しましたのでbtn-group-xsクラスも削除しました。
ボタンツールバーのボタングループ間の明示的な間隔を削除しました。マージンユーティリティクラスを使用してください。
他のコンポーネントで使用するためのドキュメントの改善。

ドロップダウン

親セレクタからすべてのコンポーネント、修飾子などの単一クラスに切り替えられました。
簡略化されたドロップダウンスタイルは、上向きまたは下向きの矢印がドロップダウンメニューに添付されて出荷されなくなりました。
ドロップダウンは<div>または<ul>で構築できます。
ドロップダウンスタイルとマークアップを再構築して、<a>および<button>ベースのドロップダウンアイテムを簡単に組み込むことができます。
dividerクラスをdropdown-dividerクラスに変更しました。
ドロップダウンアイテムには現在dropdown-itemクラスが必要です。
ドロップダウントグルでは、明示的な<span class="caret"></span>が不要になりました。これは、CSSの::afterセレクタのdropdown-toggleクラスを介して自動的に提供されるようになりました。

グリッドシステム

smとして新しい576pxグリッドブレークポイントを追加しました。つまり、合計5つの層（xs、sm、md、lg、xl）が追加されました。
より簡単なグリッドクラスのためにレスポンシブなグリッド修飾子クラスを.col- {ブレークポイント} - {修飾子} - {サイズ}から{修飾子} - {ブレークポイント} - {サイズ}に変更しました。たとえば、.col-md-3.col-md-push-9の代わりに.col-md-3.push-md-9です。
グリッドシステムとコンポーネントのフレックスボックスユーティリティクラスを追加しました。

リストグループ

flexboxでコンポーネントを書き換えました。
a.list-group-itemクラスを明示的なクラス、list-group-item-actionクラスに置き換えて、リストグループ項目のリンクとボタンバージョンをスタイリングする。
カードで使用するlist-group-flushクラスを追加しました。

モーダル

flexboxでコンポーネントを書き換えました。
flexboxへの移行を考えれば、もはや浮動小数点を使用していないため、ヘッダー内の切断アイコンのアライメントが崩れる可能性があります。フローティングコンテンツが最初に来ますが、もはやflexboxはありません。修復アイコンを更新してモーダルタイトルを修正してください。
リモートオプション（外部コンテンツを自動的にロードしてモーダルに挿入するために使用できる）と、対応するloaded.bs.modalイベントが削除されました。代わりに、クライアントサイドのテンプレートまたはデータバインディングフレームワークを使用するか、jQuery.loadを自分で呼び出すことをお勧めします。

ナビ

flexboxでコンポーネントを書き換えました。
ほとんどすべての>セレクタを削除して、ネストされていないクラスを使用した簡単なスタイル設定を実現しました。
.nav> li> aのようなHTML固有のセレクタの代わりに、navsクラス、nav-itemクラス、およびnav-linkクラスに別々のクラスを使用します。これにより、HTMLの柔軟性が向上し、拡張性が向上します。

ナビバー

flexboxでは、アラインメント、応答性、カスタマイズのサポートが強化され、ナビゲーションバーが完全に書き直されました。

対応するnavbarの動作は、navbar-expand- {breakpoint}クラスを介してnavbarクラスに適用され、navbarクラスを折り畳む場所を選択します。これまではこれは変数の変更が少なく、再コンパイルが必要でした。
navbar-defaultクラスはnavbar-lightクラスになりましたが、navbar-darkクラスは同じままです。これらのうちの1つが各ナビゲーションバーに必要です。しかし、これらのクラスは背景色を設定しなくなりました。代わりに、基本的に色にのみ影響します。
Navbarsには何らかのバックグラウンド宣言が必要になりました。バックグラウンドユーティリティ（.bg- *）から選択するか、カスタマイズのために上のリバースクラスであなた自身を設定してください。
flexboxスタイルを指定すると、navbarsでflexboxユーティリティを使用できるようになりました。
navbar-toggleクラスは現在navbar-togglerクラスであり、異なるスタイルと内部マークアップ（3つ以上の）はありません。
navbar形式のクラスを完全に削除しました。もはや必要ありません。代わりにform-inlineクラスを使用し、必要に応じてマージンユーティリティクラスを適用してください。
Navbarsにはデフォルトでマージンボトムまたはボーダー半径が含まれなくなりました。必要に応じてユーティリティを使用してください。
ナビゲーションバーを特徴とするすべての例は、新しいマークアップを含むように更新されました。

ページネーション

フレックスボックスでコンポーネントを書き換えました。
paginationsクラスの子孫で明示的なクラス（page-itemクラス、page-linkクラス）が必要になりました。
pagerクラスコンポーネントは、カスタマイズされたアウトラインボタンのように完全に削除されました。
明示的なクラス、breadcrumb-itemクラスは、breadcrumbsクラスの子孫に必要です

ラベルとバッジ

labelクラスの名前をbadgeクラスに変更して、<label>要素から曖昧さを排除します。
badgeクラスコンポーネントをラベルとほぼ同じように削除しました。その丸みを帯びた外観の代わりに、ラベルコンポーネントと一緒にbadge-pillクラス修飾子を使用してください。
バッジは、リストグループやその他のコンポーネントで自動的にフローティングされることはありません。これでユーティリティクラスが必要になりました。

パネル、サムネイル、ウェル

新しいカードコンポーネントのために完全に削除されました。

パネル

panelクラスからcardクラスに、flexboxで構築されています。
panel-defaultクラスは削除され、置き換えられません。
panel-groupクラスが削除され、置き換えられません。card-groupクラスは置換ではなく、異なっています。
panel-headヘッダークラスからcard-headerヘッダーグラスへ
panel-titleクラスをcard-titleクラスに変更します。目的の外観に応じて、見出しの要素やクラス（例：<h3>、h3クラス）や太字の要素やクラス（例：<strong>、<b>、font-weight-boldクラス）を使用することもできます。card-titleクラスは、同様に名前が付けられていますが、panel-titleクラスとは異なる外観になります。
panel-bodyクラスからcard-bodyクラスへ変更
cardel-footerクラスからcard-footerクラスへ変更
$theme-colors Sass mapから生成されたbg-、text-、borderクラスユーティリティのpanel-primaryクラス、panel-successクラス、panel-infoクラス、panel-warningクラス、およびpanel-dangerクラスが削除されました。

カルーセル

コンポーネント全体を見直し、デザインとスタイリングを簡素化しました。オーバーライドするスタイル、新しいインジケータ、新しいアイコンが少なくなりました。
すべての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-rightクラスとcarousel-control-leftクラスになりました。つまり、特定の基本クラスが不要になりました。
反応しやすいすべてのスタイルを削除し、ユーティリティ（たとえば、特定のビューポートにキャプションを表示する）とカスタムスタイルを必要に応じて延期しました。
カルーセル項目のイメージのイメージオーバーライドを削除し、ユーティリティに延期しました。
新しいマークアップとスタイルを組み込むためにカルーセルの例を調整しました。

テーブル

スタイル付きのネストした表のサポートが削除されました。より単純なセレクタのために、すべてのテーブルスタイルがv4で継承されるようになりました。
逆テーブルバリアントを追加しました。

ユーティリティー

表示、隠し、その他：
- ディスプレイユーティリティを反応させる（例えば、.d-noneとd-{sm、md、lg、xl}なし）。
- 新しい[表示ユーティリティ]（（/ docs / 4.0 / utilities / display /）用のhidden-*ユーティリティクラスの大部分を削除しました。たとえば、hidden-sm-upクラスの代わりにd-sm-noneクラスを使用します。hidden-printクラスユーティリティを使用して、表示ユーティリティの命名規則を使用します。このページの「対応ユーティリティ」セクションの詳細を参照してください。
- レスポンシブな浮動小数点数のためにfloat-{sm、md、lg、xl}-{left、right、none}クラスを追加し、float-leftクラスとfloat-rightクラス。
タイプ
- テキスト整列クラス.text-{sm、md、lg、xl}-{left、center、right}に対応するバリエーションを追加しました。
アライメントとスペーシング：
- すべての面に新しい応答マージンとパディングユーティリティを追加しました。さらに、縦と横の略記を追加しました。
- ボートロードまたはフレックスボックスユーティリティが追加されました。
- 新しいmx-autoクラスになりcenter-blockクラスを削除しました。

ベンダープレフィックスミックスイン

v3.2.0で廃止されたブートストラップ3のベンダープレフィックスミックスインは、ブートストラップ4で削除されました。はオートプレフィクサーを使用しているので、もはや必要ありません。

削除されたミックスイン: 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

レスポンシブユーティリティー

すべての@screen-変数はv4.0.0で削除されました。代わりに、media-breakpoint-up（）、media-breakpoint-down（）、またはmedia-breakpoint-only（）Sassミックスインまたは$grid-breakpoints Sassマップを使用してください。

反応するユーティリティクラスは、明示的な表示ユーティリティのために主に削除されました。

.hiddenクラスと.showクラスは、jQueryの$（…）。hide（）および$（…）。show（）メソッドと競合するため、削除されました。代わりに、[hidden]属性を切り替えるか、style = “display：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のアルファから削除されました: .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-または.visible-ではなく、.d-print-で始まります。
- 旧クラス名: .visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print
- 新クラス名: .d-print-block, .d-print-inline, .d-print-inline-block, .d-print-none

明示的なvisible- クラスを使用するのではなく、単純にそのスクリーンサイズで要素を隠すことなく要素を表示させることができます。 1つのd--noneクラスを1つのd-*-ブロッククラスと組み合わせて、指定された画面サイズの間隔でのみ要素を表示することができます（例：.d-none.d-md-block.d-xl-none 中規模および大規模のデバイスにのみ要素が表示されます）。

v4でのグリッドブレークポイントの変更は、同じ結果を得るために1つのブレークポイントを大きくする必要があることに注意してください。新しい応答性ユーティリティクラスは、要素の可視性を1つの連続したビューポートサイズの範囲として表現できない、あまり一般的でない場合に対応しようとしません。そのような場合にカスタムCSSを使用する必要があります。

参考になれば幸いです。