# ディスプレイ・ヘルパー

ディスプレイヘルパーを使用すると、コンテンツの表示を制御できます。 これには、現在のビューポートまたは実際の要素表示タイプに基づいて条件付きで表示されることが含まれます。

Material Designブレークポイント
デバイスコード (code タグ)TypeRange
Extra smallxs小型から大型のスマホ< 600px
Smallsm小型から中型のタブレット600px > < 960px
Mediummd大型タブレットからノートパソコン960px > < 1264px*
LargelgDesktop1264px > < 1904px*
Extra largexl4kとウルトラワイド> 1904px*
* -16px on desktop for browser scrollbar
Specification

# Display

Specify the elements display property. These classes can be applied to all breakpoints from xs to xl. When using a base class,.d-{value}, it is inferred to be .d-${value}-xs.

  • .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-flexlgxl のサイズ画面に適用されます。

# Visibility

現在の viewport に基づいて要素を条件付きで表示します。 ブレークポイント・ユーティリティ・クラスは、常に下から上に向かって適用されます。 つまり、 .d-none であれば、すべてのブレークポイントに適用されます。 ただし、 .d-md-nonemd 以降にのみ適用されます。

スクリーンサイズ クラス
Hidden on all .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 typesonly conditionを使用してターゲットにできます。 hidden-screen-onlyhidden-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ユーティリティクラスを使用して、スクリーンリーダーを除くすべてのデバイスのコンテンツを条件付きで非表示にします。

  • d-sr-only は要素を視覚的には非表示にしますが、スクリーンリーダー 対してはアナウンスします。
  • d-sr-only-focusable (d-srのフォーカスが可能な)要素は、フォーカスが設定されるまで視覚的に非表示になります。 これは、 スキップ・リンクを実装するときに便利です。

    Ready for more?

    Continue your learning with related content selected by the チーム or move between pages by using the navigation links below.
    GitHub でこのページを編集する
    最終更新日:12/03/2020, 3:37:19 AM