Bootstrap4のグリッドシステム v3からの変更点
2017.10.01 2018.03.06
Bootstrapのバージョンが４にアップされグリッドシステムも少し変更されました。画面サイズは4から5段階に、Flexboxによるレイアウトになりました。
Bootstrap V3 グリッドシステムの説明はこちら
Bootstrap4のグリッドシステム画面サイズ
Bootstrap4のレイアウトは5段階構成
Bootstrap4の画面サイズは5段階になりました。名前は1段階ずつずれてxssm、smmd、mdlg、lgxlに、576px未満が新たに追加されました。col-xs-*はなくなり、col-*になります。1200px以上サイズはcol-xl-*が新たに追加されました。
| V3 |
V4 |
デバイス |
画面幅 |
クラス（*は数値） |
container |
| – |
xs |
スマートフォン、組み込み端末など |
576px未満 |
col-* |
auto |
| xs |
sm |
ファブレットなど |
576px以上 |
col-sm-* |
540px |
| sm |
md |
タブレットなど |
768px以上 |
col-md-* |
720px |
| md |
lg |
ノートパソコンなどの省サイズモニタ |
992px以上 |
col-lg-* |
960px |
| lg |
xl |
テレビ、デスクトップPCなどの大画面モニタ |
1200px以上 |
col-xl-* |
1140px |
/* Extra small devices: Phones (<768px) */
@media (max-width: 767px) {}
/* Small devices: Tablets (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {}
/* Medium devices: Desktops (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Large devices: Desktops (≥1200px) */
@media (min-width: 1200px) {}
/* Extra small devices: Phones (<576px) */
@media (max-width: 575px) {}
/* Small devices: Phablet (≥576px) */
@media (min-width: 576px) and (max-width: 767px) {}
/* Medium devices: Tablets (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {}
/* Large devices: laptop (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Extra Large devices: Desktops (≥1200px) */
@media (min-width: 1200px) {}
containerサイズ
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
表示・非表示クラス
表示クラス.visible-*はなくなりました。非表示クラスは.hidden-* から .d-*-noneに変更になりました。
|
モバイル
768px未満 |
タブレット
768px以上992px未満 |
デスクトップ
992px以上1200px未満 |
デスクトップ
1200px以上 |
.visible-xs |
表示 |
非表示 |
非表示 |
非表示 |
.visible-sm |
非表示 |
表示 |
非表示 |
非表示 |
.visible-md |
非表示 |
非表示 |
表示 |
非表示 |
.visible-lg |
非表示 |
非表示 |
非表示 |
表示 |
.hidden-xs |
非表示 |
表示 |
表示 |
表示 |
.hidden-sm |
表示 |
非表示 |
表示 |
表示 |
.hidden-md |
表示 |
表示 |
非表示 |
表示 |
.hidden-lg |
表示 |
表示 |
表示 |
非表示 |
|
576px未満 |
576px以上 |
768px以上 |
992px以上 |
1200px以上 |
.d-none |
非表示 |
非表示 |
非表示 |
非表示 |
非表示 |
.d-sm-none |
表示 |
非表示 |
非表示 |
非表示 |
非表示 |
.d-md-none |
表示 |
表示 |
非表示 |
非表示 |
非表示 |
.d-lg-none |
表示 |
表示 |
表示 |
非表示 |
非表示 |
.d-xl-none |
表示 |
表示 |
表示 |
表示 |
非表示 |
display: inline
|
576px未満 |
576px以上 |
768px以上 |
992px以上 |
1200px以上 |
.d-inline |
○ |
○ |
○ |
○ |
○ |
.d-sm-inline |
– |
○ |
○ |
○ |
○ |
.d-md-inline |
– |
– |
○ |
○ |
○ |
.d-lg-inline |
– |
– |
– |
○ |
○ |
.d-xl-inline |
– |
– |
– |
– |
○ |
display: inline-block
|
576px未満 |
576px以上 |
768px以上 |
992px以上 |
1200px以上 |
.d-inline-block |
○ |
○ |
○ |
○ |
○ |
.d-sm-inline-block |
– |
○ |
○ |
○ |
○ |
.d-md-inline-block |
– |
– |
○ |
○ |
○ |
.d-lg-inline-block |
– |
– |
– |
○ |
○ |
.d-xl-inline-block |
– |
– |
– |
– |
○ |
display: block
|
576px未満 |
576px以上 |
768px以上 |
992px以上 |
1200px以上 |
.d-block |
○ |
○ |
○ |
○ |
○ |
.d-sm-block |
– |
○ |
○ |
○ |
○ |
.d-md-block |
– |
– |
○ |
○ |
○ |
.d-lg-block |
– |
– |
– |
○ |
○ |
.d-xl-block |
– |
– |
– |
– |
○ |
例えば、992px以上のみ表示したい場合、blockコンテンツだと d-noneとd-lg-block を指定することになります。
印刷の表示・非表示
.visible、.hiddenで始まるのではなく.d-print-で始まるように変更されました。
| クラス |
ブラウザ |
印刷 |
.visible-print-block
.visible-print-inline
.visible-print-inline-block
|
非表示 |
表示 |
.hidden-print |
表示 |
非表示 |
| クラス |
ブラウザ |
印刷 |
.d-print-block
.d-print-inline
.d-print-inline-block
|
非表示 |
表示 |
.d-print-none |
表示 |
非表示 |
フォントサイズ
V4はデフォルトのフォントサイズが14pxから16pxに変わりました。単位も px から rem に変わり1rem＝16pxがベースになります。
|
rem |
px |
| h1 |
2.5rem |
40px |
| h2 |
2rem |
32px |
| h3 |
1.75rem |
28px |
| h4 |
1.5rem |
24px |
| h5 |
1.25rem |
20px |
|
1.125rem |
18px |
| h6、デフォルトのフォント |
1rem |
16px |
|
0.875rem |
14px |
|
0.75rem |
12px |
|
0.625rem |
10px |
