Bootstrap3からBoosstrap4へ移行する際の注意点!

CSS on 26 Oct , 2015

Bootstrap3からBoosstrap4へ移行する際の注意点!

IEのサポートが終了(ついに。。。)

いよいよBootstrapからIEが除外されました。
cssのフォントの単位がpxからremを使用するようになっています。remはルートのフォントサイズからの相対的な大きさなので、ルートのフォントサイズを変更すれば全てのフォントサイズの大きさを相対的に変更することが出来ます。
逆にIE8対応サイトでBootstrapを使いたい場合はBootstrap3を使うしかないですね。

ブレークポイントの変更

スマホサイズのブレークポイントが750pxから544pxに変更

Bootstrap3で1番幅が狭いブレークポイントである[sm]が750pxだったので、pcでブラウザの横幅を750px以下にしてしまうと画像などの横幅が750px(横幅100%)などになってしまい、UXが損なわれてしまうこともありました。
Bootstrap4では[xs]のサイズが544pxに変更されているので、このタイミングでスマホサイトのデザインをコントロールすればスムーズなUXを提供できるようになりました、この変更が個人的には1番嬉しいです。

また新たに[xl]が追加になりました、ブレークポイントは1200pxで今までの[lg]の値になります。
逆に[lg]は1170pxから992pxに変更になっています。

Bootstrap3とくらべて[lg]を追加したことで、ブレークポイントが細かくなっています。

名称 ver3 ver4(px)
xs >0px >0px
sm >768px >544px
md >992px >768px
lg <=1200px >992px
xl - <=1200px

IE10まで未対応のflexboxをサポート

floatに代わりブロックの横並びをしてくれるcssのflexboxがサポートされていますが、flexboxはIE10でも完全にサポートされていないためデフォルトではオフになっています。
スマホサイトのみに使うのならありまもしれません、IE無いので。