表示プロパティ

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

使い方

レスポンシブ ディスプレイ ユーティリティ クラスを使用して、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

表示値は、変数を変更し$displaysて SCSS を再コンパイルすることで変更できます。

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

例

<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>

<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、中型デバイスと大型デバイスを除くすべての画面サイズで要素を非表示にします。

<div class="d-lg-none">hide on lg and wider screens</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

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

<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>