CSS
Bootstrap
bootstrap4

Bootstrap4の主な更新点

More than 3 years have passed since last update.

来ていたのでまとめました。

Bootstrap4

公式ブログ記事:"Bootstrap 4 alpha"


主な更新点


開発言語が Less から Sass へ変更に。

開発言語がSassになってました。


IE8のサポート終了とrem, em単位の使用

IE8がサポート対象から外れました。これにより、CSSで使用する単位に、従来の px ではなく、em, remが使用できるようになっため、こちらを使用するようになっています。 もし、IE8のサポートが必要な場合は、引き続きBootstrap3を使えとのことです。

emは、font-size = 1em とする単位です。 font-size: 16px なら 1em=16px です。

remは、root-emの略で、ルート要素(<html>)に指定されている font-size1remとなります。


グリッドのブレークポイントの追加

bootstrap3までのものに加え、 xl (Extra Large) が追加されています。デフォルトである1rem=16pxで換算した場合と合わせて整理すると以下のようになります。

名称
ver3
ver4(rem)
ver4(px)

xs
≥0px
≥0rem
≥0px

sm
≥750px
≥34rem
≥544px

md
≥970px
≥48rem
≥768px

lg
≥1170px
≥62rem
≥992px

xl
-
≥75rem
≥1200px

こうして見てみると、一段階上のサイズが追加されたというよりも、xssm の間が細かくなったという感じですね。


flexboxのサポート

$enable-flex: true;を設定することでflexbox Layoutが使用されるようになります。これにより、tablefloatを使っていた様々なハックが改善されるとのこと。ただし、IE9はflexbox Layoutをサポートしておらず、IE10でも古い仕様にしか対応していないため、デフォルトではこのオプションはfalseになっています。


well, thumbnail, panel を廃止、card に統一

コンポーネントの well, thumbnail, panelがなくなり、cardに統一されました。

スクリーンショット 2015-08-20 3.08.39.png


CSSリセットを Reboot というモジュールに統一

CSSリセットには、Bootstrap3ではNormalize.cssが使われていましたが、より柔軟なオプション設定ができるよう、Reboot(_reboot.scss)という新しいモジュールが作られました。


JavaScriptファイルをES6に対応

全てのJSファイルがES6で書き直され、babelでコンパイルするようになっています。また、tooltipのレイアウト計算に関して、 Tetherというライブラリを使ったそうです。


ドキュメントの整備

ドキュメントをMarkdownで書きなおしたそうです。また、ドキュメントに検索機能が付きました。Bootstrap3では CSSComponents に分かれていたドキュメントも1つにまとまっており、横断して検索が可能です。

スクリーンショット 2015-08-20 3.05.31.png

個人的には、Bootstrap3の「scrollspyによって随時サブメニューが展開されていくドキュメント」が非常に使いづらかったので、そこが改善されたことが地味に嬉しかったです。