BootStrap4.1の表示/非表示コントロール設定

久しぶりにBootStrapを使ってみたらバージョン4.1になって表示/非表示コントロールまわりの仕様がわかりにくく感じたのでまとめてみました。

作ったのは今年の夏行こうと思っている極東ロシア情報メモサイト。

マニュアルをよく見る

以前使ったときは3.2あたりだったと思います。当時もグリッドシステムを利用して、デバイスサイズに応じて要素の表示非表示を切り替えていました。

メジャーバージョンが上がって表示まわりのプロパティクラス名の変更があったのも原因のひとつですが、ブレイクポイントの理解が浅かったのもあって、なかなかうまく表示/非表示をコントロールできませんでした。

マニュアルはDocumentationにあります。

ブレイクポイントについてはLayoutのGridに、表示コントロールについてはUtilitiesのDisplayに書いてあります。

表示コントロール

Bootstrap4ではHTML5のdisplayプロパティを使って要素の表示非表示をコントロールします。コントロールしたい要素に対して指定するクラス名のフォーマットは以下のとおり。

d[-ブレイクポイント]-値

ブレイクポイントとして指定できるものは以下の５つ。

• 無指定
• -sm
• -md
• -lg
• -xl

値として指定できるものはHTML5のdisplayプロパティ同様です。

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

ということで非表示にしたいときは.d[-ブレイクポイント]-noneを指定する必要があります。

ブレイクポイント指定時の適用範囲

それぞれのブレイクポイントを指定したときにそのdisplayプロパティの適用範囲は以下のようになります。

このように指定されたブレイクポイントを含めてそれよりも広いものに対して適用されるというのが基本動作。したがってブレイクポイントを指定しなければ全範囲に適用されることになります。

任意のブレイクポイントを境に表示/非表示を切り替える

上記を踏まえると任意のブレイクポイントを境に表示/非表示を切り替える指定は次のようになります。

指定ブレイクポイント未満で非表示、以上で表示

始めに全範囲の非表示指定をしたのち、指定ブレイクポイント以上にdisplayプロパティの値を与えます。

<div class="d-none d-ブレイクポイント-値">
<!--
例えばタブレット以上でblock要素の表示なら。。。
<div class="d-none d-md-block">
-->

指定ブレイクポイント未満で表示、以上で非表示

指定ブレイクポイント未満のdisplayプロパティを指定が必要であれば全範囲にそれを指定して、指定ブレイクポイント以上を非表示指定します。

<div class="d-値 d-ブレイクポイント-none">
<!--
例えばPC未満で要素非表示なら。。。
<div class="d-lg-none">
上記の際displayプロパティの要素をtableに指定したければ。。。
<div class="d-table d-lg-none">
-->

基本的に一旦全範囲に対して表示または非表示指定をしたのち、希望するブレイクポイント以上の範囲に対して希望の表示または非表示指定をするという操作になります。

応用編

上記基本を押さえれば、細かいコントロールもできるようになります。

ブレイクポイント前後で異なる表示

そんな需要があるかどうかはともかく、例えばタブレット未満でtable表示、以上でinline表示なんてのもできる。

<div class="d-table d-md-inline">

全範囲中の特定範囲でのみ表示または非表示

例えばタブレットのみでflex表示、それ以外が非表示なんてのはこう。

<div class="d-none d-md-flex d-lg-none">

こんな感じ。