CSSフレームワークのBootstrap5が正式リリースされました。jQueryが不要となり、古いブラウザが動作対象外となりました。新しいコンポーネントが追加されたほか、細かく改良されています。

One more time, we're gonna celebrate—Bootstrap 5 has officially arrived! New accordion and offcanvas components, no more jQuery, no more IE, RTL support, new utilities and utilities API, new examples, new docs, and so much more! https://t.co/yWnJvosSLR pic.twitter.com/DP4l0EqkY9

— Bootstrap (@getbootstrap) May 5, 2021

ブラウザのサポート

Bootstrap5では、古いブラウザが動作対象外となりました。

• Internet Explorer10、11は対象外
• MicrosoftEdge Legacy (ChromeエンジンではないMS Edge)
• FireFox 60未満
• Safari 10未満
• iOSSafari 10未満
• Google Chrome 60未満
• Android 6未満のWebView

jQueryへの依存の削除

これまでのBootstrap4では、jQueryに依存したコンポーネントが多数含まれていました。jQueryは現代的なJavaScriptプログラミングの手法からは程遠いものです。

Bootstrap5では、Vanilla JavaScript(生のJavaScript)で書かれており、軽量化されました。

オフキャンバスコンポーネント

好きな位置でモーダルダイアログみたいな表示ができます。一覧＞編集のようなUIで使えそうです。モーダルダイアログよりも、スクロール時の使い勝手がよく、便利そう。

新しいフォーム

フォーム系のコンポーネントが改良されました。

チェックボックス、ラジオボタン、スイッチ

チェックボックス、ラジオボタン、スイッチが、異なるブラウザでも統一した外観となりました。

フローティングラベル

フローティングラベル。入力フォームの内側にラベルを表示することができ、イケてます。

マニュアルのFloating Labelsを確認して下さい。

ファイル入力

.form-fileクラスは排除されました。単に.form-controlを使いましょう。

<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>

その他

その他、多数の機能が改良されているようです。本番利用の時期を見定めながら、最新のBootstrap5を試していきましょう。

https://getbootstrap.com/