SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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に移行した時よりは時間がかかった気がします。

関連するメモ

コメント