Source

表示プロパティ

表示ユーティリティを使用して、コンポーネントの表示値などをすばやく応答的に切り替えます。より一般的な値のサポートと、印刷時の表示を制御するための追加機能が含まれています。

使い方

レスポンシブ ディスプレイ ユーティリティ クラスを使用して、displayプロパティの値を変更します。のすべての可能な値のサブセットのみを意図的にサポートしていますdisplay。クラスは、必要に応じてさまざまな効果のために組み合わせることができます。

表記

からまでのすべてのブレークポイントに適用される表示ユーティリティ クラスには、ブレークポイントの省略形はありません。これは、これらのクラスが適用され、メディア クエリによってバインドされないためです。ただし、残りのブレークポイントには、ブレークポイントの省略形が含まれています。xsxlmin-width: 0;

そのため、クラスは次の形式を使用して名前が付けられます。

  • .d-{value}為にxs
  • .d-{breakpoint}-{value}、sm、md、lgおよびxl。

valueは次のいずれかです。

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

メディア クエリは、指定されたブレークポイント以上の画面幅に影響します。たとえば、と画面の両方に.d-lg-none設定します。display: none;lgxl

例

d-インライン
d-インライン 
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
dブロック dブロック 
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

要素を隠す

モバイル対応の開発を迅速に行うには、レスポンシブ表示クラスを使用して、デバイスごとに要素を表示および非表示にします。同じサイトのまったく異なるバージョンを作成することは避け、代わりに各画面サイズに応じて要素を非表示にします。

要素を非表示にするには、レスポンシブ スクリーン バリエーション.d-noneのクラスまたはいずれかのクラスを使用するだけです。.d-{sm,md,lg,xl}-none

特定の画面サイズの間隔でのみ要素を表示するには、1 つ.d-*-noneのクラスをクラスと組み合わせることができます.d-*-*。たとえば.d-none .d-md-block .d-xl-none、中型デバイスと大型デバイスを除くすべての画面サイズで要素を非表示にします。

画面サイズ クラス
すべて非表示 .d-none
xs でのみ非表示 .d-none .d-sm-block
SMのみ非表示 .d-sm-none .d-md-block
md でのみ非表示 .d-md-none .d-lg-block
lgでのみ非表示 .d-lg-none .d-xl-block
xl のみ非表示 .d-xl-none
すべてに表示 .d-block
xs でのみ表示 .d-block .d-sm-none
SMでのみ表示 .d-none .d-sm-block .d-md-none
MD でのみ表示 .d-none .d-md-block .d-lg-none
lgでのみ表示 .d-none .d-lg-block .d-xl-none
xl でのみ表示 .d-none .d-xl-block
hide on screens wider than lg
lg より小さい画面では非表示 
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

印刷物での表示

display印刷表示ユーティリティ クラスを使用して、印刷時に要素の値を変更します。displayレスポンシブ.d-*ユーティリティと同じ値のサポートが含まれます。

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

印刷クラスと表示クラスを組み合わせることができます。

画面のみ (印刷時のみ非表示)
Print Only (Hide on screen only)
画面では大きく非表示にしますが、印刷では常に表示します 
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>