Bootstrap 4とBootstrap 5の主な変更点

当サイトをBootstrap 5に変更してみました。2021年に正式にリリースされてからかなりの年月が経ち、さすがに変更しておこうかなと言うことでテーマを修正してみました。

Bootstrap 5についての情報は多くのサイトで確認できますが、このサイトでもあらためて載せていこうと思います。今回はBootstrap 4とBootstrap 5の主な変更点ををご紹介します。

Bootstrap 4とBootstrap 5の主な変更点

1. jQueryの削除: Bootstrap 5ではjQueryが不要になりました。
2. グリッドシステムの改善: より柔軟で使いやすくなりました。
3. 新しいユーティリティAPI: スタイルカスタマイズが簡単に。
4. フォームの改善: フォーム機能が向上しました。
5. CSS & Sassの更新: 効率的なコーディングが可能に。
6. Internet Explorerのサポート終了: サポートが終了しました。
7. パフォーマンスの向上

タグや属性の変更・廃止

Bootstrap 5では、いくつかのタグや属性が変更されました。以下に主な変更点をまとめます。

1. data-toggle属性の変更: Bootstrap 5では、data-toggle属性が名前空間付きになりました。例えば、data-bs-toggleという形式になります。
2. 新しいJavaScript API: タグの使用方法が変更され、jQueryを使わない新しいJavaScript APIが導入されました。例えば、モーダルを表示するには、new bootstrap.Modal(document.getElementById('myModal')).show()のようになります。
3. 左右の配置に関するクラス名を変更:Bootstrap 5では、左右の配置に関するクラス名が変更されました。例えば、.text-left → .text-start .text-right → .text-endとleft、rightとしていたクラス名がsrart、endへと変更されました。

関連投稿:

オリジナルサイト作成お得プラン Bootstrap5 alpha版がリリースされました 【初心者の方向け】 Bootstrap4の使い方 グリッドシステムを理解しよう サイト公開しました