表示プロパティ

表示ユーティリティを使用して、コンポーネントなどの表示値を迅速かつレスポンシブに切り替えます。一般的な値に加え、印刷時の表示を制御するための追加の値もサポートしています。

動作方法

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

表記法

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

そのため、クラスは次の形式で命名されています。

• xsの場合: .d-{value}
• sm、md、lg、xlの場合: .d-{breakpoint}-{value}

ここで、valueは次のいずれかです。

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

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

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

例

<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クラスと1つの.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値を変更します。レスポンシブな.d-*ユーティリティと同じdisplay値をサポートしています。

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