v4 への移行

Bootstrap 4 は、プロジェクト全体を大幅に書き直したものです。最も注目すべき変更点を以下に要約し、その後に関連するコンポーネントに対するより具体的な変更点を示します。

安定した変化

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

印刷

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

• 利用可能な印刷表示ユーティリティを拡張して、他のユーティリティと一致させました。ベータ 3 以前blockにはinline-block、、、、inlineおよびしかありませんでしたnone。安定版 v4 が追加されましたflex、inline-flex、table、。table-rowtable-cell

• @page size. _

ベータ 3 の変更

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

その他

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

フォーム

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

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

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

• 入力ベースのボタン グループのセレクターが更新されました。[data-toggle="buttons"] { }スタイルと動作の代わりにdata、JS の動作のみに属性を使用し、.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 から生成された唯一の疑似要素であるためです。Choose fileテキストは.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。colorに基づいてを選択するためにカラー コントラスト関数を使用するbackground-colorため、変数は不要です。
• CSS ネイティブフィルターとの衝突を避けるために、grayscale()関数の名前を に変更しました。gray()grayscale
• .table-inverse、.thead-inverse、 および.thead-defaultを.*-darkおよびに名前変更し、.*-light他の場所で使用されている配色に一致させました。
• レスポンシブ テーブルは、グリッド ブレークポイントごとにクラスを生成するようになりました。.table-responsiveこれは、使用している が に似ているという点で Beta 1 とは異なります.table-responsive-md。.table-responsive必要に応じてまたはを使用できる.table-responsive-{sm,md,lg,xl}ようになりました。
• パッケージ マネージャーが代替 (Yarn や npm など) で廃止されたため、Bower のサポートを削除しました。詳細については、bower/bower#2298を参照してください。
• Bootstrap には引き続き jQuery 1.9.1 以降が必要ですが、バージョン 3.x を使用することをお勧めします。これは、v3.x でサポートされているブラウザーが Bootstrap でサポートされているものであり、v3.x にはいくつかのセキュリティ修正が含まれているためです。
• .form-control-label未使用のクラスを削除しました。このクラスを使用した場合、水平フォーム レイアウトで関連する入力を.col-form-label垂直方向に中央揃えするクラスの複製でした。<label>
• color-yiqプロパティを含む mixin からcolor値を返す関数に変更され、任意の CSS プロパティに使用できるようになりました。たとえば、 の代わりにcolor-yiq(#000)と書きcolor: color-yiq(#000);ます。

ハイライト

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

概要

v3 から v4 に移行する際に知っておくべき重要な項目を次に示します。

ブラウザのサポート

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

グローバルな変化

• フレックスボックスはデフォルトで有効になっています。一般に、これはフロートから離れるなど、コンポーネント間での移動を意味します。
• ソース 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 の一部として、垂直方向および水平方向の配置クラスのサポートが含まれています。
• グリッド クラス名が更新され、新しいグリッド層が追加されました。
  • より詳細な制御のために、下に新しいsmグリッド層を追加しました。、、、、および があり768pxます。これは、すべての階層が 1 レベル上がったことも意味します (つまり、v3 はv4 になりました)。xssmmdlgxl.col-md-6.col-lg-6
  • xsmin-width: 0グリッド クラスは、設定されたピクセル値ではなく、スタイルの適用を開始することをより正確に表現するためのインフィックスを必要としないように変更されました。ではなく、.col-xs-6今.col-6です。他のすべてのグリッド層には、インフィックスが必要です (例: sm)。
• グリッド サイズ、ミックスイン、および変数を更新しました。
  • グリッドガターに Sass マップが追加され、各ブレークポイントで特定のガター幅を指定できるようになりました。
  • グリッド mixin を更新して、make-col-readyprep mixin と aを利用して、個々の列のサイズmake-colを設定します。flexmax-width
  • グリッド システムのメディア クエリのブレークポイントとコンテナーの幅を変更して、新しいグリッド層を考慮し、列が最大幅で均等に割り切れるように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のアップストリーム バージョン
  • オクタコン
  • 素晴らしいフォント
  • 代替のリストについては、拡張ページを参照してください。追加の提案がありますか? 問題またはPRを開いてください。
• Affix jQuery プラグインを削除しました。
  • 代わりに使用することをお勧めしposition: stickyます。詳細と具体的なポリフィルの推奨事項については、HTML5 Please エントリを参照してください。1 つの提案は、@supportsそれを実装するためのルールを使用することです (例: @supports (position: sticky) { ... })/
  • Affix を使用して追加の非positionスタイルを適用していた場合、ポリフィルはユース ケースをサポートしない可能性があります。このような用途の 1 つのオプションは、サードパーティのScrollPos-Stylerライブラリです。
• 基本的にわずかにカスタマイズされたボタンであったため、ページャー コンポーネントを削除しました。
• ほぼすべてのコンポーネントをリファクタリングして、過度に特定された子セレクターではなく、ネストされていないクラス セレクターを使用するようにしました。

コンポーネント別

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

リブート

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

タイポグラフィ

• すべての.text-ユーティリティを_utilities.scssファイルに移動しました。
• ユーティリティ.page-headerを介してスタイルを適用できるため、削除されました。
• .dl-horizontal削除されました。代わりに、グリッド列クラス (またはミックスイン) を使用し、その.rowおよび子で使用します。<dl><dt><dd>
• ブロック引用を再設計し、そのスタイルを<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オプションを追加しました。
• テーブル ヘッダー修飾子が追加されました:.thead-defaultおよび.thead-inverse.
• コンテキスト クラスの名前が -.table-接頭辞を持つように変更されました。したがって.active、.success、.warning、.dangerおよび.info、.table-active、.table-success、および。.table-warning_.table-danger.table-info

フォーム

• 移動された要素がファイルにリセットされ_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.rowvia mixinからスタイルを適用しなくなった.rowため、水平グリッド レイアウト (例: <div class="form-group row">) に必要になりました。
  • .col-form-labelsでラベルを垂直方向に中央揃えする新しいクラスを追加しまし.form-controlた。
  • グリッド クラスを使用したコンパクト フォーム レイアウト用に新しいものを追加しました ( aと.form-row交換してください)。.row.form-row
• カスタム フォームのサポートが追加されました (チェックボックス、ラジオ、選択、およびファイル入力用)。
• .has-error、.has-warning、およびクラスを、CSSおよび疑似.has-successクラスによる HTML5 フォーム検証に置き換えました。:invalid:valid
• .form-control-staticに改名.form-control-plaintext。

ボタン

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

ボタングループ

• コンポーネントをフレックスボックスで書き直しました。
• 削除され.btn-group-justifiedました。代わりに、 を使用<div class="btn-group d-flex" role="group"></div>して要素のラッパーとして使用できます.w-100。
• を削除したため、.btn-group-xsクラスを完全に削除し.btn-xsました。
• ボタン ツールバーのボタン グループ間の明示的なスペースを削除しました。今すぐマージンユーティリティを使用してください。
• 他のコンポーネントで使用するための改善されたドキュメント。

ドロップダウン

• すべてのコンポーネント、修飾子などについて、親セレクターから単一クラスに切り替えました。
• ドロップダウン メニューに添付された上向きまたは下向きの矢印を使用しないようにドロップダウン スタイルを簡素化しました。
• <div>ドロップダウンはs またはsで作成できるようになりました<ul>。
• ドロップダウンのスタイルとマークアップを再構築して、ドロップダウン項目<a>に基づいた簡単な組み込みサポートを提供します。<button>
• .dividerに改名.dropdown-divider。
• ドロップダウン項目が必要になり.dropdown-itemました。
• <span class="caret"></span>ドロップダウン トグルは、明示的な;を必要としなくなりました。これは、CSS の::afteronを介して自動的に提供されるようになりました.dropdown-toggle。

グリッドシステム

• 576px新しいグリッド ブレークポイントを として追加しました。これは、合計 5 つの層 ( 、、、、および)smがあることを意味します。xssmmdlgxl
• レスポンシブ グリッド修飾子クラスの名前を、より単純なグリッド クラスのためにから.col-{breakpoint}-{modifier}-{size}に変更しました。.{modifier}-{breakpoint}-{size}
• 新しいフレックスボックスを利用したクラスのプッシュおよびプル修飾子クラスを削除しましたorder。たとえば、 and の代わりに.col-8.push-4and.col-4.pull-8を使用.col-8.order-2し.col-4.order-1ます。
• グリッド システムとコンポーネント用のフレックスボックス ユーティリティ クラスが追加されました。

グループの一覧表示

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

モーダル

• コンポーネントをフレックスボックスで書き直しました。
• フレックスボックスへの移行を考えると、フロートを使用しなくなったため、ヘッダーの却下アイコンの配置が壊れている可能性があります。フローティング コンテンツが優先されますが、flexbox ではそうではなくなりました。閉じるアイコンを更新して、修正するモーダル タイトルの後に来るようにします。
• オプション(remote外部コンテンツをモーダルに自動的にロードして挿入するために使用できます) と対応するloaded.bs.modalイベントが削除されました。代わりに、クライアント側のテンプレートまたはデータ バインディング フレームワークを使用するか、自分でjQuery.loadを呼び出すことをお勧めします。

ナビ

• コンポーネントをフレックスボックスで書き直しました。
• >ネストされていないクラスによるシンプルなスタイリングのために、ほぼすべてのセレクターを削除しました。
• のような HTML 固有のセレクターの代わりに、s、s、およびs に.nav > li > a個別のクラスを使用します。これにより、HTML がより柔軟になり、拡張性が向上します。.nav.nav-item.nav-link

ナビゲーションバー

ナビゲーションバーはフレックスボックスで完全に書き直され、配置、応答性、およびカスタマイズのサポートが改善されました。

• レスポンシブ ナビゲーション バーの動作は、ナビゲーション バーを折りたたむ場所を選択する必須.navbarの場所を介してクラスに適用されるようになりました。以前は、これは変数の少ない変更であり、再コンパイルが必要でした。 .navbar-expand-{breakpoint}
• .navbar-defaultですが.navbar-light、.navbar-dark同じままです。これらのいずれかが各ナビゲーション バーに必要です。background-colorただし、これらのクラスはsを設定しなくなりました。代わりに、それらは本質的に影響を与えるだけcolorです。
• Navbars は、ある種のバックグラウンド宣言を必要とするようになりました。バックグラウンド ユーティリティ ( .bg-*) から選択するか、上記のライト/インバース クラスを使用して独自の設定を行い、狂ったカスタマイズを行います。
• フレックスボックス スタイルを指定すると、ナビゲーション バーはフレックスボックス ユーティリティを使用して簡単に整列オプションを設定できるようになりました。
• .navbar-toggleは現在.navbar-toggler、さまざまなスタイルと内部マークアップを持っ���います (3 つ以上ではありません<span>)。
• .navbar-formクラスを完全にドロップしました。もう必要ありません。代わりに、.form-inline必要に応じてマージン ユーティリティを使用して適用してください。
• Navbars には、デフォルトでmargin-bottomorが含まれなくなりました。border-radius必要に応じてユーティリティを使用してください。
• ナビゲーションバーを備えたすべての例が更新され、新しいマークアップが含まれるようになりました。

ページネーション

• コンポーネントをフレックスボックスで書き直しました。
• sの子孫に明示的なクラス ( .page-item、 ) が必要になりました.page-link.pagination
• .pagerカスタマイズされたアウトライン ボタンにすぎないため、コンポーネントを完全に削除しました。

パン粉

• s.breadcrumb-itemの子孫には、明示的なクラスが必要になりました。.breadcrumb

ラベルとバッジ

• 統合.labelされ、要素.badgeから明確になり、関連するコンポーネントが簡素化されます。<label>
• .badge-pill丸みを帯びた「丸薬」の外観の修飾子として追加されました。
• バッジは、リスト グループやその他のコンポーネントで自動的にフローティングされなくなりました。そのためには、ユーティリティ クラスが必要になりました。
• .badge-default.badge-secondary他の場所で使用されているコンポーネント修飾子クラスに一致するように削除および追加されました。

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

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

パネル

• .panelへ.card、現在はフレックスボックスで構築されています。
• .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およびは、 Sass マップから生成された、、およびユーティリティ.panel-danger用に削除されました。.bg-.text-.border$theme-colors

進捗

• コンテキスト.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}レスポンシブ フロート用のクラスを追加し、 andに対して冗長であるため、 .pull-leftandを削除しました。.pull-right.float-left.float-right
• タイプ：
  • テキスト配置クラスにレスポンシブ バリエーションを追加しまし.text-{sm,md,lg,xl}-{left,center,right}た。
• 配置と間隔:
  • すべての辺に新しいレスポンシブ マージンとパディング ユーティリティを追加し、さらに垂直および水平の短縮形を追加しました。
  • flexbox ユーティリティのボートロードが追加されました。
  • .center-block新しい.mx-autoクラスのためにドロップされました。
• Clearfix が更新され、古いブラウザー バージョンのサポートが廃止されました。

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

v3.2.0 で廃止されたBootstrap 3 のベンダー プレフィックスミックスインは、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_skewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

ドキュメンテーション

ドキュメントも全面的にアップグレードされました。ここにローダウンがあります：

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

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

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

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

• .hiddenandクラスは、jQuery のandメソッド.showと競合するため削除されました。代わりに、属性を切り替えるか、やなどのインライン スタイルを使用してください。$(...).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 アルファ版から削除:.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-*クラスを使用するのではなく、その画面サイズで単純に非表示にしないことで、要素を表示します。.d-*-none1 つのクラスと 1つのクラスを組み合わせ.d-*-blockて、特定の間隔の画面サイズでのみ要素を表示できます (たとえば.d-none.d-md-block.d-xl-none、中型および大型デバイスでのみ要素を表示します)。

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