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

Bootstrap 5 alphaがついにリリースされましたね。
この新しいBootstrap 5では、jQueryが削除され、IEのサポートも終了し、実装の手順も少し変わりました。

Bootstrap 5で管理画面のダッシュボードを実装するチュートリアルを紹介します。

新しくなったBootstrap 5での実装方法をやさしく解説

Tutorial: how to build a simple admin dashboard interface using Bootstrap 5
by @zolidev

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

はじめに

2020年6月にBootstrap 5 alphaがリリースされ、いろいろ変更点がありますが、中でも大きなニュースが2つありました。

  • jQueryが依存関係として削除されたこと
  • IE10/11のサポートが終了されたこと

私はこの新しいバージョンのBootstrapをいじってみましたが、Utility APIやバニラJavaScriptとの連携など他にも魅力的な機能があり、ワクワクしています。

Bootstrap 5で実装した管理画面のデモページ

Bootstrap 5で実装した管理画面のデモページ

このチュートリアルでは、新しいBootstrap 5を使用してシンプルな管理画面のインターフェイスを実装する方法を紹介したいと思います。構築する前にどんなインターフェイスができるかチェックしたい場合は、デモページをご覧ください。

チュートリアルでは、下記のセクションを実装します。

  • ユーザー設定を含むナビゲーションバー
  • ナビゲーションアイテムを含むサイドバー
  • 現在のページのタイトル、キャッチ、パンくずを含むセクション
  • ウィジェットカードを含むメインコンテンツ
  • 最後にフッタ

Bootstrap 5の準備

管理画の実装を始める前に、Bootstrap 5の準備をする必要があります。ここでは簡単にするために、CDNを使用して依存関係のすべてを取得します。

まずは、基本的なマークアップをしたindex.htmlファイルを作成します。

次にスタイルシートを<head>タグ内にコピーして貼り付けます。

</body>タグの直前に、スクリプトもコピーして貼り付けます。

簡単ですね!
これであなたのプロジェクトでBootstrap 5が利用できるようになり、管理画面のインターフェイスの実装を始めることができます。

ユーザー設定を含むナビゲーションバーの実装

このセクションには3つの主要な部分があります。

  • ロゴ
  • 検索バー
  • ユーザー設定
ナビゲーションバー

ナビゲーションバー

まず、<body>タグの直後に<nav>アイテムを作成する必要があります。マークアップは、下記の通りです。

このコードは、ビューポートの幅全体におよぶナビゲーションバーを作成します。ナビゲーションバーには、ロゴ・検索バー・ユーザー設定、ハンバーガーアイコンが含まれています。

ナビゲーションアイテムを含むサイドバーの実装

サイドバーにメインのナビゲーション部分が追加され、スマホ端末ではハンバーガーメニューで切り替えが可能になります。ただし、サイドバーを作成する前に、メインコンテンツのレイアウトを流体コンテナで実装する必要があります。

サイドバー

サイドバー

ダッシュボードのレイアウトを定義するために、ナビゲーションの後に以下のマークアップを追加します。

これでレスポンシブに対応した流体コンテナを実装できたので、サイドバーの構築を始めることができます。<nav>タグ内に以下のマークアップを追加します。

カスタムスタイルシートを作成するか、Bootstrapのスタイルシートの後に<style>タグを追加して、サイドバーのスタイルを追加します。

これらのスタイルは、下にスクロールしたときにサイドバーが固定され、ビューポートの高さ全体を占めるようにします。また、アクティブなナビゲーションアイムをより目立つ色で表示します。

これで、管理画面のメインセクション(ナビゲーションバー、サイドバー、メインコンテンツ)の準備が整いました。メインコンテンツのエリアにウィジェットを追加してみましょう。

タイトル、キャッチ、パンくずを含むセクションの実装

管理画面の各ページには、タイトル、キャッチ、ページの場所を示すパンくずが必要です。

コンテンツの上部

コンテンツの上部

<main>タグの先頭に以下のマークアップを追加するだけです。

簡単ですよね?
これで管理画面のページ間を移動するときに、ユーザーは自分がどこにいるのか簡単に理解できます。

いくつかのカードを含むメインコンテンツ

ここからはプロジェクト次第で、ユーザーに何を表示するかによります。チャート・統計・TODOリスト・リマインダーなどです。管理画面のダッシュボードには、ウィジェットと呼ばれるビルディングブロックを使用して、さまざまな情報を整理できます。

コンテンツ

コンテンツ

まずは、それらの要素を作成することから始めましょう。

タイトルの下のこのカードを4つ作成します。

最新の購入を表示するテーブルを持つ別のウィジェットを作成してみましょう。

これで、ユーザーやトランザクションなどを追加できるテーブル付きのウィジェットもできました。

このチュートリアルで作成する最後のウィジェットは、チャートです。Chartistはオープンソースで利用でき、レスポンシブ対応の軽量スクリプトなので、私はとても気に入っています。

Chartistを使用するには、<head>タグに次のスタイルシートを含めます。

あとは、</body>タグの直前にスクリプトをインクルードするだけです。

これでChartistを使用できるようになったので、<div class="col-12 col-lg-4">要素内に下記のマークアップを追加します。

最後に、JavaScriptファイルまたはスクリプトタグを作成して初期化します。

これで3種類のウィジェットが完成しました!
これらを使用して、さまざまなタイプのデータを表示することができます。

フッタの実装

フッタは、プライバシーポリシー、規約、お問い合わせなど、あまり使用されないページへの参照を表示するのに適しています。

フッタ

フッタ

<main>タグの終わりの前に以下のマークアップを追加します。

これで、Bootstrap 5を使用したシンプルな管理画面のダッシュボードインターフェイスの実装が完了しました!

このチュートリアルファイルはGitHubから利用できるので、リポジトリのクローンを作成し、スターを付けてオープンソースの愛を広めてください❤

Volt -Bootstrap 5用のオープンソースの管理画面

最後にわたし達が取り組んできたプロジェクトを紹介させてください。
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