ニュース

Bootstrap5の新機能と変更点

Posted on by iconext writer
23
9月

（備考：本記事は、Bootstrap 5のバージョンがv5.1.0である2021年9月5日に書かれました。）

WEB開発では、現在バージョン5まで継続的に開発されてきた人気のフロントエンドフレームワークである「Bootstrap」を知らない開発者はほとんどいません。Bootstrap5の正式版は2021年5月5日にリリースされました。（アルファ版は2020年6月16日にリリースされました。）

では、Bootstrap５の新機能と、Bootstrap４との違いを見てみましょう。

1. 新しいロゴ

Bootstrap５には、再設計されたロゴや様々な新しいアイコンが提供されています。詳細は https://icons.getbootstrap.com/をご参照ください。

2. 新しいオフキャンバス（offcanvas）コンポーネント

オフキャンバスはBootstrap5の新しいコンポーネントであり、JavaScriptを経由して表示／非表示を切り替えることができます。以下はオフキャンバスのイメージです。詳細は https://getbootstrap.com/docs/5.1/components/offcanvas/をご参照ください。

3. 新しいプレースホルダ（placeholder）クラス

これは、WEBアプリケーションの体感を向上させるために使用されるクラスです。主な目的は、WEBの特定の部分がデータをダウンロードしていることを使用者に示すことです。

4. アコーディオン（accordion）コンポーネントの変更

新しいアコーディオンはカスタムHTMLとCSSを使用して、以前より使いやすくなりました。

5. 追加及び更新されたフォーム（form）コンポーネント

  • チェックボックス、ラジオ、選択、ファイルなどのフォームの基本コンポーネントが簡素化されました。全てのウェブブラウザで同じ結果を表示できるようになっています。
  • フローティングラベル（Floating labels）は、新しいコンポーネントであり、多くの開発者が長い間待っていた結果、Bootstrapの開発チームがこのバージョンでやっと提供しました。
  • ファイル選択（File input）コンポーネントは、バージョン４のように追加のクラスを指定しなくても、使いやすいようにカスタマイズされました。
  • ウェブレイアウトは以前よりもはるかに作成しやすくなりました。一部のクラスが削除された一方、多くのクラスが改善されました。運用も見栄えも良くなり、コードの複雑さが抑えられました。詳細はhttps://getbootstrap.com/docs/5.1/forms/layout/をご参照ください。

6. 右から左へのWEBサポートの追加（RTL）

世界の多くの言語は右から左に書かれているため、Bootstrapの開発チームは右から左へのウェブ設計を追加し、開発者が自分でコーディングする必要がなくなりました。

7. ユーティリティの見直し

Bootstrap５では、開発者は新しいユーティリティを追加し、今までのユーティリティを改善しました。

8. ブラウザのサポート

新機能や更新された機能を使用するために、Bootstrap5は下記の古いブラウザのサポートを削除しました。

  • Microsoft Edge Legacy
  • Internet Explorer 10、11
  • Firefox 60以下
  • Safari 10以下
  • iOS Safari 10以下
  • Chrome 60以下
  • Android 6以下

9. JavaScript

Bootstrap 5の大きな変更点の1つは、jQueryとの依存関係が削除されたことです。そのため、全てのコンポーネントは、react.js、vue.jsなどの他の一般的なフロントエンドフレームワークで簡単に使用できます。また、jQueryを使用したい人は、引き続きBootstrap5のコンポーネントをjQueryで使用可能です。

上記以外、Bootstrap5にはその他様々な改善点があります。詳細については、Bootstrap5の公式ウェブサイトをご覧ください。https://getbootstrap.com/docs/5.1/getting-started/introduction/

参照元