Display property

Display property(ディスプレイ プロパティ)ではコンポーネントの display の値をすばやくレスポンシブに切り替えることが可能です(一般的な値と印刷にも対応しています。)。ディスプレイ プロパティの使い方の例を示します。

How it works

display property の値を変更することができます。
クラスは, 必要に応じてさまざまなエフェクトが組み合わせ可能です。

Notation

xsから xlにはブレークポイントの省略形がありません。 これらのクラスが min-width：0;から適用され, メディアクエリにバインドされていないためです。 ただし, 残りのブレークポイントにはブレークポイントの省略形が含まれます。

下記の形式で指定します。

• .d-{value} for xs
• .d-{breakpoint}-{value} for sm, md, lg, and xl.

value には下記の値が入ります。

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

メディアクエリは指定したブレークポイントより大きいスクリーン幅に影響があります。
例えば .d-lg-none はlgとxlの両方に display: none; が適用されます。

Examples

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

Hiding elements

mobile-friendly の開発を行うために, 要素の表示/非表示はデバイスごとに適用します。 同じサイトを違うバージョンとして作成するのではなく, スクリーンサイズによって要素の表示/非表示を行います。

要素を非表示にするには, .d-none, ` .d- {sm, md, lg, xl} -none` のどれかを使用します。

指定した範囲の画面サイズで要素を適用する場合は .d - * - none と ` .d - * - * ` を組み合わせることができます。
例えば, ` .d-none .d-md-block .d-xl-none` は, 中規模および大規模のデバイスを除くすべての画面サイズの要素を非表示にします。

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Display in print

プリントするときは 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>