目的
- Bootstrap 3 を使っている人が Bootstrap 4 に移行する時にどのあたりを考慮すればよいのか、マイグレーションする前提で主要な差異をまとめてみました。
- 基本的に Bootstrap 4 α版ベースの話なので、今後変わっていく可能性は大いにあります。備えあれば憂いなしという安心を得る目的としてざっと見ていただけると良いかと思います。
v3 のメンテナンスについて
v4 が出た時に v3 のメンテナンスどうするのか、という点について明確な対応指針が公開されています。しばらくは v3 も使える、ということかと思います。
以前 v3 をリリースした時は、直後に v2 のサポートを切ってしまったが、これは失敗だった。これを防ぐために v4 リリース後も v3 の重大なバグ修正とドキュメントの改善は続けられる。
マイグレーションガイド
では、さっそくどのあたりが変わるのかをまとめてみます。廃止になるものと、利用方法が大きく変わりそうな点という 2 つの観点でまとめいます。
廃止されるもの
- Panels、Thumbnails、Wells
- 新しい Cards で作り変え必要。
- Justified nav
- 代替手段なし
- Glyphicons icon font.
- いままで同梱されてましたが廃止されるらしい
- 自前で配信するか、font awesome に書き換える等何かしら対応必要
- page-header クラスがなくなります
- このクラスに依存して各ページ作成している場合は注意
- ブラウザサポート
- IE8 、iOS 6 のサポート停止
- Android 5 未満の Android ブラウザサポートは非公式サポート扱い
- 日本だと Android 4 系のユーザーがまだまだいるので、ちょっと不安ですね。
利用方法が大幅に変わるもの
影響範囲が大きいものをいくつか列挙します。細かい内容については、参考セクションに記載した、Migration guide も参照してください。
レスポンシブユティリティ
スマホだったら隠す/表示する、PCだったら隠す/表示するといったことを class で簡単に制御できるのですが、class 命名規則や使い方が変わります。
- .hidden-xs .hidden-sm .hidden-md .hidden-lg などが無くなります。
- 代わりに.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down などに書き換える必要があります
- .visible-* の利用も非推奨、とされています。hidden-xxxx-up or hidden-xxxx-down で代替してほしい模様
影響範囲としては大きそうです。
書き換えイメージ
従来の記載
.hoge.hidden-xs.hidden-sm
これからの記載
.hoge.hidden-sm-down
hidden / show といった class
.hidden や .show といったクラスは無くなります。ページロードした時に予め要素を消しておくようにしたい時などの処理で bootstrap の class に依存するような書き方をしている場合は、Css / JQuery で初期化するなど見直しが必要です。
参考 (公式なドキュメント)
- v4 になって何が新しいのか
- マイグレーションガイド