当サイトをBootstrap 5に変更してみました。2021年に正式にリリースされてからかなりの年月が経ち、さすがに変更しておこうかなと言うことでテーマを修正してみました。
Bootstrap 5についての情報は多くのサイトで確認できますが、このサイトでもあらためて載せていこうと思います。今回はBootstrap 4とBootstrap 5の主な変更点ををご紹介します。
Bootstrap 4とBootstrap 5の主な変更点
- jQueryの削除: Bootstrap 5ではjQueryが不要になりました。
- グリッドシステムの改善: より柔軟で使いやすくなりました。
- 新しいユーティリティAPI: スタイルカスタマイズが簡単に。
- フォームの改善: フォーム機能が向上しました。
- CSS & Sassの更新: 効率的なコーディングが可能に。
- Internet Explorerのサポート終了: サポートが終了しました。
- パフォーマンスの向上
タグや属性の変更・廃止
Bootstrap 5では、いくつかのタグや属性が変更されました。以下に主な変更点をまとめます。
- data-toggle属性の変更: Bootstrap 5では、
data-toggle属性が名前空間付きになりました。例えば、data-bs-toggleという形式になります。 - 新しいJavaScript API: タグの使用方法が変更され、jQueryを使わない新しいJavaScript APIが導入されました。例えば、モーダルを表示するには、
new bootstrap.Modal(document.getElementById('myModal')).show()のようになります。 - 左右の配置に関するクラス名を変更:Bootstrap 5では、左右の配置に関するクラス名が変更されました。例えば、
.text-left → .text-start.text-right → .text-endとleft、rightとしていたクラス名がsrart、endへと変更されました。
