おなじみBootstrapの最新バージョン「Bootstrap5」正式版がついにリリースされたようです！前々からBeta版のリリースが行われていたためそろそろかと思っておりましたがついに・・🔥
こちらの記事では既存のバージョン「4」からの変更点をまとめてお伝えできればと思います。
また、今回ご紹介する変更点をコードを書きながら体験できないかと思い、自分の運営しているプログラミング学習レッスンプラットフォーム「Donbler」でBootstrap５変更点ハンズオンレッスンを作ってみました！無料ですのでぜひこちらも試してみて下さい👇
変更点1: IE非対応化
バージョン5からIEがサポート外となりました。またEdge Legacyなどバージョンの古いブラウザも合わせてサポート外となります。
変更点2: 脱jQuery！
Bootstrap4に含まれていたjQueryに依存したコンポーネントは今回のバージョンアップに伴い生のJSで書き直されたようです。これによりBootstrap自体の大幅な軽量化が実現されるとのこと！！
変更点3: Gutterユーティリティの登場
元々あったグリッドシステムを補足するユーティリティとして追加されたようです。並べられたコンテンツの余白を設定するために用います。
変更点4: CSSのカスタムプロパティが使用可能に
IEのサポートを終了することにより、IEで利用できないため使えなかったCSSカスタムプロパティ(CSS変数)が使用可能になります。
変更点5: SVGアイコンの追加
今まではFont Awesomeが使われがちでしたが今回のバージョンから専用のSVGアイコンが追加されます。ちなみに以下リンクからBootstrapの利用有無問わず利用可能なようです！！使いたいアイコンを選択しSVGをダウンロード、iタグコピー、svgタグコピーのいずれかの方法を選択することで使用することが出来ます。
変更点6: Floating Labelの登場
こちらは以下のページのExampleを参照いただいた方が早いかもしれません・・(雑な書き方ですみません！)
イケてるフォームがこれで実装できるようになります！
変更点7: ブレークポイントの追加
Bootstrap4までのブレークポイントは以下の4つでした。
- 576px :Small
- 768px :Medium
- 992px :Large
- 1200px :Extra large
ここにさらにExtra extra largeのブレークポイントが追加されます！Class infixはxxlです。1400px以上に対応します。
さいごに
いかがだったでしょうか？私個人的にはjQuery脱依存化、IE非対応化をはじめ、よりBootstrapが使いやすく、親しみやすくなる変更がなされたのかなと感じております。各種参考リンク・上でお貼りしたハンズオンレッスン等を使い、よりバージョン5の理解を深めていただけると幸いです！(私自身もより深く学ばないとなと思います！)