Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
コンポーネント(Components)
ボタン、ドロップダウン、インプットグループ、ナビゲーション、アラートなどを提供するために構築された再利用可能な要素。
- アラート v4.0.0一部変更
- バッジ v4.0.0名称変更
- パンくずリスト v4.0.0設定変更
- ボタン v4.0.0一部変更
- ボタングループ v4.0.0一部変更
- カード v4.0.0新設
- カルーセル v4.0.0設定変更v4.2.1追加
- 折り畳み v4.4.1一部変更
- ドロップダウン v4.6.2設定変更v4.2.1追加
- フォーム v4.0.0一部変更v4.2.1追加
- インプットグループ v4.0.0設定変更
- ジャンボトロン v4.0.0設定変更
- リストグループ v4.0.0一部変更 v4.3.0一部追加
- メディアオブジェクト v4.0.0設定変更
- モーダル v4.5.1設定変更 v4.4.0追加
- ナビゲーション v4.0.0一部変更 v4.2.1設定変更
- ナビゲーションバー v4.2.1設定変更
- ページ送り v4.2.1設定変更
- ポップオーバー v4.0.0設定変更
- プログレスバー v4.0.0設定変更
- スクロールスパイ v4.0.0一部新設
- スピナー v4.2.1新設
- トースト v4.2.1新設
- ツールチップ v4.0.0設定変更
Bootstrap4.0で廃止になったもの
- グリフアイコン(Glyphicons)
span.glyphicon.glyphicon-{icon}
⇒ Glyphiconsのupstreamバージョン、Octicons、Font Awesome、Elusive Iconsで代用 - ページャー(Pager)
nav[aria-label]
>ul.pager
>li
⇒ ボタンとバッジ(.btn.page-link.badge-pill
)で代用的に使用 - ページヘッダ(Page header):
.page-header
- パネル(Panels)、サムネイル(Thumbnails)、囲み枠(Wells)⇒ カード(Cards)に統一
- アフィックス(Affix)プラグイン(affix.js) ⇒
position: sticky
ポリフィルの使用を推奨 ⇒.sticky-top
を使用