カラム
Bootstrap3.xとの変更箇所
- ブレークポイント:ポイントが3つから4つに増加(定義済みクラスの種類は4つから5つに増加)
- 極小サイズは、全てのサイズで対応可能なので、
.col-xs-
から.col-
に名称変更 - モバイルサイズの中にブレークポイントが追加されたが、クラス名は大画面サイズ用の
.col-xl-
が追加 - モバイルサイズ:
.col-xs-
(極小サイズ) ⇒.col-
(全てのサイズ)、.col-sm-
(小サイズ)に別れる
タブレットサイズ:.col-sm-
(小サイズ) ⇒.col-md-
(中サイズ)
デスクトップサイズ:.col-md-
(中サイズ) ⇒.col-lg-
(大サイズ)
大画面サイズ:.col-lg-
(大サイズ) ⇒.col-xl-
(特大サイズ)
Bootstrap4
デバイスの幅 | 極小 縦モバイルサイズ <576px |
小 横モバイルサイズ ≥576px |
中 タブレットサイズ ≥768px |
大 デスクトップサイズ ≥992px |
特大 大画面サイズ ≥1200px |
---|---|---|---|---|---|
コンテナの最大幅 | なし(自動) | 540px | 720px | 960px | 1140px |
クラス名 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
列の数 | 12 | ||||
左右脇の空白幅 | 30px(それぞれの側に15pxずつ) | ||||
入れ子 | 可能 | ||||
順序変更 | 可能 |
【重要】Bootstrap4で.col-xs-
は使用できない
Bootstrap3.x
デバイスの幅 | 極小 モバイルサイズ <768px |
小 タブレットサイズ ≥768px |
中 デスクトップサイズ ≥992px |
大 大画面サイズ ≥1200px |
---|---|---|---|---|
コンテナの最大幅 | なし(自動) | 750px | 970px | 1170px |
クラス名 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
列の幅 | 自動 | ~62px | ~81px | ~97px |
オフセット
Bootstrap3・・・col-{prefix}-offset-{columns}・・・col-sm-offset-3
Bootstrap4・・・offset-{prefix}-{columns}・・・offset-sm-3
画像
レスポンシブ
Bootstrap3の画像は、.img-responsive
でレスポンシブになった。Bootstrap4では、.img-fluid
でレスポンシブに。
サムネイル
.img-thumbnail
を使用すると、画像に丸みを帯びた1pxの境界線の持つスタイルが使用可能。
イメージを左右に配置
1 2 |
<img src="..." class="rounded float-left" alt="..."> <img src="..." class="rounded float-right" alt="..."> |
イメージの中央揃え
1 |
<img src="..." class="rounded mx-auto d-block" alt="..."> |
1 2 3 |
<div class="text-center"> <img src="..." class="rounded" alt="..."> </div> |
コメント