Migration to Bootstrap v4

はじめに

TrainStampRally https://train.ponkotuy.com/ をBootstrap v4にアップデートしたので、面倒くさかった点を中心に述べる。移行コストの概算をするのに役立つだろう。実際にMigrationするなら公式を見るべきである。 https://getbootstrap.com/docs/4.0/migration/

v4の動向

現在のBootstrap v4はベータ版であるので、アップデートは時期尚早だと思われるかもしれない。しかしBootstrapのv3は長らくアップデートされておらず、バグ修正のPRが「v4では直っている」という理由でRejectされているという噂も聞く。

この点に関してはどう考えてもBootstrapのサポートは雑で、この機会に別のものに移行しても良いかもしれない。ただ、今後も付き合うという判断を下すのであれば早めの対応が必要となるだろう。

Gridまわりのアップデート

Gridの仕様が大幅に変更された。基本的な設計思想が変更されている印象である。このためGridを積極的に活用・濫用したWebページは影響が大きいと思われる。

offsetの廃止

個人的に最も影響が大きい非互換だと考えている。右詰めするために使われていたoffsetは親要素で右寄せを行うように .justify-content-end を付ければ良いが、左右位置を固定するためのoffsetは代替手段が少ない。デザインの変更を迫られたページも割とあった。

.form-horizontalの廃止

非常に多用していたので作業量が多かった。各 .form-group 毎に .row を設定することで代替できる。柔軟になったのでメリットと言えなくはないが、offsetの廃止とかみあって作業量はとても多い。

.control-labelの廃止

不要になったと思われる。Gridを使ってる場合は .col-form-label を置く。

.dl-horizontalの廃止

.rowによって代替せよという話ではあるが、dlは雑に使うことが多いのであんまりうれしくはない。

.col-xs-* -> .col-*

.col-xs-* 指定は事実上全ての場合でGrid分割することになるので、xsを外すという判断は分かるが、そんなことのために非互換突っ込んでくるな、というのが正直な気持ちとしてはある。

glyphiconの廃止

マメに使っている人は壊滅的な変更かもしれない。似たようなものは別であるので、公式でサポートせずサードパーティー使えということである。

私はopen-ionicで置き換えたが、同じアイコンが無かったり名前が変わったりして地味に面倒くさかった。私がやった方法では、open-ionicのbootstrap互換版のcssを読み込んでclassを.oi.oi-checkとかに変えれば良い。

純粋にアップデートしたいだけならもっと互換性の高いライブラリがあるかもしれないが、移行してしまった方が自由度は高まりそうである。

Panelの廃止

Panelが廃止された。代替としてはCardがあるが、Cardは想定されている用途がPanelより幅広いので修正量は多くなる。

Paginationの変更

子要素liと子要素aにclass指定が必要になった。真面目にカプセル化して展開できるようにしておかなかった場合は、数が多いだけに馬鹿みたいに手間が掛かる。

Navbar/Tabの変更

子要素liと子要素aにclass指定が必要になった他にも、全体的にclass指定が変わっている。面倒くさいが数は少ないと思われる。

ModalのCloseボタンの位置修正

ModalにCloseボタン(x)を付けている人は多いと思うが、今までサンプルでは最初にcloseボタンを置いていたが、headerの最後に書かないと適切な位置に来てくれないようになった。

labelsの変更

badgeに統合された。分かれば簡単。

名前変更

• .table-condensed -> table-sm