Bootstrap3からBootstrap4に移行する
問題
Bootstrap3のシステムがあるのですが、Bootstrap4へはすんなり移行できますか？
答え
あるシステムでBootstrap3から4に移行したときのメモ。
変更点は多いのでやや面倒。
Bootstrapの全機能を使っているわけではないので、完全な移行ガイドではないです。
font-sizeが違う
bootstrap3はベースのfont-sizeが14px。
bootstrap4はベースとなるfont-sizeの指定がなく、ブラウザのデフォルトらしい16px。
bootstrap4 では、他の要素の大きさはrem指定なので、html要素のfont-sizeを14pxにすると、全体的な各要素の大きさがbootstrap3に近づく。
html {font-size:14px;}
font-awesome 導入
glyphiconがなくなっているので、fontawesomeを入れる。
HTML内で、class=”glyphicon glyphicon-***” を指定していた個所は、class=”fas fa-***” などに置換すると、同じアイコンが表示されることが多い。
例）class="glyphicon glyphicon-home" → class="fas fa-home"
.btn-default がない（白いボタンがない）
bootstrap3にはある .btn-default は、bootstrap4では .btn-light などに置き換える。
.btn-xs がない（小さいボタンがない）
.btn-xs が bootstrap3にはある。bootstrap4にはない。必要なら自分で定義する。
例）
.btn-xs {
padding: .10rem .2rem;
font-size: .9rem;
line-height: 1.2;
border-radius: .2rem;
}
hタグにmargin-topがない
bootstrap4のh1、h2、h3… の上のマージン margin-top が0pxなので、ところどころ配置が詰まる部分がある。調整する。
tabsが変わった
中の li や a に classが必要になったり、active をつける要素が変わっている。
以下のように書いていたら、
<ul class="nav nav-tabs">
<li><a href="#">AAA</a></li>
<li class="active"><a href="#">BBB</a></li>
</ul>
以下のように変更。
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#" class="nav-link">AAA</a></li>
<li class="nav-item"><a href="#" class="nav-link active">BBB</a></li>
</ul>
.panel がない
panelは廃止され、cardになった。
以下のように書いていたら、
<div class="panel panel-default">
<div class="panel-heading">
～～
</div>
<div class="panel-body">
～～
</div>
</div>
以下のように変更。
<div class="card">
<div class="card-header">
～～
</div>
<div class="card-body">
～～
</div>
</div>
.card には margin-bottom がないみたいなので、class=”card mb-3″ のようにすると、.panel と同じように隙間が空いてくれる。
class=”form-inline” が変わった
Bootstrap3では、.form-control のwidthがautoになるので便利に利用していたのだが、Bootstrap4では display:flex が適用されるようになったので、表示が変わってしまった。
使い方によるが、以下のようにすると今までと似た感じになるかも。
class="form-inline"
↓
class="form-inline flex-column align-items-start"
modalの大きさが違う
デフォルトがやや小さくなってしまったので、
class="modal-dialog"
↓
class="modal-dialog modal-lg"
などして対応しました。
modalのタイトルと閉じるボタンもHTMLの順序を逆にしないといけなかった。
input-groupがちょっと変わった
書き方が変わったので、表示が崩れました。
https://getbootstrap.com/docs/4.3/components/input-group/
.dropdown-menuもちょっと変わった
子要素に class=”dropdown-item” が必要になった。
単純な置き換えで済んだもの
.pull-left → .float-left
.pull-right → .float-right
.table-condensed → .table-sm
—-
だらだらとメモしていったらまとまりがなくなってきましたが、表示を見ながらHTMLを地道に置換、書き換えをしていったら何とかなりました。
Bootstrap2からBootstrap3に移行した時よりは時間がかかった気がします。
コメント