ちょうど先日Bootstrap4の安定版がリリースされました。Bootstrap4のalpha版からbeta版まで長らく続いていましたがいよいよBootstrap3からのメジャーアップデートになります。このアップデートに伴い、いくつか変更点もあるようなので今回はその辺りをまとめていきたいと思います。
Bootstrap3からBootstrap4への主な変更点
1. LessからSassへの変更
CSSプリプロセッサーが変わり、Bootstrap4ではSassが採用されました。よりパフォーマンスが向上しています。
2. グリッドシステムがfloatからflexboxに変更
Bootstrapのメイン機能と言えるグリッドシステムにて、flexboxが採用されました。これでより柔軟な設定が簡単にできるようになりました。
3. ブレークポイントが増えて5サイズのスクリーンサイズに
スマホ普及に合わせて新たにブレークポイントが増えました。Extra small（>576px）、Small（≥576px）、Medium（≥768px）、Large（≥992px）、Extra large（≥1200px）の5段階に
4. デフォルトフォントサイズが14pxから16pxに変更
従来は14pxをベースとしたフォントサイズが16pxに変更されました。日本語サイトにマッチするようになりました。
5. その他ユーティリティ機能の変更、追加、廃止
それ以外にもいくつかの既存機能が変更、廃止されたり、Bootstrap4で新たに追加された機能もあります。詳しくは
公式ドキュメント（https://getbootstrap.com/docs/4.0/getting-started/introduction/）をご覧ください。
それでは次にBootstrap4仕様でのCSSスタイルをまとめていきたいと思います。過去記事
「Bootstrapでよく使うCSSスタイルのクラスまとめ」ではBootstrap3でのCSSスタイルを紹介していますので見比べていただくことで変更ポイントも確認できるかと思います。
Bootstrap4でのグリットシステム：コンテナ
| .container |
固定幅のグリッドシステムのコンテナ要素を定義 |
| .container-fluid |
可変全幅のグリッドシステムのコンテナ要素を定義 |
Bootstrap4でのグリットシステム：グリッド（行）
| .row |
行を定義（コンテナ要素に内包される） |
| .row.align-items-start |
アイテムを垂直方向上端に揃える（align-items: flex-start;を適用） |
| .row.align-items-center |
アイテムを垂直方向中央に揃える（align-items: center;を適用） |
| .row.align-items-end |
アイテムを垂直方向下端に揃える（align-items: flex-end;を適用） |
| .row.justify-content-start |
アイテムを水平方向左端に揃える（justify-content: flex-start;を適用） |
| .row.justify-content-center |
アイテムを水平方向中央に揃える（justify-content: center;を適用） |
| .row.justify-content-end |
アイテムを水平方向右端に揃える（justify-content: flex-end;を適用） |
| .row.justify-content-around |
アイテムを水平方向左端に揃える（justify-content: space-around;を適用） |
| .row.justify-content-between |
アイテムを水平方向左端に揃える（justify-content: space-between;を適用） |
| .row.no-gutters |
アイテムが保持する左右余白を削除 |
Bootstrap4でのグリットシステム：グリッド（列）
| .col |
列を定義（rowに内包される） |
| .col-{prefix}-{columns} |
列の幅と対応するスクリーンサイズを定義（rowに内包される） |
| .col.align-self-start |
アイテムを垂直方向上端に揃える（align-self: flex-start;を適用） |
| .col.align-self-center |
アイテムを垂直方向中央に揃える（align-self: center;を適用） |
| .col.align-self-end |
アイテムを垂直方向下端に揃える（align-self: flex-end;を適用） |
| .col.order-{prefix}-{number} |
アイテムの並び順を指定（order: N;を適用） |
| .col.offset-{prefix}-{columns} |
スペース用の列（左余白分オフセット）を定義しcolumnsの数値分むかって左側に余白をつける |
| .col.ml-{prefix}-auto |
余ったスペースをアイテム数で均等に分けて配置する |
画面サイズを指定するprefixについて
| xl |
高解像度デスクトップのスクリーンサイズ |
| lg |
デスクトップのスクリーンサイズ |
| md |
ラップトップのスクリーンサイズ |
| sm |
タブレットのスクリーンサイズ |
| xs |
モバイルのスクリーンサイズ（.colに指定する場合は省略する） |
その他Bootstrap4で変更された主な汎用スタイル
アライメント
| .mx-auto |
ブロック要素を中央揃えにします（.center-blockと同じ） |
イメージ
| .img-fluid |
ボックスに合わせた可変サイズのレスポンシブ対応になります（.img-responsiveと同じ） |
表示・非表示
| .d-{prefix}-none |
指定したスクリーンサイズで非表示に |
| .d-{prefix}-block |
指定したスクリーンサイズでブロック要素として表示 |
| .d-none.d-sm-block |
xsのスクリーンサイズ以下を非表示に（.hidden-xs-downと同じ） |
| .d-none.d-md-block |
smのスクリーンサイズ以下を非表示に（.hidden-sm-downと同じ） |
| .d-none.d-lg-block |
mdのスクリーンサイズ以下を非表示に（.hidden-md-downと同じ） |
| .d-none.d-xl-block |
lgのスクリーンサイズ以下を非表示に（.hidden-lg-downと同じ） |
| .d-sm-none |
smのスクリーンサイズ以上を非表示に（.hidden-sm-upと同じ） |
| .d-md-none |
mdのスクリーンサイズ以上を非表示に（.hidden-md-upと同じ） |
| .d-lg-none |
lgのスクリーンサイズ以上を非表示に（.hidden-lg-upと同じ） |
いかがでしょうか、個人的には便利になったと思う反面、少しややこしくなったと感じる箇所もあるので複雑な思いですが、、これ以外にもたくさんのスタイルが用意されていますので詳しくは公式ドキュメントをご覧ください。
categories