# Display helpers
ディスプレイヘルパーを使用すると、コンテンツの表示を制御できます。 これには、現在のビューポートまたは実際の要素表示タイプに基づいて条件付きで表示されることが含まれます。
| デバイス | コード | 種類 | 解像度の範囲 |
|---|---|---|---|
| Extra small | xs | 小型から大型のスマホ | < 600px |
| Small | sm | 小型から中型のタブレット | 600px > < 960px |
| Medium | md | 大型タブレットからノートパソコン | 960px > < 1264px* |
| Large | lg | デスクトップ | 1264px > < 1904px* |
| Extra large | xl | 4k、ウルトラワイド | > 1904px* |
| デスクトップにおけるブラウザスクロールバーの * -16px | |||
| 仕様 | |||
# Display
要素のdisplayプロパティを指定します。 これらのクラスは、 xs から xl までのすべてのブレークポイントに適用できます。 ベースクラス.d-{value}を使用する場合、 .d-${value}-xs と推定されます。
.d-{value}forxs.d-{breakpoint}-{value}forsm,md,lgandxl
value プロパティは次のいずれかです:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
ディスプレイヘルパークラスの特定のブレークポイントを設定する場合、指定以降のすべての画面幅に適用されます。 例えば、 d-lg-flex は lg と xl のサイズ画面に適用されます。
# Visibility
現在の viewport に基づいて要素を条件付きで表示します。 ブレークポイント・ユーティリティ・クラスは、常に下から上に向かって適用されます。 つまり、 .d-none であれば、すべてのブレークポイントに適用されます。 ただし、 .d-md-none は md 以降にのみ適用されます。
| スクリーンサイズ | クラス |
|---|---|
| 全て非表示 | .d-none |
| Hidden only on xs | .d-none .d-sm-flex |
| Hidden only on sm | .d-sm-none .d-md-flex |
| Hidden only on md | .d-md-none .d-lg-flex |
| Hidden only on lg | .d-lg-none .d-xl-flex |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-flex |
| Visible only on xs | .d-flex .d-sm-none |
| Visible only on sm | .d-none .d-sm-flex .d-md-none |
| Visible only on md | .d-none .d-md-flex .d-lg-none |
| Visible only on lg | .d-none .d-lg-flex .d-xl-none |
| Visible only on xl | .d-none .d-xl-flex |
さらに、横方向表示ヘルパークラスを使って、現在のビューポートに基づいて要素を表示することもできます。 これらのクラスは、 hidden-{breakpoint}-{condition} 形式で適用できます。
condition は以下のクラスベースを適用します:
only-xsからxlブレークポイントでのみ要素を非表示にするand-down- 指定されたブレークポイントとsmからlgブレークポイント以下の要素を非表示にするand-up- 指定されたブレークポイントとsmからlg以上のブレークポイントの要素を非表示にする
さらに、 media types は only conditionを使用してターゲットにできます。 hidden-screen-only と hidden-print-only の両方が現在サポートされています。
# 印刷時の表示
印刷用に表示プロパティを変更することもできます。
.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
printユーティリティー・クラスは、印刷時の表示ユーティリティーを使用しない場合にも組み合わせることができます。
# アクセシビリティ
# スクリーンリーダー
d-srユーティリティクラスを使用して、スクリーンリーダーを除くすべてのデバイスのコンテンツを条件付きで非表示にします。