BootstrapのVersion4がまだアルファ版ですが出ているのを最近見つけました。
ちょっと使ってみたのでそのレビューです。
まず、以前はTwitter Bootstrapという名前でしたが、作者がTwitterを退社したそうでBootstrapという名前に変更になりました。
大きく変わってはいませんが、こまかなところは微妙に違うので、過渡期では混乱しそうです。
LessからSassに変更
CSSのプリプロセッサがSassに変更になりました。
カスタマイズしていた人にはプリプロセッサが変わってしまうのは弊害かもしれませんね。
まぁ、この辺りをいじる人は両方使える人が多いとは思いますが…。
画像のレスポンシブ
以前はimg要素の属性に”.img-responsive”を付けるとレスポンシブ表示になりましたが、今バージョンからは、”.img-fluid”になりました。
そのほかにも自動的にthumbnail表示にしてくれる属性が追加されました。
パネルが廃止
一番厄介なのがPanelsとWellsが廃止されたことでしょう。
代わりにCardsという機能が追加されました。
互換性はなさそうなのでちょっと悩ましいところです。
汎用の余白クラスが追加
上下左右に余白を持たせる場合、.pb10とか.margin5とか汎用のクラスを自作していた人も多いかと思います。
Bootstrap4ではこれが追加されました。
{propety}{sides}-{size} というような書式です。
padding:1rem; であれば p-1
margin-top:3rem;はmt-3 といった具合のようです。
sizeは0~5までの6段階まで指定可能です。
個人的には一番これが便利だと思います。
まだアルファ版なので変更される可能性もありますし、機能もまだまだありそうです。
今後に期待ですね!