Bootstrap5 alphaがついに正式リリース!何が変わった?

         

Bootstrap

Bootstrap5 alphaがついに正式リリース!何が変わった?

2020年07月03日 8:00 

Bootstrap5 alphaがついに正式リリース!何が変わった?

おはようございます!社員Aです。

待望のBootstrap5 alphaが2020年6月16日に正式にリリースされました。

今回は新機能や、従来のBootstrapとの違いについてまとめていきたいと思います。

 



 

Bootstrap4基本の使い方シリーズ

 

Bootstrap5の特徴

 

Internet Explorerのサポートを終了

Bootstrap5では、正式にInternet Explorerのサポートが終了しました。

その影響により、CSSカスタムプロパティの採用やjQueryの削除など機能が大幅に改善しました。

 

 

jQueryの削除

Bootstrap5では、jQueryが削除されました。

これにより、Buttonプラグインの大部分を削除されました。

現在、トグルボタンはチェックボックスとラジオボタンを使用しており、ユーザビリティーが大幅に向上しています。

 

 



CSSカスタムプロパティ

IEのサポートが終了したことにより、CSSカスタムプロパティの使用を開始しました。

v4では、色とフォント用のルート変数をいくつか含めただけでしたが、コンポーネントとレイアウトオプション用を追加しました。

将来的には、ボタンなどのコンポーネントでの使用が増えると予想されます。

 

 

ドキュメントの改善

v5のカスタマイズドキュメントがv4のテーマページに公開され、BootstrapのソースSassファイルの上に構築するためのコンテンツとコードスニペットが追加されています。

また、GitHubのテンプレートリポジトリとしても利用できるので、フォークして自由に移動できます。

v5でもカラーパレットが拡張されています。

豊富なカラーシステムが組み込まれているため、コードベースを離れることなく、外観を簡単にカスタマイズできます。

 

 

フォームの刷新

v4では、チェック、ラジオ、スイッチ、ファイルなどのカスタムフォームコントロールを導入しましたが、これらは各ブラウザーが提供するデフォルトに追加されました。

v5では、完全にカスタム化されています。

 

 



強化されたグリッドシステム

グリッドで変更された内容は下記の通りです。

  1. 新しいグリッド階層が追加されました
  2. フォームレイアウトオプションは、新しいグリッドシステムに置き換えられました。
  3. 垂直間隔クラスが追加されました。
  4. 列はposition: relativeがデフォルトではなくなりました。

新しいグリッドは下記のように定義します。

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

 

 

Bootstrap5をダウンロード

Bootstrap5は下記からダウンロードできます。

 

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