Help us understand the problem. What is going on with this article?

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によって随時サブメニューが展開されていくドキュメント」が非常に使いづらかったので、そこが改善されたことが地味に嬉しかったです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした