CSSのフレームワークといえば、Bootstrapが有名です。
フレームワークといってもstyleを定義したクラスがまとまったファイルを参照しているようなことです。
初めはドキュメントを参照しながらスタイルを反映させるのですが、慣れてくれば
記憶と雰囲気から使えるので効率的にコードが書けます。
ただ、バージョンによって定義されたクラスが変化することがあるので、
部分的にスタイルが反映されない時は、確認する必要があります。
「font-weight-bold」が効かない
「font-weight-bold」が効かないのはバージョンが原因です。
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
stackpath.bootstrapcdn.com
Bootstrap 4.3.Xを使用しているユーザも多いと思います。
cdnで確認してみると、
.font-weight-bold {
font-weight: 700 !important;
}
とありますが、bootstrap5系では、この記述はありません。
https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.css
cdn.jsdelivr.net
bootstrap5系では、「font-weight-bold」が
「fw-bold」に変更されています。
.fw-bold {
font-weight: 700 !important;
}
他にも変更点がたくさんあるので、気をつけて使っていきましょう。
Bootstrap5系は、脱jQuery
Bootstrapを使いたいが、jQueryに依存しているため、導入できない方も
５系なら使えると導入する方も多いと思います。
ただ、4系からアップデートする人は注意が必要ですね。
変更点もあるので、レイアウトが崩れることも。。
おわりに
yarnを使ってBootstrapを入れたらなぜか、５系が入っていました。。。
意識せずに入れてしまったことに反省です。
既に正式版はリリースされたものの、私のプロジェクトにはなぜかbeta版ｗ
とりあえず、開発中のサービスはIEサポート外となりました。
コメント