Bootstrao v4正式リリース!アップデート情報まとめ
思いついたWebサイトのアイデアを簡単に、すぐに実用的な形にする際に非常に便利なのがCSSフレームワークです。その中でもっとも主流と言えるのがBootstrapですが、2015年の12月にBootstrap v4が正式リリースされました。どのように変更が加わったのか気になっている方も多くいるかと思います。そこで今回はバージョンアップの詳細を紹介します。
Bootstrap 4で大きく変わった点をBootstrap 4 alpha · Bootstrap Blogを参考に記載していきます。
- CSSプリプロセッサーをLESSからSassへ変更
- グリッドシステムの改善
- 「Extra large」が追加され、より細かくブレイクポイントが指定できるようになりました。例えばSassに組み込むならば以下のような書き方ができます。
@include media-breakpoint-up(xl) { ... }
- Flexboxの使用が可能
- _variables.scss にある $enable-flex をtrueにすることでflexboxを利用したCSS拡張も利用できるようになりました。ただし、IE9では使えないので注意が必要です。
- サムネイルやパネル、wellsはcardsへ統合
- cardsのサンプルコードです。
class=“card”>
class=“card-img-top” data-src=“…” alt=“Card image cap”> div class=“card-block”>
class=“card-title”>Card title
class=“card-text”>Some quick … content.
</div> </div>
- HTMLリセットを新しいモジュールに統合
- box-sizing: border-box, marginでの微調節などは1つのSassファイルで管理できるようになりました。
- カスタマイズオプションを刷新
- gradients、transitionsおよびshadowsなど、これまではLESSファイルに記載があり別ファイルの作成の必要があったものが、Sassの変数で変えられるようになりました。
- IE8のサポート終了
- サイズ指定は、pxではなくremとemに変更になりました。もしもIE8が必要ならば、v3を使用してください。
- すべてのJavaScriptのプラグインを書き直し
- ツールチップとポップオーバー用の自動配置ツールの改善
- その他(代表的なもの)
- フォームコントロール機能が新しくなりました
- マージンとパディングのclassが追加されました
- 新しいユーティリティのclassが追加されました
まとめ
IE8のサポート停止など、よりHTML5やES6への強化が目立ちます。Bootstrap 4は、モバイル環境により最適化されたといえます。Bootstrapを活用し、工数の大幅削減を目指しましょう。
コメントは受け付けていません。