カッティングボード

カルマをカットしてます

Bootstrapのgridシステムだけ使いたい

下のアドベントカレンダーの11日目です。

www.adventar.org

 Bootstrapのグリッドシステムの部分だけ使いたいと思ったことありませんか?実はBootstrapの4系からその望みを叶えてくれてるんです。

Bootstrap3系のCSS

f:id:cut-ter:20161211223015p:plain

Bootstrap4系のCSS

f:id:cut-ter:20161211223032p:plain 

 ↑の写真の通り4系では今までになかったファイルが大量に追加されています。初めにファイル構成を見た時にはgridシステム等が切り出されているのだと思ってしまいましたがそういうわけではありませんでした。Bootstrap4系の機能をすべて用いたいときにはbootstrap.cssを使えば機能をすべて使えます。逆にgridシステムだけを使いたいときにはbootstrap-grid.cssを使えばgridシステムの部分だけ使うことができます。また4系からCSS3から追加されたflexboxを使用したgridシステムも追加されたらしいです。デフォルトではオフにされているらしいです。オンにしたかったら↓の通りフラグをtrueにしてコンパイルしなおせばいいらしいです。

f:id:cut-ter:20161211223617p:plain

 今回からは他のCSSフレームワークで実装されていたカード機能がパネルに置き換わる形で実装されています。カード機能が使いたかったら4系を使ってみるのもいいかもしれませんね。まぁダウンロード時にalphaと書かれている通り正式リリースしているわけではないみたいなのでしっかりと動作してほしい場合には3系を使ったほうがいいかもしれません。

 今日はbootstrap4系使うときにどれを使うのか迷ったのでメモ的な感じです。一応4系での変更点へのリンク(http://v4-alpha.getbootstrap.com/migration/)を張っておきます。

 

 明日のアドベントカレンダーはまたまたベです。