[bootstrap]display設定で画面サイズに応じて表示切替

プログラミング教室ITWORKSのayakaです。

自身の作成しているホームページにレスポンシブデザイン対応するためにBootstrapを利用してみました。
流石に幅広く使われるだけあって使いやすいですね。
Bootstrapのドキュメントやサンプルもわかりやすいです。
ドキュメントからは若干分かりずらかったdisplay設定を下記にまとめます

#Bootstrapのコンポーネントの基本動作
基本的にBootstrapで用意されているComponentはブラウザの画面サイズに応じてリサイズされます。（Navbarは画面サイズに応じて短縮表示）したがって既存のdivやtableにBootstrapのclassを適用するとそれだけでレスポンシブに動いてくれます

index.html

<div class="container"> -既存コンテンツ- </div>

#画面サイズに応じて表示/非表示を簡単設定
PCの画面サイズでは＜コンテンツＡ＞を表示させたいがスマートフォンの画面サイズでは＜コンテンツＢ＞を表示させたい場合下記のように記述し表示設定を指定することが可能です。

index.html

<div class="d-none d-lg-block">
       コンテンツＡ
</div>
<div class="d-block d-lg-none">
       コンテンツＢ
</div>

classにBootstrapで用意されているCSSを設定すれば簡単に
画面サイズに対する表示設定を行うことができます。

d-(画面サイズ指定)-表示設定

• 画面サイズ指定

  • 省略(xs)
  • sm
  • md
  • lg
  • xl

• 表示設定

  • none：非表示
  • inline：インライン表示
  • block：ブロック表示

---

参考
Bootstrap
Bootstrap4移行ガイド