Bootstrap 5 Alpha 2の注目しておきたい新機能、ダークテーマのコンポーネント・新しいユーティリティclassなど

先日リリースされたBootstrap 5 Alpha 2の新機能を紹介します。
新しく導入されたダークテーマのコンポーネント、ドキュメントナビゲーションの再設計、新しいユーティリティclass、今までとは異なるボタンなど、解説します。

Bootstrap 5 Alpha 2の注目しておきたい新機能

Bootstrap 5 Alpha 2 changes
by @zolidev

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Bootstrap 5 Alpha 2がリリース

9/29にBootstrap 5 Alpha 2がリリース(公式ブログ)され、ダークコンポーネント、ドキュメントナビゲーション、再設計されたクローズボタン、positionのユーティリティclass、およびスタイルに関するいくつかのマイナーアップデートが導入されました。

Bootstrap 5 Alpha 2がリリース

Bootstrap 5 alphaは2020年6月にリリースされ、依存関係としてのjQueryを削除、IE10とIE11のサポート終了、ユーティリティAPIの導入、JavaScriptとCSSとHTMLのマークアップに関する多くの変更など、大きな変更がおこなわれました。

この記事では、Bootstrap 5 Alpha 2のアップデートを解説します。

Bootstrap 5 Alpha 2で導入されたダークコンポーネント

これは驚くべきことではないでしょう。世界で最も人気が高いCSSフレームワークでついにダークコンポーネントが追加されたのは、歓迎すべきアップデートです。現時点で、ダークテーマで追加されたコンポーネントは、ダークカルーセルとダークドロップダウンの2つです。

ダークテーマのカルーセル

カルーセルコンポーネントのダークテーマへの切り替えは、.carousel-darkのclassを.carousel要素に追加するだけで簡単に実装できます。この値はSass変数を更新することで変更できます。

カルーセルコンポーネント

カルーセルコンポーネント

ダークテーマのカルーセルを実装するHTMLは、下記の通りです。

ダークテーマのドロップダウン

ドロップダウンコンポーネントのダークテーマへの切り替えは、.dropdown-menu-darkのclassを.dropdown-menu要素に追加するだけで簡単に実装できます。この値はSass変数を更新することで変更できます。

ドロップダウンのコンポーネント

ドロップダウンのコンポーネント

ダークテーマのドロップダウンを実装するHTMLは、下記の通りです。

ドキュメントナビゲーションの再設計

Bootstrapの開発チームは、オンラインドキュメントのナビゲーションを再設計し、その外観をシンプルにしました。これは、より小さなデバイスで簡単に使用でき、概要が分かりやすくなっています。

ドキュメントナビゲーション

ドキュメントナビゲーション

Bootstrap 5 Alpha 2で新しくなったクローズボタン

Bootstrap 5 Alpha 2では、クローズボタンが大きく変わりました。デザインは新しくなり、名前が変わり、新しいフォーカス状態が追加され、新しいカラーのオプションも追加されています。classは、.closeから.btn-closeに変更され、×メソッドではなく、CSSソリューションを介したSVGベースの背景画像を使用するようになりました。

クローズボタン

クローズボタン

positionの新しいユーティリティclass

私はBootstrapのプロジェクトで新しいインスタンスを作成するたびに最初に行っていたのは、特定の要素を絶対配置するためにpositionのclassを作成することでした。しかし、Bootstrap 5 Alpha 2ではデフォルトの機能になり、デベロッパーの時間と労力を確実に節約できることは素晴らしいことです。

絶対配置のclass

絶対配置のclassがデフォルトに

.top-*, .right-*, .bottom-*, .left-*の新しいclassは、要素を絶対配置にします。*には、0から100の数字が入ります。詳しくは、公式ドキュメントをご覧ください。

Bootstrap 5 Alpha 3はどうなる?

公式ブログの記事によると、次のバージョンでは、RTLのサポート、ユーティリティAPIの拡張、新しいサイドモーダルのオフキャンバスのサポートです。

Bootstrap 5の使用を開始したい場合は、Bootstrap 5の最新のチュートリアルでjQueryなしの実装方法を学ぶことができます。

サイトのキャプチャ

新しくなったBootstrap 5を使用して、管理画面のUIを実装する方法を解説

最後にわたし達が取り組んできたプロジェクトを紹介させてください。
Voltと呼ばれるフリーでオープンソースのBootstrap 5用の管理画面のダッシュボードで、このチュートリアルで実装したものよりもかなり多くの機能を備えています。

デモのキャプチャ

Volt - Free Bootstrap 5 Admin Dashboard

100種類以上のBootstrap 5のコンポーネント、11のサンプルページ、3つのプラグインを備えています。SassファイルとBrowserSyncを使ってローカルサーバーを作成し、開発中のファイルの変更を監視することができるGulpコマンドシステムも含まれています。

また、有料のプロフェッショナル版もあります。

デモのキャプチャ

Volt Pro - Premium Bootstrap 5 Dashboard Template

プロ版は800種類以上のコンポーネント、20のサンプルページ、10のプラグインを備えています。無料版のプロ拡張機能と見なすことができます。

sponsors

top of page

©2020 coliss