Bootstrap4の変更点まとめ

オープンソースのCSSフレームワークである最新版Bootstrapの「Bootstrap4」が2018年1月18日に正式リリースされた。約5年ぶりのメジャーアップデートだ。更に先日、AdobeのDreamweaverでもBootstrap4のサポートを開始したので、そろそろ満を持してBootstrap3からBootstrap4へ移行する時期かもしれない。

とりあえずBootstrapのおさらいと、Bootstrap3からBootstrap4になって変更になった点をまとめておく。

Bootstrapとは
Bootstrap4の主な変更点
まとめ

Bootstrapとは

今現在、世界で最も利用されている有名なCSSのフレームワークです。簡単に言うと複雑なCSSの知識がなくても簡単にシャレた感じのレスポンシブデザインのWEBサイトが作れるので一気に普及しました。

もともとTwitter社が「Twitter Bootstrap」という名前で開発していたものをオープンソースにして公開したという優れものです。

そのBootstrapが、Bootstrap3から約5年ぶりにメジャーアップデートしてBootstrap4という名前で2018年1月18日に正式リリースされました。

■Bootstrap公式サイト
https://getbootstrap.com/

Bootstrap4の主な変更点

グリッドシステムの変更

Bootstrapといえばグリッドシステムです。そのクラスの数が従来の4つから一つ増えて5つになりました。

最小のブレークポイント（575px）が追加され、更に.col-xs-*というクラス名が廃止されて.col-*と.col-xl-*という名称が新設されたことにより、ブラウザの横幅（width）ごとの各クラス名がズレることになります。

ver.＼px	～575px	576～767px	768～991px	992～1199px	1200px～
Bootstrap3		.col-xs-*	.col-sm-*	.col-md-*	.col-lg-*
Bootstrap4	.col-*	.col-sm-*	.col-md-*	.col-lg-*	.col-xl-*

※更に従来のFloatレイアウトからFlexboxレイアウトに変更されました。
Bootstrap4ではFlexboxがデフォルトで有効になっています。それに伴い、垂直および水平配置クラスのサポートも含まれています。

【※感想】
ブレークポイントの追加はいいですがブレークポイントごとのクラス名が変わっているのが微妙ですね。
いっそのこと従来のブレークポイントは踏襲した上でクラスの数を6つにして、最小（.col-*）と最大（.col-xl-*）だけ追加という「無印、xs、sm、md、lg、xl」のわかりやすい6パターンで良かった気がしないでもないですが、まあそうしなかった理由があるのでしょう・・・。

Flexboxは便利なのでナイスです！