Bootstrap4製のマテリアルデザインのダッシュボード

WEB制作
Bootstrap4製のマテリアルデザインのダッシュボード

Material Dashboardは、MITライセンスのBootstrap4製マテリアルデザインのダッシュボード用フレームワークです。

Demo

サイドメニューやカードデザインが主な機能ですが、一覧画面や詳細画面なども作成可能です。
もちろん、Bootstrapベースなので、Bootstrapを使った構築も可能です。

管理画面などにおしゃれなサイドメニューを使えるだけで激アドだと思いました。

目次

使い方

公式ページからZIPファイルをDLし、 assetsファイル一式と添付ファイルを使用すれば、使用することができます。

Starter template

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
 
    <!-- Material Dashboard CSS -->
    <link rel="stylesheet" href="/assets/css/material-dashboard.css">
 
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!--   Core JS Files   -->
    <script src="assets/js/core/jquery.min.js"></script>
    <script src="assets/js/core/popper.min.js"></script>
    <script src="assets/js/bootstrap-material-design.js"></script>
 
    <!--  Notifications Plugin, full documentation here: http://bootstrap-notify.remabledesigns.com/    -->
    <script src="assets/js/plugins/bootstrap-notify.js"></script>
 
    <!--  Charts Plugin, full documentation here: https://gionkunz.github.io/chartist-js/ -->
    <script src="assets/js/core/chartist.min.js"></script>
 
    <!-- Plugin for Scrollbar documentation here: https://github.com/utatti/perfect-scrollbar -->
    <script src="assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
 
    <!-- Demo init -->
    <script src="assets/js/plugins/demo.js"></script>
 
    <!-- Material Dashboard Core initialisations of plugins and Bootstrap Material Design Library -->
    <script src="assets/js/material-dashboard.js?v=2.1.0"></script>
  </body>
</html>

公式ドキュメントで紹介されていない機能

Material Dashboardには、Pro版も存在します。 Pro版でしか紹介されていないBootstrap Switch v3.3.2や Bootstrap Notify v3.1.5など の一部の機能もFree版で仕様が出来たりするので、一度Pro版のドキュメントも確認した方が良いと思われます。