Bootstrapのメジャーアップデート

はちです。実は最近Bootstrapを使うことにハマっています。

Bootstrapとは

HTMLの知識を持った人なら、Webページを簡単に作成できるCSSフレームワークとよばれるツールの中の１つです。
Bootstrapを利用すると、今まで時間のかかっていたレイアウトもすぐにできます。
特に楽なのがモバイル対応です。規則に沿ってソースを書くだけで簡単にモバイル対応できます。

Bootstrapはデメリットも有る

Bootstrapは見た目がフラットなデザインになりがちです。
また、レイアウトのスペースの取り方がなんとなく、「あ、これBootstrapだな」ってわかります。
他のCSSフレームワークの「Foundation」なんかも見たらなんとなくわかりますが…
要するに規則的なので、ある程度はしょうがないってことですね。(何が

そのBootstrapがVer3から4になった！

Alpha版ですが、Ver3からVer4になりました。
（※2021年5月、Ver5も登場しました。）

まだAlpha版なので、暫くはVer3を使い続けるので問題ありませんが、Ver4で1番大きく変わるのが以下の3点です。

1) LessからSassに変わる
2) フォントサイズの単位がpxからem、remが標準になる
3) グリッドシステムの改良

1)は、Sassを導入してない環境であれば余り関係ありませんが、Bootstrapは元々Lessを採用していたので、大きな変更といえば変更になります。
業界標準がSassになってきたというのが大きな理由のようです。

2)これも大きな変更になりますが、普段からem、remを意識して使っていれば、今回のアップデートでは余り大きな影響は受けないと思います。

3)これが1番大きな変更だと個人的に思います。
今までのブレークポイントであるxs、sm、mdサイズのサイズが変更になります。
そして4つ目のブレークポイントxlが追加されます。
ブレークポイントが変更になることで、今までのデバイスでブレークしなかったところでブレークしたり、意図していないレイアウトになることがあるかもしれません。

さいごに

今あるサイトを3から4に上げる必要はないと思いますが、4が正式にリリースされたら、積極的にまずは4を使ってみて覚えていきたいところです。