Bootstrap5を使い始めるにあたって疑問だったこと
上記記事を読んでBootstrapを学ぼうとしたのですが、どうもうまくいかないなと思って調べたことを書き置きます。
うまくいかなった理由は、この記事はver3.3.5の時代に書かれたものであって、現在はver5.0.0になっているからだと思われます。
記事に合わせて当時のバージョンを使うのはあまり好まないので、調べました。
1. ダウンロードしたdist内にfontsフォルダが見当たらない
zipが2種類あるのですが、小容量の方を解凍すると出てきたbootstrap-5.0.0-beta2-distフォルダを開いても、上記記事にあるような構造（↓）にはなっていませんでした。
具体的には、fontsフォルダがないのが大きな違いでした。
ただ、このせいでフォントが崩れる等はなかったので一旦放置します。
2. hiddenが効かない・使えない
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:red;">Red</div>
<div class="col-sm-8 hidden-sm" style="background-color:blue;">Blue</div>
<div class="col-sm-2" style="background-color:yellow;">Yellow</div>
</div>
</div>上記のように hidden-hogehoge と入力すればそのウィンドウサイズでは表示しない、という仕様にできる、との記述が上記記事にありました。しかし、これが効きませんでした。
調べてみると、Bootstrap4以降では hidden, visible クラスが廃止され、複数のクラスの併用で表記することになったようです。
smサイズでのみ非表示にしたい場合は、
div class="col-sm-8 d-none d-sm-block"と書かないといけません。
逆に sm サイズでのみ表示したい場合は
d-block d-sm-noneとすればうまくいきます。
d は display の略ですね。
上記記事に沿った例を示しておきます。
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:red;">Red</div>
<div class="col-sm-8 d-none d-sm-block" style="background-color:blue;">Blue</div>
<div class="col-sm-2 d-block d-sm-none" style="background-color:yellow;">Yellow</div>
</div>
</div>
詳しくは公式マニュアルの英語を読み下すか、下記記事を読めば書いてあります。
この記事が気に入ったらサポートをしてみませんか？