bootstrap 4 betaへの移行

bootstrap 4がbetaになったのでそれにシステムを移行させようと思います. 私の個人サイトは既に雑に移行させましたが, 今書いているシステムはそこそこbootstrapのデフォルトを弄っていることと, 個人サイトと違って壊さないように真面目にやらなければいけないので, まずはリリースノートの内容を把握しようと思います.

というわけでRelease v4.0.0-beta · twbs/bootstrapの内容を翻訳してみようと思いましたが, Google翻訳に突っ込んでみたら殆ど意味の通る文章が出てきてくれたので, 私が英語を読む必要はありませんでした. しかし, 結構な破壊的変更があるのにそれについて｢変更しました｣ぐらいの情報しか無いので, 変更を追いかけるのに苦労しますね. まあ, alpha段階からbootstrap 4を突っ込んだ私の責任なのですが. bootstrap 3から4に移行するよりは多分楽だと思うので, 新規プロジェクトにboostrap 4を使った判断は間違ってないとは思います.

bootstrap 4がtetherからpopperに移行したので(明確には書いてない気がする…)popperを見てみたのですが, 早くもこのライブラリはes module版を提供しているんですね, 驚きました.

変数の構造が変わった(特にカラー変数)のと, navbarの変更があって, 相当影響のある変更ですね. ベータのリリースなので最後に破壊的変更を突っ込んできた感じ.

なんかwebpack向けのガイドがありましたがWebpack · Bootstrap現在のExtractTextPluginを使う方法に比べて特にメリットが感じられなかったのでそのままになりそうです.

元々.navbarと.navbar-navを組み合わせて書いていたのですが新しいドキュメントを見てなんでそんなことをしているのかわからなくなったのでデフォルトの方法を使うことにしました. 多分昔のバージョンでは.navbar-navを使っていたほうが都合が良かったのではないでしょうか. なんかリリースノートでnavbarをモバイルファーストにしたとか書いてますし. と思ったら現在のバージョンはデフォルトで.navbar-navを使うようになっていたのか… もはや当時の判断の記憶が定かではないが結果としてあまり変更せずに済みました.

適当に作業していたら作業のブッキングが発生していました. ちゃんとAssignmentを確認していれば良かったんですが, 丁度見えないところでアサインを押してしまっていました…

.hidden系のクラスが全削除されたのが結構面倒な感じになっていました.

Removed from v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down