【入門】Bootstrapの使い方　〜 display 〜

みなさんこんにちは さくちゃん です。

本日は、「displayの使い方」について書いていきます。
本記事は、公式サイトを参照しながら解説していきます。
公式サイトはこちら

では早速やっていきましょう！

displayの使い方

ブレークポイント

displayを使うと、レスポンシブに対応することができます。

Bootstrapではいくつかのブレークポイントが設けられています。
下の図をご覧下さい。

このブレークポイントを指定してあげることで、レスポンシブに対応することができます。
具体的には、ある要素を「スマートフォンのときだけ表示させる」などと指定する時に使用します。
ちなみに、スマートフォンのときは「xs〜sm」、タブレットのときは「md」を指定してあげるといいでしょう。

前回紹介した「グリッドシステム」でも活用することなので必ず覚えましょう！

書き方

では実際に、「〜のときだけ表示/非表示にする」という要素を書いていきましょう！
まずはそれぞれのときのクラスを確認しましょう。

displayに対する値として今回は「block」を指定しましたが、それ以外にも「inline」「inline-block」を指定しても構いません。

では実際に書いていきます。
例えば、「ある要素をxsのときだけ表示させる」と書くときは

<div class="d-block d-sm-none">
block
</div>

と書きます。
実際にブラウザで確認して見ましょう。
xs以外のときは表示されないので、下のようになります。

そしてxsのときになると「block」という文字が表示されます。

このようにしてdisplayを使います。

では今回は以上になります。