GitHubで表示

v4への移行

Bootstrap 4はプロジェクト全体のメジャーな書き直しです。最も注目すべき変更点を以下にまとめ、その後、関連するコンポーネントの具体的な変更点を説明します。

安定版の変更点

ベータ3から安定版のv4.xリリースに移行する際に、破壊的な変更はありませんが、いくつかの注目すべき変更があります。

印刷

  • 壊れていた印刷ユーティリティを修正しました。以前は、.d-print-*クラスを使用すると、他の.d-*クラスが予期せず上書きされていました。現在は、他の表示ユーティリティと一致し、そのメディア（@media print）にのみ適用されます。

  • 利用可能な印刷表示ユーティリティを他のユーティリティと一致するように拡張しました。ベータ3以前は、block、inline-block、inline、noneのみでした。安定版v4では、flex、inline-flex、table、table-row、table-cellが追加されました。

  • @page sizeを指定する新しい印刷スタイルを使用して、ブラウザ全体の印刷プレビューレンダリングを修正しました。

ベータ3の変更点

ベータ2では、ベータフェーズ中に破壊的な変更の大部分が行われましたが、ベータ3リリースで対処する必要のあるものがまだいくつかありました。これらの変更は、ベータ2またはそれ以前のバージョンのBootstrapからベータ3に更新する場合に適用されます。

その他

  • 未使用の$thumbnail-transition変数を削除しました。何もトランジションしていなかったので、単なる余分なコードでした。
  • npmパッケージには、ソースファイルとdistファイル以外のファイルは含まれなくなりました。それらに依存していて、node_modulesフォルダーからスクリプトを実行していた場合は、ワークフローを適応させる必要があります。

フォーム

  • カスタムとデフォルトの両方のチェックボックスとラジオボタンを書き直しました。現在は、どちらもHTML構造（兄弟の<input>と<label>を持つ外部<div>）とレイアウトスタイル（デフォルトではスタック、修飾子クラスではインライン）が一致しています。これにより、入力の状態に基づいてラベルのスタイルを設定できるようになり、disabled属性のサポートが簡素化され（以前は親クラスが必要でした）、フォームの検証がより適切にサポートされるようになりました。

    これに伴い、カスタムフォームのチェックボックスとラジオボタンで複数のbackground-imageを管理するためのCSSを変更しました。以前は、削除された.custom-control-indicator要素に背景色、グラデーション、SVGアイコンがありました。背景グラデーションをカスタマイズするには、1つだけを変更する必要があるたびに、それらすべてを置き換える必要がありました。現在は、塗りつぶしとグラデーションに.custom-control-label::beforeを使用し、アイコンに.custom-control-label::afterを使用しています。

    カスタムチェックをインラインにするには、.custom-control-inlineを追加します。

  • 入力ベースのボタングループのセレクターを更新しました。スタイルと動作に[data-toggle="buttons"] { }を使用する代わりに、JSの動作にのみdata属性を使用し、スタイル設定には新しい.btn-group-toggleクラスに依存します。

  • .col-form-legendを削除し、わずかに改良された.col-form-labelを支持しました。これにより、.col-form-label-smと.col-form-label-lgを<legend>要素で簡単に使用できるようになりました。

  • カスタムファイル入力の$custom-file-text Sass変数が変更されました。ネストされたSassマップではなくなり、1つの文字列（`Browse`ボタン）のみを制御するようになりました。これは、Sassから生成される唯一の擬似要素になったためです。「ファイルを選択」テキストは、.custom-file-labelから取得されるようになりました。

入力グループ

  • 入力グループアドオンは、入力に対する相対的な配置に固有のものになりました。.input-group-addonと.input-group-btnを削除し、2つの新しいクラス、.input-group-prependと.input-group-appendを追加しました。CSSの多くを簡素化するために、明示的にappendまたはprependを使用する必要があります。appendまたはprepend内では、他の場所にあるのと同じようにボタンを配置しますが、テキストは.input-group-textで囲みます.

  • 検証スタイルがサポートされるようになり、複数の入力がサポートされるようになりました（ただし、グループごとに1つの入力のみ検証できます）。

  • サイズ変更クラスは、個々のフォーム要素ではなく、親の.input-groupに配置する必要があります。

ベータ2の変更点

ベータ版では、破壊的な変更がないように努めています。しかし、常に計画通りに進むとは限りません。ベータ1からベータ2に移行する際に注意すべき破壊的な変更点を以下に示します。

