Bootstrap 5 alphaがついにリリース!注目すべき新機能、jQueryは削除、IEすべてのバージョンのサポート終了

先日の記事で春後半の夏前にリリースされるとお伝えした通り、Bootstrap 5のalpha版がついにリリースされました!

IEすべてのバージョンのサポート終了、jQueryの削除をはじめ、注目すべき新機能を紹介します。

Bootstrap 5 alpha版がついに登場

Bootstrap v5

Bootstrap v5の特徴

最も注目すべき点は、jQueryへの依存がなくなり、Internet Explorerのサポートも終了したことです。ちなみに、Bootstrap 4.5ではIE10/11をサポートしています(v4.5 Supported browsers)。より高速なJavaScript、より少ない依存関係となり、よりフレンドリーなツールを構築することに重点が置かれています。
また、現時点ではアルファ版であることも重要で、引き続きアップデートが続く予定です。

サイトのキャプチャ

Introduction

  • jQueryの削除
  • IEのサポート終了
    参考: Bootstrap 5ではIE11のサポート終了も判明
  • SVGのカスタムアイコン
  • JekyllからHugoへ切り替え
    ※静的サイトジェネレーターにHugoを採用
  • メジャーJavaScriptのアップデート
  • マイナーCSSおよびclassのアップデートと修正
  • ユーティリティ用の新しいAPI

  • CSSのカスタムプロパティ
    ※IEのサポートが終了したため
  • フォームを全面的にアップデート
    ※フォームのドキュメントとコンポーネントを一新

Bootstrap 5でIEのブラウザサポートは終了しますが、IE11で動作させる方法はドキュメントが用意されています。
参考: Bootstrap 5をIE 11に対応させる方法

今後の予定では、CSSの論理プロパティを使用してRTLをサポート、スマホ向けのオフキャンバスメニューなどがあります。

ロゴのデザインも変わりました。
v4.5までの角丸の正方形にBのロゴからアップグレードされ、中括弧で囲まれたCSSにインスパイアされたデザインです。

Bootstrap v5の新しいロゴ

Bootstrap v5の新しいロゴ

Bootstrap 5では、Mark Ottoによって作成されたSVGの新しいアイコンライブラリが提供されます。すでに、673種類のアイコンが揃っており、MITライセンスで利用できます。

サイトのキャプチャ

Bootstrap Icons
Bootstrap Icons -GitHub

Bootstrap v5のダウンロード・インストール

Bootstrapをダウンロードして、コンパイル済みのCSSとJavaScript、ソースコードを入手できます。

サイトのキャプチャ

Download -Bootstrap v5

CSSとJavaScriptは、CDNで利用できます。

Bootstrapのソースファイルは、パッケージマネージャー経由でも入手できます。

サイトのキャプチャ

Package Managers -Bootstrap v5

Bootstrap v5のグリッドやコンポーネント

Bootstrapでは、グリッドやレイアウトをはじめ、さまざまなカスタムコンポーネントがすぐに利用できます。

サイトのキャプチャ

Custom Components -Bootstrap v5

サイトのキャプチャ

Framework, Navbar -Bootstrap v5

Bootstrap v5のグリッドの変更点は、下記の通りです。

  • 新しいグリッド階層(xxl)が追加されました
  • .gutterクラスはmargin/paddingのユーティリティと同様に、.g*ユーティリティに置き換えられました。
  • フォームレイアウトのオプションは、新しいグリッドシステムに置き換えられました。
  • 垂直方向のスペースのクラスが追加されました。
  • 列はデフォルトでposition: relative;ではなくなりました。

グリッドの新しい使用方法は下記のようになります。

sponsors

top of page

©2020 coliss