Bootstrap
Bootstrap5 alphaがついに正式リリース！何が変わった？
2020年07月03日 8:00
おはようございます！社員Aです。
待望のBootstrap5 alphaが2020年6月16日に正式にリリースされました。
今回は新機能や、従来のBootstrapとの違いについてまとめていきたいと思います。
もくじ
Bootstrap4基本の使い方シリーズ
Bootstrap4基本の使い方【入門編】 Bootstrap4基本の使い方【ボタン編】 Bootstrap4基本の使い方【アラート編】 Bootstrap4基本の使い方【文字の装飾編】 Bootstrap4基本の使い方【表示・非表示編】 Bootstrap4基本の使い方【バッジ編】 Bootstrap4基本の使い方【ページ送り編】 Bootstrap4基本の使い方【パンくずリスト編】 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では、完全にカスタム化されています。
強化されたグリッドシステム
グリッドで変更された内容は下記の通りです。
- 新しいグリッド階層が追加されました
- フォームレイアウトオプションは、新しいグリッドシステムに置き換えられました。
- 垂直間隔クラスが追加されました。
- 列は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です。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
