Bootstrap4モバイルフレンドリーの為の＜要素の表示/非表示＞

要素の表示/非表示

デバイスごとに要素を表示および非表示にするためのレスポンシブ表示クラスを使用できるようになりました。同じサイトの全く異なるバージョンを作成するのではなく、代わりに各画面サイズに応じて要素を非表示にする。

クラスの組み合わせ

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

＜例＞タブレットを分岐にする場合

タブレットから表示/スマホ非表示
768～（大きい画面のみ表示したい要素）・・・d-none d-md-block

タブレットから非表示/スマホ表示
～767（小さい画面のみ表示したい要素）・・・d-block d-md-none

※他に使うプログラムのブレークポイントは767に設定

＜例＞細かく分岐する場合

xsのみ表示（576px未満） .d-block.d-sm-none
smのみ表示（576px以上768未満） .d-none.d-sm-block.d-md-none
mdのみ表示（768px以上992px未満） .d-none.d-md-block.d-lg-none
lgのみ表示（992px以上1200px未満） .d-none.d-lg-block.d-xl-none
xlのみ表示（1200px以上） .d-none.d-xl-block