bootstrap4がリリースされたので変更をまとめてみた

New!

また実際には2パターンのSass(LibsassとRuby Sass)が内蔵されているのでコンパイル時に好きな方が選べるようになりました。

グリッドシステムの変更ブレイクポイントが４箇所に増えました。 Bootstrap3の時には切り捨てられてしまっていた768px以下の設定をひろうことが可能になりました。

より小さい画面のデバイスへの対応の結果でモバイルを意識した設計に変更されています。

またグリッドの単位がpxからremに変わっているので注意が必要です。

FireFoxへの対応これまで対応してこなかったFireFoxへの対応がされるようになりました。 Flexboxを使用すると、既存のコンポーネントがfloatレイアウトからflexレイアウトへと移行されるそうです。

ただしこの機能は通常だとOFFなので切り替えをする必要があります。

新しいコンポーネント Cards wells, thumbnails, panelsの3つのコンポーネントが廃止となり、 cardsという新しいコンポーネントに統合されました。

グリッドの中に画像を入れ込むような時にはcardsを利用すれば良さそうです。 - リセットCSS リセットCSSが変更されたらしいですが大幅な改善があったという感じではありません。

追加されたSassファイルがbootstrap3の時のscaffolding.lessとほぼ同じ機能を有しています。

またデフォルトのフォントサイズが14px -> 16pxへ変更になったため少し文字が大きく感じます。

今回のバージョンアップの肝は読み込みの速さにこだわった点とマルチデバイスへの対応にあるのではないでしょうか。

かねてよりバランスを撮るのが難しい存在だったIEのサポートを切ったことでより幅の広いサポートが可能になったのではないかと思います。

またES6の導入やbabelでのトランスパイルを前提とした作りでより一層UIの構築がリッチになる予感です。

remとはどんな単位なのか

remはCSS3で導入された単位です。 root emの略でルート(html)のサイズの継承をするemということlistの中の文字だけサイズがずれるなんてことが起きにくいのがいいですね！