Bootstrap 4 -> 5 への移行ポイント
はじめに
先日、Bootstrap 4 -> 5 への移行作業を行いました。
4 <-> 5 の変更点はこちらに書かれていますが、全て目を通すのは大変なので、先日の移行作業時に気になったポイントを今回はピックアップしたいと思います。
btn-block
・Bootstrap4の場合
Bootstrap4では、btn-block はボタンを２つ以上設置した際にボタン同士の間隔を調整するのに使用します。
下記は横一杯の2行のボタンです。
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
参考: Bootstrap4 Buttons
・Bootstrap5の場合
Bootstrap5ではButtonにこのよう機能は無くなり、下記のように調整することとなりました。
上記と同じボタンを実現する場合は以下のようにする
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
また、下記のようにすることでボタン同士の間隔を空けつつ、ボタンを同じブロックとして一列に並べることが可能です。
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
また、Columnsとmx-autoを使うと一定の長さで中央寄せにすることも可能です。
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
また、flex utilities, margin utilities を使えばdislplay: blockを使わなくても一列、右寄せなどが可能です。
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>font-weight-bold
・Bootstrap4の場合font-weight-*で太さやテキストを調整できました。
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>
参考: Bootstrap4 Text
・Bootstrap5の場合font-weightの部分をfwに変更する必要があります。
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
参考: Bootstrap5 Text
data-target
・Bootstrap4の場合
下記はスマホ表示時などのNavbarのメニューを開閉するためのボタンです。
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
・Bootstrap5の場合collapseを設定していたデータ属性がdata-toggleからdata-bs-toggleに変わったようです。
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
参考: Bootstrap5 migration Javascript
ml-auto, mr-auto
・.ml-* と .mr-* の名前を .ms-* と .me-* に変更しました。
・left, right ではなく、 start, end に変わったようです。
参考: Bootstrap5 migration ユーティリティ
custom-select
・Bootstrap4の場合
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
・Bootstrap5の場合
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
・custom-selectではなくform-selectを指定する必要があります。
form-group
・Bootstrap4の場合
下記のようにform-groupでフォーム同士の間隔を調整していました。
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
・Bootstrap5の場合
grid と utilities を使うと以下のように書き換えることもできます。
<div class="container">
<form>
<div class="row">
<div class="col-12 mb-2">
<label for="formGroupExampleInput">Example label</label>
</div>
<div class="col-12 mb-2">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>
<div class="row">
<div class="col-12 mb-2">
<label for="formGroupExampleInput2">Another label</label>
</div>
<div class="col-12 mb-2">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</div>
</form>
</div>
参考: Bootstrap5 migration forms
input-group-append
・Bootstrap4の場合
inputフィールドのアドオンとしてinput-group-appendクラスがありましたがBootstrap5では廃止になりました。
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
参考: Bootstrap4 input-group
・Bootstrap5の場合
下記のようにinput-group-textを使用する必要があります。
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>