オルタナティブ・ブログ > ITは心の仕事です >

テクノロジーに心も仕事も奪われそうな日々を綴ります。

Bootstrap 4 が正式リリース | 今まで以上に CSS のコード量を減らせそう

»

Bootstrap 4

2018年1月18日にしれっと正式版がリリースされていました、我らが Bootstrap のバージョン4。

今回のアップデートでは Flexbox に対応したほか、margin、padding、borderに関するクラスなども加わっていてこれまで以上にCSSのコーディングを減らせそうです。

個人的には Flexbox の対応が一番ありがたくて、コンテナー内のカラムを自動的に中央に寄せたり、子要素の高さをそろえたりといったことが、要素にクラスを付与するだけで実現します。

下記の画像のページは、Bootstrap 4のみを使って15分位で作ったものです。

この画像のページでは SASS で border-radius を無効にしていますが、それ以外はCSSを書くこと無く作っています。

なんか、それっぽいページがサクッと作れてしまいますね。

現時点ではまだ SASS の変数で調整できないものもあるようですが、将来対応していくらしいのでまだまだ使い勝手は良くなっていくでしょうね。

Bootstrap 4 は CSS ファイルを読み込んで使うのもいいですが、Webpack などと一緒に使うと SASS でのカスタマイズや CSS のモジュール化ができるのでオススメです。

僕は Larabel Mix で使っています。設定なしでもそれなりに使えるので便利ですね。

Laravel Mix で使う時の導入方法は下記のエントリで。

Bootstrap 4 を Laravel mix で使う方法 - Qiita


流石にまだバージョン 4 の書籍は無いので以前のバージョンのものを参考にしてみても良いかもしれません。

動画を見ながらだと学習がはかどるのでドットインストールなんかも見てみるといいです。こちらはすでに4対応。

Bootstrap 4入門 (全22回) - プログラミングならドットインストール

多分アルファかベータ版のときに作ったんでしょうけど、大きくは変わってないので問題ないかと。

Comment(0)