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

ブラウザのサポート

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/

0 Shares:
Share 0
Tweet 0