ディスプレイプロパティ Display property

displayユーティリティを使用して、コンポーネントなどのdisplay値を素早くレスポンシブに切り替えます。一般的な値のサポートに加え、印刷時のdisplay制御のための追加機能も含まれています。

On this page

動作原理

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

表記法

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

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

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

valueは次のいずれかです：

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

display値は、$utilitiesで定義されたdisplay値を変更し、SCSSを再コンパイルすることで変更できます。

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

例

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-block d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

要素を非表示

より速いモバイルフレンドリーな開発のために、レスポンシブdisplayクラスを使用して、デバイスごとに要素を表示および非表示にします。同じサイトの完全に異なるバージョンを作成するのではなく、画面サイズごとに要素をレスポンシブに非表示にします。

要素を非表示にするには、.d-noneクラスまたは.d-{sm,md,lg,xl,xxl}-noneクラスのいずれかを使用します。

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

Screen size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none .d-sm-block`
Hidden only on sm	`.d-sm-none .d-md-block`
Hidden only on md	`.d-md-none .d-lg-block`
Hidden only on lg	`.d-lg-none .d-xl-block`
Hidden only on xl	`.d-xl-none .d-xxl-block`
Hidden only on xxl	`.d-xxl-none`
Visible on all	`.d-block`
Visible only on xs	`.d-block .d-sm-none`
Visible only on sm	`.d-none .d-sm-block .d-md-none`
Visible only on md	`.d-none .d-md-block .d-lg-none`
Visible only on lg	`.d-none .d-lg-block .d-xl-none`
Visible only on xl	`.d-none .d-xl-block .d-xxl-none`
Visible only on xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

hide on screens smaller than lg

html

<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-*ユーティリティと同じdisplay値のサポートが含まれています。

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

printクラスとdisplayクラスは組み合わせることができます。

Screen Only (Hide on print only)

Print Only (Hide on screen only)

Hide up to large on screen, but always show on print

html

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

CSS

SassユーティリティAPI

Displayユーティリティは、scss/_utilities.scssのutilities APIで宣言されています。utilities APIの使用方法を学びます。

scss/_utilities.scss

"display": (
  responsive: true,
  print: true,
  property: display,
  class: d,
  values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
),