表示プロパティ
表示ユーティリティを使用して、コンポーネントの表示値などをすばやく応答的に切り替えます。より一般的な値のサポートと、印刷時の表示を制御するための追加機能が含まれています。
使い方
レスポンシブ ディスプレイ ユーティリティ クラスを使用して、display
プロパティの値を変更します。のすべての可能な値のサブセットのみを意図的にサポートしていますdisplay
。クラスは、必要に応じてさまざまな効果のために組み合わせることができます。
表記
からまでのすべてのブレークポイントに適用される表示ユーティリティ クラスには、ブレークポイントの省略形はありません。これは、これらのクラスが適用され、メディア クエリによってバインドされないためです。ただし、残りのブレークポイントには、ブレークポイントの省略形が含まれています。xs
xxl
min-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;
します。lg
xl
xxl
例
<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,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 |
<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
印刷クラスと表示クラスを組み合わせることができます。
<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
),