破壊的変更

  • $badge-color変数と.badgeでのその使用を削除しました。色コントラスト関数を使用してbackground-colorに基づいてcolorを選択するため、変数は不要です。
  • CSSネイティブのgrayscaleフィルターとの競合を回避するために、grayscale()関数の名前をgray()に変更しました。
  • 他の場所で使用されているカラースキームに合わせて、.table-inverse、.thead-inverse、.thead-defaultの名前を.*-darkと.*-lightに変更しました。
  • レスポンシブテーブルは、各グリッドブレークポイントのクラスを生成するようになりました。これは、ベータ1で使用されていた.table-responsiveが.table-responsive-mdに似ているという点で、ベータ1からの変更点です。必要に応じて、.table-responsiveまたは.table-responsive-{sm,md,lg,xl}を使用できるようになりました。
  • パッケージマネージャーが代替手段（Yarnやnpmなど）のために廃止されたため、Bowerのサポートを削除しました。詳細は、bower/bower#2298を参照してください。
  • Bootstrapには依然としてjQuery 1.9.1以降が必要ですが、v3.xのサポート対象ブラウザはBootstrapのサポート対象ブラウザであり、v3.xにはいくつかのセキュリティ修正が含まれているため、バージョン3.xを使用することをお勧めします。
  • 未使用の.form-control-labelクラスを削除しました。このクラスを使用した場合、水平フォームレイアウトで関連付けられた入力を使用して<label>を垂直方向に中央揃えした.col-form-labelクラスの複製でした。
  • colorプロパティを含むmixinであったcolor-yiqを、値を返す関数に変更しました。これにより、任意のCSSプロパティに使用できるようになりました。たとえば、color-yiq(#000)の代わりに、color: color-yiq(#000);と記述します。

ハイライト

  • モーダルでの新しいpointer-eventsの使用法を導入しました。外部の.modal-dialogは、カスタムクリック処理のためにpointer-events: noneでイベントを渡し（.modal-backdropでクリックをリッスンできるようにします）、実際の.modal-contentでpointer-events: autoを使用してそれを打ち消します。

概要

v3からv4に移行する際に注意すべき重要な項目を以下に示します。

ブラウザサポート

  • IE8、IE9、iOS 6のサポートを削除しました。v4はIE10+とiOS 7+のみです。これらのいずれかが必要なサイトでは、v3を使用してください。
  • Android v5.0 LollipopのブラウザとWebViewの公式サポートを追加しました。以前のバージョンのAndroidブラウザとWebViewは、非公式にのみサポートされています。

グローバルな変更

  • **Flexboxがデフォルトで有効になっています。** 一般的に、これはフロートから離れて、コンポーネント全体でより多く使用されることを意味します。
  • ソース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に移行しました。
    • グリッド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）が必要です。
  • グリッドサイズ、mixin、変数を更新しました。
    • グリッドガターにSassマップが追加され、各ブレークポイントで特定のガター幅を指定できるようになりました。
    • グリッドmixinを更新して、make-col-ready準備mixinと、個々の列のサイズ設定にflexとmax-widthを設定する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
    • 代替案のリストについては、拡張ページを参照してください。追加の提案がある場合は、issueまたはPRを開いてください。
  • Affix jQueryプラグインは廃止されました。
    • 代わりにposition: stickyを使用することをお勧めします。 詳細と具体的なポリフィル推奨事項については、HTML5 Pleaseエントリを参照してください。 1つの提案は、実装に@supportsルールを使用することです（例：@supports (position: sticky) { ... }）
    • Affixを使用して追加の非positionスタイルを適用していた場合、ポリフィルはユースケースをサポートしていない可能性があります。このような用途の1つのオプションは、サードパーティのScrollPos-Stylerライブラリです。
  • ページャーコンポーネントは廃止されました。これは本質的にわずかにカスタマイズされたボタンだったためです。
  • ほぼすべてのコンポーネントがリファクタリングされ、過度に具体的な子セレクタの代わりに、ネストされていないクラスセレクタをより多く使用するようになりました。

コンポーネント別

このリストは、v3.x.xとv4.0.0の間のコンポーネントごとの主要な変更点を強調しています。

Reboot

Bootstrap 4の新機能は、Rebootです。これは、Normalizeに基づいて構築された新しいスタイルシートで、独自のやや意見のあるリセットスタイルを備えています。このファイルに表示されるセレクタは要素のみを使用します。クラスはありません。これにより、リセットスタイルがコンポーネントスタイルから分離され、よりモジュール化されたアプローチが可能になります。これには、box-sizing: border-boxの変更、多くの要素でemからrem単位への移行、リンクスタイル、多くのフォーム要素のリセットなどが含まれます。

タイポグラフィ

  • すべての.text-ユーティリティを_utilities.scssファイルに移動しました。
  • .page-headerは、そのスタイルをユーティリティで適用できるため、廃止されました。
  • .dl-horizontalは廃止されました。代わりに、<dl>で.rowを使用し、その<dt>と<dd>の子にグリッド列クラス（またはmixin）を使用します。
  • blockquoteを再設計し、スタイルを<blockquote>要素から単一のクラス.blockquoteに移動しました。テキストユーティリティの.blockquote-reverse修飾子は廃止されました。
  • .list-inlineでは、子リストアイテムに新しい.list-inline-itemクラスが適用されている必要があります。

画像

  • .img-responsiveの名前を.img-fluidに変更しました。
  • .img-roundedの名前を.roundedに変更しました
  • .img-circleの名前を.rounded-circleに変更しました

テーブル

  • >セレクタのほぼすべてのインスタンスが削除されたため、ネストされたテーブルは親からスタイルを自動的に継承するようになりました。 これにより、セレクタと潜在的なカスタマイズが大幅に簡素化されます。
  • 一貫性のために、.table-condensedの名前を.table-smに変更しました。
  • 新しい.table-inverseオプションを追加しました。 (v4.0.0で削除されました)
  • テーブルヘッダーの修飾子を追加しました：.thead-defaultと.thead-inverse。 (v4.0.0で削除されました)
  • コンテキストクラスの名前を変更して、.table-プレフィックスを付けました。 したがって、.active、.success、.warning、.danger、.infoは、.table-active、.table-success、.table-warning、.table-danger、.table-infoになります。(v4.0.0で削除されました)

フォーム

  • 要素のリセットを_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などのユーティリティクラスを使用します。
  • .radio-inlineと.checkbox-inlineを廃止しました。
  • .checkboxと.radioを.form-checkとさまざまな.form-check-*クラスに統合しました。
  • 水平フォームをオーバーホールしました
    • .form-horizontalクラスの要件を廃止しました。
    • .form-groupはmixinを介して.rowからスタイルを適用しなくなったため、水平グリッドレイアウトには.rowが必要になりました（例：<div class="form-group row">）。
    • .form-controlとラベルを垂直方向に中央揃えするための新しい.col-form-labelクラスを追加しました。
    • グリッドクラスを使用してコンパクトなフォームレイアウトを作成するための新しい.form-rowを追加しました（.rowを.form-rowに交換するだけです）。
  • カスタムフォームのサポートを追加しました（チェックボックス、ラジオボタン、選択、ファイル入力用）。
  • .has-error、.has-warning、.has-successクラスを、CSSの:invalidおよび:valid疑似クラスを介したHTML5フォーム検証に置き換えました。
  • .form-control-staticの名前を.form-control-plaintextに変更しました。

ボタン

  • .btn-defaultの名前を.btn-secondaryに変更しました。
  • .btn-smはv3のものよりも比例してはるかに小さいので、.btn-xsクラスを完全に廃止しました。
  • button.js jQuery プラグインのステートフルボタン機能は廃止されました。 これには、$().button(string)および$().button('reset')メソッドが含まれます。 代わりに、少量のカスタムJavaScriptを使用することをお勧めします。これにより、思いどおりの動作が得られます。
    • プラグインの他の機能（ボタンチェックボックス、ボタンラジオボタン、シングルトグルボタン）はv4に保持されていることに注意してください。
  • IE9+ は :disabled をサポートしているため、ボタンの [disabled] を :disabled に変更しました。 ただし、ネイティブの無効化されたフィールドセットは IE11 ではまだバグがあるため、fieldset[disabled] は依然として必要です。

ボタン グループ

  • flexboxを使用してコンポーネントを書き直しました。
  • .btn-group-justifiedを削除しました。 代わりに、.w-100を持つ要素のラッパーとして<div class="btn-group d-flex" role="group"></div>を使用できます。
  • .btn-xsの削除に伴い、.btn-group-xsクラスを完全に廃止しました。
  • ボタントゥールバーのボタングループ間の明示的な間隔を削除しました。マージンユーティリティを代わりに使用してください。
  • 他のコンポーネントと併用するためのドキュメントを改善しました。
  • すべてのコンポーネント、モディファイアなどの親セレクタから単一のクラスに切り替えました。
  • ドロップダウンメニューに上向きまたは下向きの矢印が付かないように、ドロップダウンスタイルを簡素化しました。
  • ドロップダウンは、<div>または<ul>で構築できるようになりました。
  • <a>および<button>ベースのドロップダウンアイテムを簡単に組み込みでサポートするために、ドロップダウンスタイルとマークアップを再構築しました。
  • .dividerの名前を.dropdown-dividerに変更しました。
  • ドロップダウンアイテムには.dropdown-itemが必要です。
  • ドロップダウンを切り替えるには、明示的な<span class="caret"></span>は不要になりました。これは、.dropdown-toggleのCSSの::afterを介して自動的に提供されるようになりました。

グリッドシステム

  • 新しい576pxグリッドブレークポイントをsmとして追加しました。つまり、合計5つの層（xs、sm、md、lg、xl）になりました。
  • レスポンシブグリッド修飾子クラスの名前を、よりシンプルなグリッドクラスにするために、.col-{breakpoint}-{modifier}-{size}から.{modifier}-{breakpoint}-{size}に変更しました。
  • 新しいflexboxを搭載したorderクラスのプッシュおよびプル修飾子クラスを廃止しました。たとえば、.col-8.push-4と.col-4.pull-8の代わりに、.col-8.order-2と.col-4.order-1を使用します。
  • グリッドシステムとコンポーネントにflexboxユーティリティクラスを追加しました。

リストグループ

  • flexboxを使用してコンポーネントを書き直しました。
  • リストグループアイテムのリンクバージョンとボタンバージョンのスタイルを設定するために、a.list-group-itemを明示的なクラスである.list-group-item-actionに置き換えました。
  • カードで使用する.list-group-flushクラスを追加しました。
  • flexboxを使用してコンポーネントを書き直しました。
  • flexboxへの移行により、floatを使用しなくなったため、ヘッダー内のdismissアイコンの配置が壊れている可能性があります。floatされたコンテンツが最初に来ますが、flexboxではそうではありません。修正するには、モーダルタイトルの後にdismissアイコンが来るように更新してください。
  • remoteオプション（モーダルに外部コンテンツを自動的にロードして挿入するために使用できた）と、対応するloaded.bs.modalイベントは削除されました。代わりに、クライアントサイドテンプレートまたはデータバインディングフレームワークを使用するか、jQuery.loadを自分で呼び出すことをお勧めします。
  • flexboxを使用してコンポーネントを書き直しました。
  • ネストされていないクラスを介したよりシンプルなスタイリングのために、ほぼすべての>セレクタを廃止しました。
  • .nav > li > aのようなHTML固有のセレクタの代わりに、.nav、.nav-item、.nav-linkに個別のクラスを使用します。 これにより、HTMLがより柔軟になり、拡張性が向上します。

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

  • レスポンシブナビゲーションバーの動作は、必須の.navbar-expand-{breakpoint}を介して.navbarクラスに適用されるようになりました。ここで、ナビゲーションバーを折りたたむ場所を選択します。以前は、これはLess変数の変更であり、再コンパイルが必要でした。
  • .navbar-defaultは.navbar-lightになりましたが、.navbar-darkは同じままです。 これらのいずれかが各ナビゲーションバーで必要です。ただし、これらのクラスはbackground-colorを設定しなくなりました。代わりに、本質的にcolorにのみ影響します。
  • ナビゲーションバーには、何らかの背景宣言が必要です。背景ユーティリティ（.bg-*）から選択するか、マッドカスタマイズ用のライト/逆クラスで独自に設定します。
  • flexboxスタイルが指定されているため、ナビゲーションバーはflexboxユーティリティを使用して簡単に配置オプションを使用できるようになりました。
  • .navbar-toggleは.navbar-togglerになり、スタイルと内部マークアップが異なります（3つの<span>はもうありません）。
  • .navbar-formクラスを完全に廃止しました。それはもはや必要ありません。代わりに、.form-inlineを使用し、必要に応じてマージンユーティリティを適用します。
  • ナビゲーションバーには、デフォルトでmargin-bottomまたはborder-radiusが含まれなくなりました。必要に応じてユーティリティを使用してください。
  • ナビゲーションバーをフィーチャーしたすべての例は、新しいマークアップを含むように更新されました。

ページネーション

  • flexboxを使用してコンポーネントを書き直しました。
  • 明示的なクラス（.page-item、.page-link）が.paginationの子孫に必要になりました
  • .pagerコンポーネントは、カスタマイズされたアウトラインボタンにほとんど変わらないため、完全に廃止されました。
  • 明示的なクラスである.breadcrumb-itemが、.breadcrumbの子孫に必要になりました

ラベルとバッジ

  • <label>要素とのあいまいさを解消し、関連コンポーネントを簡素化するために、.labelと.badgeを統合しました。 .labelは廃止され、.badgeになりました。
  • 丸みを帯びた「ピル」の外観の修飾子として.badge-pillを追加しました。
  • バッジは、リストグループやその他のコンポーネントで自動的にフロートされなくなりました。フロートするには、ユーティリティクラスが必要になりました。
  • .badge-default は廃止され、他のコンポーネントで使用されている修飾子クラスに合わせて .badge-secondary が追加されました。

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

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

パネル

  • .panel は .card に変更され、flexbox を使用して構築されるようになりました。
  • .panel-default は削除され、代替はありません。
  • .panel-group は削除され、代替はありません。 .card-group は代替ではなく、異なるものです。
  • .panel-heading は .card-header に変更されました。
  • .panel-title は .card-title に変更されました。目的の外観によっては、見出し要素またはクラス（例：<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 は、$theme-colors Sass マップから生成された .bg-、.text-、.border ユーティリティに置き換えられました。

プログレス

  • コンテキストに応じた .progress-bar-* クラスは、.bg-* ユーティリティに置き換えられました。たとえば、class="progress-bar progress-bar-danger" は class="progress-bar bg-danger" になります。
  • アニメーション化されたプログレスバーの .active は、.progress-bar-animated に置き換えられました。
  • デザインとスタイルを簡素化するために、コンポーネント全体をオーバーホールしました。オーバーライドするスタイルが少なくなり、新しいインジケーターと新しいアイコンが追加されました。
  • すべての 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-next と .carousel-control-prev に変更されたため、特定のベースクラスは不要になりました。
  • すべてのレスポンシブスタイルが削除され、ユーティリティ（例：特定のビューポートでのキャプションの表示）と必要に応じたカスタムスタイルに委ねられました。
  • カルーセルアイテム内の画像の画像オーバーライドが削除され、ユーティリティに委ねられました。
  • カルーセルの例が、新しいマークアップとスタイルを含むように調整されました。

テーブル

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

ユーティリティ

  • 表示、非表示など
    • 表示ユーティリティがレスポンシブになりました（例：.d-none、d-{sm,md,lg,xl}-none）。
    • 新しい表示ユーティリティのために、.hidden-* ユーティリティの大部分が廃止されました。たとえば、.hidden-sm-up の代わりに .d-sm-none を使用します。.hidden-print ユーティリティの名前が変更され、表示ユーティリティの命名規則を使用するようになりました。詳細は、このページのレスポンシブユーティリティセクションを参照してください。
    • レスポンシブフロート用の .float-{sm,md,lg,xl}-{left,right,none} クラスが追加され、.pull-left と .pull-right は .float-left と .float-right と重複しているため削除されました。
  • タイプ
    • テキスト配置クラス .text-{sm,md,lg,xl}-{left,center,right} にレスポンシブバリエーションが追加されました。
  • 配置と間 spacing
  • Clearfix が更新され、古いブラウザバージョンのサポートが廃止されました。

ベンダープレフィックスmixin

v3.2.0 で非推奨となった Bootstrap 3 のベンダープレフィックス mixin は、Bootstrap 4 で削除されました。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

ドキュメント

ドキュメントも全面的にアップグレードされました。以下はその概要です。

  • まだ Jekyll を使用していますが、プラグインを組み合わせています。
    • bugify.rb は、ブラウザのバグページのエントリを効率的にリストするために使用されます。
    • example.rb は、デフォルトの highlight.rb プラグインのカスタムフォークであり、サンプルコードの処理を容易にします。
    • callout.rb は、それと同様のカスタムフォークですが、特別なドキュメントのコールアウト用に設計されています。
    • jekyll-toc は、目次を生成するために使用されます。
  • すべてのドキュメントコンテンツが、編集を容易にするために HTML から Markdown に書き直されました。
  • よりシンプルなコンテンツと、より分かりやすい階層のために、ページが再編成されました。
  • Bootstrap の変数、mixin などを最大限に活用するために、通常の CSS から SCSS に移行しました。

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

すべての @screen- 変数は v4.0.0 で削除されました。代わりに media-breakpoint-up()、media-breakpoint-down()、または media-breakpoint-only() Sass mixin、あるいは $grid-breakpoints Sass マップを使用してください。

レスポンシブユーティリティクラスは、明示的な `display` ユーティリティを優先するために、大部分が削除されました。

  • .hidden クラスと .show クラスは、jQuery の $(...).hide() メソッドと $(...).show() メソッドと競合するため、削除されました。代わりに、[hidden] 属性を切り替えたり、style="display: none;" や style="display: block;" などのインラインスタイルを使用してください。
  • 名前が変更された印刷ユーティリティを除き、すべての .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- または .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-*-block クラスを組み合わせて、特定の画面サイズの間隔でのみ要素を表示できます（例：.d-none.d-md-block.d-xl-none は、中型および大型デバイスでのみ要素を表示します）。

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