表示ユーティリティ（Display property） v4.0.0設定変更

※v3のレスポンシブ・ユーティリティより変更。

使い方（How it works）

レスポンシブな表示ユーティリティクラスを使用して、displayプロパティの値を変更。Bootstrapでは意図的に表示可能なすべての値のサブセットのみをサポート。クラスは、必要に応じてさまざまなエフェクトが組み合わせ可能。

 

記法について（Notation）v4.0.0クラス名変更、一部追加

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

したがって、クラス名は次の形式で指定：

• .d-{value} は、xs
• .d-{breakpoint}-{value} は、sm, md, lg, xl

valueは次のいずれか：

• none：非表示（display: none;）
• inline：インライン表示（display: inline;）
• inline-block：インライン・ブロック表示（display: inline-block;）
• block：ブロック表示（display: block;）
• table：テーブル表示（display: table;）
• table-row：テーブル行表示（display: table-row;）
• table-cell：テーブルセル表示（display: table-cell;）
• flex：flexコンテナ表示（display: flex;）
• inline-flex：flexインラインコンテナ表示（display: inline-flex;）

表示のvalueは、scss/_variables.scss 内の $displays 変数を変更してSCSSを再コンパイルすることで変更可能。【v4.3.0～】

メディアクエリは、指定されたブレークポイント以上で画面の幅を調整。例えば、.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>

インライン・ブロック表示コピー<div class="d-inline-block p-2 bg-primary text-white">
	<h3>d-inline-block</h3>
	ブロック1
</div>
<div class="d-inline-block p-2 bg-dark text-white">
	<h3>d-inline-block</h3>
	ブロック2
</div>

テーブル表示コピー<div class="d-table">
	<div class="d-table-row">
		<p class="d-table-cell p-2 bg-primary text-white">d-table</p>
		<p class="d-table-cell p-2 bg-dark text-white">d-table</p>
	</div>
	<div class="d-table-row">
		<p class="d-table-cell p-2 bg-primary text-white">d-table</p>
		<p class="d-table-cell p-2 bg-dark text-white">d-table</p>
	</div>
</div>

上述した1つのユーティリティごとにもレスポンシブのバリエーションが存在する。

定義済クラスの種類

 

要素の表示/非表示（Hiding elements）v4.0.0設定変更

モバイルフレンドリーな開発をより迅速に行うには、デバイスごとに要素を表示や非表示にするためのレスポンシブ表示クラスを使用。同じサイトの全く異なるバージョンを作成するのではなく、代わりに各画面サイズに応じて要素を非表示にする。

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

指定された画面サイズの間隔でのみ要素を表示するには、.d-*-none クラスを .d-*-* クラスと組み合わせ可能（.d-none.d-md-block.d-xl-none は、中規模と大規模のデバイスを除くすべての画面サイズの要素を非表示にするなど）。

見本

設定例

コピー<div class="d-lg-none">lgより広い画面では非表示</div>
<div class="d-none d-lg-block">lgより狭い画面では非表示</div>

定義済クラスの組み合わせ

{display} は、block, inline, inline-block, table, table-cell, table-row, flex, inline-flex のいずれかを入れる。

 

印刷時の表示/非表示（Display in print）v4.0.0クラス名変更、一部追加

印刷表示ユーティリティクラスで印刷する場合、要素の表示値を変更する。レスポンシブの .d-* ユーティリティと同じ display 値のサポートを含む。

• .d-print-none（印刷時の要素：display: none;（非表示））
• .d-print-inline（印刷時の要素：display: inline;）
• .d-print-inline-block（印刷時の要素：display: inline-block;）
• .d-print-block（印刷時の要素：display: block;）
• .d-print-table（印刷時の要素：display: table;）v4.0.0追加
• .d-print-table-row（印刷時の要素：display: table-row;）v4.0.0追加
• .d-print-table-cell（印刷時の要素：display: table-cell;）v4.0.0追加
• .d-print-flex（印刷時の要素：display: flex;）v4.0.0追加
• .d-print-inline-flex（印刷時の要素：display: inline-flex;）v4.0.0追加