表示プロパティ

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

このページでは

使い方

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

表記

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

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

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

valueは次のいずれかです。

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

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

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

例

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,xxl}-none

特定の画面サイズの間隔でのみ要素を表示するには、1 つ.d-*-noneのクラスをクラスと組み合わせることができます.d-*-*。たとえば.d-none .d-md-block .d-xl-none .d-xxl-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-xxl-block`
xxl のみ非表示	`.d-xxl-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 .d-xxl-none`
xxlでのみ表示	`.d-none .d-xxl-block`

hide on lg and wider screens

lg より小さい画面では非表示

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

サス

ユーティリティ API

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

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