📅 最后修改于: 2023-12-03 15:07:03.827000 🧑 作者: Mango
HTML 仪表板模板是一个非常有用的工具，它可以帮助程序员快速地创建出漂亮又实用的仪表板页面。下面我们来介绍一些免费的 HTML 仪表板模板，它们可以让你快速打造你的项目需求的仪表板。
AdminLTE 是一个非常受欢迎的 HTML 仪表板模板，它具有非常强大的特性，可以满足各种项目需求。它有很多种用于不同场景的预定义颜色主题，而且它还可以使用 Bootstrap，可以自由选择它提供的各种组件。
<!-- AdminLTE 示例代码 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>后台管理系统模板</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="adminlte.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<a href="#" class="logo">后台管理系统模板</a>
<nav class="navbar navbar-static-top" role="navigation">
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">切换侧边栏</a>
</nav>
</header>
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu">
<li class="header">导航</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="#">Dashboard v1</a></li>
<li><a href="#">Dashboard v2</a></li>
</ul>
</li>
</ul>
</section>
</aside>
<div class="content-wrapper">
<section class="content-header">
<h1>Dashboard</h1>
</section>
<section class="content">
<div class="row">
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Example Widget</h3>
</div>
<div class="box-body">
<p>Content for the widget goes here.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Another Example Widget</h3>
</div>
<div class="box-body">
<p>More content for the widget goes here.</p>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
版权所有 © 2019 后台管理系统模板
</footer>
</div>
<script src="adminlte.js"></script>
</body>
</html>
Gentelella 是一个基于 Bootstrap 的轻量级仪表板模板，它提供了一个干净而美观的界面，内置了像日历、数据表格、表单和图表等常用组件。此外，Gentelella 还可以轻松自定义自己的项目需求。
<!-- Gentelella 示例代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gentelella Alela!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Colorlib">
<!-- CSS styles -->
<link rel="stylesheet" href="gentelella.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="#" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
</div>
<div class="clearfix"></div>
<div class="profile clearfix">
<div class="profile_pic">
<img src="img.jpg" alt="img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>John Doe</h2>
</div>
</div>
<br />
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-edit"></i> Forms</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="img.jpg" alt="img">John Doe
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li><a href="#">Profile</a></li>
<li><a href="#"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<! -- 页面主要内容在此处 -->
<div class="right_col" role="main">
<div class="page-title">
<div class="title_left">
<h3>Dashboard</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_title">
<h2>Some Data <small>subtitle here</small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<p>Here are some data...</p>
</div>
</div>
</div>
</div>
</div>
<!-- 底部信息 -->
<footer>
<div class="pull-right">
Gentelella Alele by <a href="#">Colorlib</a>
</div>
<div class="clearfix"></div>
</footer>
</div>
</div>
<!-- Javascript files -->
<script src="jquery.js"></script>
<script src="gentelella.js"></script>
</body>
</html>
CoreUI 是一个开源的前端框架，它基于 Bootstrap 并扩展了许多组件和插件，它非常适合用于各种类型的 Web 应用程序，提供了很多定制选项，可以帮助您快速创建您的仪表板页面。
<!-- CoreUI 示例代码 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
<meta name="author" content="Creative Tim">
<title>CoreUI Free Bootstrap 4 Admin Template</title>
<!-- CoreUI CSS -->
<link rel="stylesheet" href="coreui.css">
</head>
<body class="c-app">
<!-- 侧边栏 -->
<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
<div class="c-sidebar-brand d-lg-down-none">
CoreUI
</div>
<ul class="c-sidebar-nav ps ps--active-y">
<li class="c-sidebar-nav-title">导航</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" href="#">
<i class="c-sidebar-nav-icon cil-home"></i>
Home
</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" href="#">
<i class="c-sidebar-nav-icon cil-list"></i>
Dashboard
</a>
</li>
<li class="c-sidebar-nav-dropdown">
<a class="c-sidebar-nav-dropdown-toggle" href="#">
<i class="c-sidebar-nav-icon cil-puzzle"></i>
组件
</a>
<ul class="c-sidebar-nav-dropdown-items">
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" href="#">按钮</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" href="#">卡片</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" href="#">表格</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- 右侧内容 -->
<div class="c-wrapper c-fixed-components">
<!-- 顶部栏 -->
<header class="c-header c-header-light c-header-fixed c-header-with-subheader">
<button class="c-header-toggler c-class-toggler d-lg-none mfe-auto" type="button" data-target="#sidebar" data-class="c-sidebar-show">
<span class="c-header-toggler-icon"></span>
</button>
<a class="c-header-brand d-lg-none" href="#">
CoreUI
</a>
<button class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true">
<span class="c-header-toggler-icon"></span>
</button>
<ul class="c-header-nav d-md-down-none">
<li class="c-header-nav-item px-3">
<a class="c-header-nav-link" href="#">Dashboard</a>
</li>
<li class="c-header-nav-item px-3">
<a class="c-header-nav-link" href="#">Users</a>
</li>
<li class="c-header-nav-item px-3">
<a class="c-header-nav-link" href="#">Settings</a>
</li>
</ul>
<ul class="c-header-nav ml-auto mr-4">
<li class="c-header-nav-item dropdown">
<a class="c-header-nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<div class="c-avatar">
<img class="c-avatar-img" src="img_avatar.png" alt="John Doe">
</div>
</a>
<div class="c-dropdown-menu dropdown-menu-right pt-0">
<a class="c-dropdown-item" href="#">
<i class="fa fa-user-o"></i> Profile
</a>
<a class="c-dropdown-item" href="#">
<i class="fa fa-envelope-o"></i> Messages
</a>
<a class="c-dropdown-item" href="#">
<i class="fa fa-wrench"></i> Settings
</a>
<div class="dropdown-divider"></div>
<a class="c-dropdown-item" href="#">
<i class="fa fa-lock"></i> Logout
</a>
</div>
</li>
</ul>
</header>
<!-- 主要内容 -->
<div class="c-body">
<main class="c-main">
<div class="container-fluid">
<div class="fade-in">
<div class="row">
<div class="col-sm-6 col-lg-3">
<div class="card text-white bg-primary">
<div class="card-body pb-0">
<div class="btn-group float-right">
<button class="btn btn-transparent dropdown-toggle p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-settings"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</div>
<div class="chart-wrapper mt-3 mx-3" style="height:70px;">
<canvas class="chart" id="card-chart1" height="70"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- 底部信息 -->
<footer class="c-footer">
<div>版权所有 © 2019 CoreUI</div>
<div class="ml-auto">由<a href="#">ubisys</a>支持</div>
</footer>
</div>
<!-- CoreUI js -->
<script src="coreui.js"></script>
</body>
</html>
总结：
以上介绍了三种非常好用的 HTML 仪表板模板，包括 AdminLTE、Gentelella 和 CoreUI。这些模板均支持 Bootstrap，可以让开发人员快速地打造出漂亮而实用的仪表板页面，支持定制化与分享，使得程序员们不需要从头去写布局与界面设计等麻烦操作，从而省去了不少的时间和成本。