Booststrap 4の安定版がついに正式リリースされました。2018年1月18日、Boostrap 4.0.0としてリリースされています。
Bootstrap 4の開発が始まったのが2015年後半なので、正式リリースまで約2年ほどかかりましたね。
Bootstrap 3よりも使いやすくなっていておすすめです。
Bootstrap 3 から Bootstrap 4への変更点
レスポンシブなグリッドシステムを採用し、モバイルファーストなデザインができることに変わりません。
細かい変更点がたくさんあるものの、Bootstrapをカスタマイズしないでそのまま利用する利用者としては、今までと同じ考え方で利用することができると思います。
ただし、class名の変更であったり廃止された考え方もあるのでBootstrap 3からBootstrap 4へ移行する際には公式のドキュメントを見ながら移行を進める必要があります。
公式ドキュメント：https://getbootstrap.com/docs/4.4/migration/
ブラウザのサポートについて
サポート対象となるブラウザはチェックしておいたほうが良いでしょう。Bootstrap4ではCSS3で使えるFlexboxの考え方を採用していることもあり、昔のブラウザはサポート対象とはなっていません。
通常は新しいブラウザが使われるはずなので大丈夫ですが、古いブラウザにも対応したい方は注意が必要ですね。
なお、最近のChromeやSafariなどのブラウザはもちろんサポート対象です。
サポート対象外ブラウザ : IE 9 以下、iOS 6 以下
うれしい変更点
バージョン3からバージョン4への変更で、使いやすいclassがたくさん増えています。
数ある変更の中でも以下の変更点がとてもよかったです。
レイアウトを切り替える階層が増えた
Bootstrapでは画面のサイズに応じてレイアウトの調整を行うことができますが、
バージョンアップでそのレイアウトの切り替えを行う階層が一つ追加されました。
Bootstrap 3ではxs、sm、md、lgの4つでしたが、
Bootstrap4ではxlが一つ増えてより細かいレイアウトの切り替えができるようになりました。
なお、単純に階層が増えただけでなく、それぞれの切り替える階層の範囲も変更されているので注意しましょう。
margin、paddingの設定をclassで簡単に設定できる
marginとpaddingがclassで簡単に指定できるようになったのが個人的には一番うれしい点です。
上、下、左、右とそれぞれでも調整可能なので、レイアウトを調整するときにとても便利です。
marginを設定する場合はm{上下左右(t,b,l,r)}-{サイズ}、
paddingの場合はp{上下左右(t,b,l,r)}-{サイズ}で簡単に指定できます。
Bootstrap 4の導入方法
Bootstrap 4を利用する方法はファイル群をダウンロードして使用する方法とCDNで利用する方法の大きく2種類があります。
CDNを利用する場合はHTMLのヘッダーとフッターにそれぞれ数行ずつ追加するだけですぐに利用できるのでオススメです。
CDNで利用する場合については、以下の記事で導入方法を紹介しているので参考にしてみてください。
https://www.marorika.com/entry/setting-bootstrap
おわりに
正式にBootstrap 4がリリースされたことを紹介しました。
Bootstrap 4を導入すればレスポンシブ対応が簡単にできるだけでなく、デザインの変更もとても簡単になるのでオススメです。
まだ導入していない方は導入しちゃいましょー。