Bootstrao v4正式リリース！アップデート情報まとめ

思いついたWebサイトのアイデアを簡単に、すぐに実用的な形にする際に非常に便利なのがCSSフレームワークです。その中でもっとも主流と言えるのがBootstrapですが、2015年の12月にBootstrap v4が正式リリースされました。どのように変更が加わったのか気になっている方も多くいるかと思います。そこで今回はバージョンアップの詳細を紹介します。

Bootstrap 4で大きく変わった点をBootstrap 4 alpha · Bootstrap Blogを参考に記載していきます。

• CSSプリプロセッサーをLESSからSassへ変更
  • これにより、Libsassを使っていた時よりもコンパイルが速くなり、Sassの開発者たちにも幅広く利用してもらえるようになりました。コンパイラにはLibSassが使用されています。
• グリッドシステムの改善
  • 「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.

Card link ：

</div> </div>

• HTMLリセットを新しいモジュールに統合
  • box-sizing: border-box, marginでの微調節などは1つのSassファイルで管理できるようになりました。
• カスタマイズオプションを刷新
  • gradients、transitionsおよびshadowsなど、これまではLESSファイルに記載があり別ファイルの作成の必要があったものが、Sassの変数で変えられるようになりました。
• IE8のサポート終了
  • サイズ指定は、pxではなくremとemに変更になりました。もしもIE8が必要ならば、v3を使用してください。
• すべてのJavaScriptのプラグインを書き直し
  • v4ではES6で全面的に書き直されました。これにより、AMDとUMDの問題は解決されました。
• ツールチップとポップオーバー用の自動配置ツールの改善
  • これまではtipsyを使用していましたが、v4ではtetherと呼ばれるツールになります。
• その他（代表的なもの）
  • フォームコントロール機能が新しくなりました
  • マージンとパディングのclassが追加されました
  • 新しいユーティリティのclassが追加されました

まとめ

IE8のサポート停止など、よりHTML5やES6への強化が目立ちます。Bootstrap 4は、モバイル環境により最適化されたといえます。Bootstrapを活用し、工数の大幅削減を目指しましょう。

hifive – HTML5企業Webシステムのための開発プラットフォーム