HTML后台

modern-javascript-dashboard — HTML 后台模板

作者 simplenotsimpler

基于 HTML 与 ES6 的可换主题 JavaScript 仪表盘示例模板，使用 Bootstrap 4 与 CSS grid 布局，内置 modern-table 表格库，默认采用色盲友好配色。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-12查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

使用现代 ES6 编写，仅面向现代浏览器，不支持 IE

02

布局基于 Bootstrap 4 与 CSS grid，兼容 Bootstrap 4.4.1 及以上

03

数据表格由 modern-table 库渲染，图表使用 Apex Charts

04

默认采用 Microsoft Power BI 色盲友好主题，支持更换主题

05

数据源为 JSON，需自行提供承载数据表格的容器

06

数字与日期格式化库未加载时会优雅退化为不格式化

模板详细介绍

这是一个示例性质的仪表盘起始模板，用现代 ES6 编写，页面布局依赖 Bootstrap 4 与 CSS grid，数据表格由 modern-table 库渲染，图表使用 Apex Charts。默认主题取自 Microsoft Power BI 的色盲友好配色，可通过主题机制替换。

模板只面向现代浏览器，明确不支持 IE，并说明与 Bootstrap 4.4.1 及以上版本兼容，实际测试过 4.4.1 与 4.5.3。README 表示理论上也可搭配其他 CSS 框架，但未做测试。数据来自 JSON 数据源，需要提供一个容器承载数据表格；若配置中指定了数字或日期格式化但对应库未加载，会退化为不做格式化。建议源数据与配置使用 ISO 8601 日期格式，再通过界面做本地化。

站点搜索被有意保留为不可用状态，因为开发者通常会接入自己的搜索工具。无障碍方面，README 自述为最低级别（Level A 左右）。项目采用 MIT 许可，免费范围限于该版本代码，演示图片、字体、图标等第三方素材需另行核对许可。

HTML后台

适合你的项目吗？

适用场景

  • 需要一个可直接查看的仪表盘界面示例作为起点
  • 想参考色盲友好配色在数据界面中的实际应用
  • 项目已使用 Bootstrap 4，希望补充表格与图表区域
  • 需要基于 JSON 数据源渲染表格并接入自有搜索工具

适合人群

  • 熟悉 HTML 与 ES6、希望自行搭建仪表盘页面的开发者
  • 使用 Bootstrap 4 技术栈并需要示例布局的前端项目
  • 需要色盲友好配色参考的数据可视化界面
  • 接受仅支持现代浏览器、不兼容 IE 的项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    从 GitHub 下载或克隆仓库后，需自行引入 Bootstrap 4.4.1 或 4.5.3、Apex Charts 与 modern-table 库

  2. 2

    准备 JSON 数据源，并在页面中提供用于承载数据表格的容器

  3. 3

    如需数字或日期格式化，建议额外引入 format-intl-number 与 Moment.js

  4. 4

    源数据与配置建议使用 ISO 8601 日期格式，再通过界面完成本地化

  5. 5

    站点搜索默认不可用，需自行接入 Elasticsearch 等搜索工具

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 模板仅面向现代浏览器，不支持旧版浏览器（如 IE）。
  • 明确不支持 Internet Explorer 浏览器。
  • 需搭配 Bootstrap 4.4.1 或更高版本使用。
  • 仅在 Bootstrap 4.4.1 与 4.5.3 上做过测试。
  • 与其他 CSS 框架的兼容性未经验证，效果不保证。
  • 站点搜索功能被有意保留为不可用，需自行接入搜索工具。
  • 无障碍支持仅为最低级别（约 Level A）。
  • 需要自行提供 JSON 数据源。
  • 需要自行提供用于承载数据表格的容器。
  • 图表功能依赖外部 Apex Charts 库。
  • 数据表格依赖外部 ModernTable 库。
  • 数字格式化需额外引入 format-intl-number 库。
  • 日期格式化需额外引入 Moment.js 库。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

* __*Only*__ targets **modern** browsers.

README 原文

IE is not supported.

README 原文

Compatible with Bootstrap 4.4.1 and higher.

README 原文

Specifically tested with Bootstrap 4.4.1 and 4.5.3.

README 原文

Theoretically, this should work with other CSS frameworks. However, this has __*NOT*__ been tested with other CSS frameworks, so your mileage may vary.

README 原文

Site search intentionally left non-functional since developers will likely want to use their own tool, e.g. Elasticsearch, etc.

README 原文

Accessibility: Minimal level (Level A ??).

README 原文

* JSON data source

README 原文

* Container to hold the datatable

README 原文

* [Apex Charts](https://github.com/apexcharts/apexcharts.js)

README 原文

* [ModernTable Library](https://github.com/simplenotsimpler/modern-table)

README 原文

* Number formatting: [format-intl-number library](https://github.com/simplenotsimpler/format-intl-number)

README 原文

* Date formatting: [Moment.js](https://momentjs.com/)

README 原文
https://github.com/simplenotsimpler/modern-javascript-dashboard/blob/main/LICENSEhttps://github.com/simplenotsimpler/modern-javascript-dashboard/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-12。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 68 / 100
技术栈
HTML
网站类型
后台
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2021-09-05
截图检查日期
2026-10-12

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-13

查看当时使用的来源资料

SHA-256: 69056ae9f2930d15ddb141d05626c5c213a73cd58965854da6a1dc1c0924487c

2026-10-12T23:23:47.816Z

来源文件 / 仓库
# Modern JavaScript Dashboard
Sample themable JavaScript dashboard starter template that employs modern ES6, Bootstrap 4 and CSS grid. Uses [modern-table](https://github.com/simplenotsimpler/modern-table) library.

Current theme: [Microsoft Power BI Color Blind Friendly](https://community.powerbi.com/t5/Themes-Gallery/Color-Blind-Friendly/td-p/140597). 

# Notes:
* __*Only*__ targets **modern** browsers. 
* To help [Microsoft phase out IE11](https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666) and in anticipation of [Bootstrap 5 dropping IE support](https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/), IE is not supported.
* Compatible with Bootstrap 4.4.1 and higher.
* Specifically tested with Bootstrap 4.4.1 and 4.5.3.
* Theoretically, this should work with other CSS frameworks. However, this has __*NOT*__ been tested with other CSS frameworks, so your mileage may vary.
* If number or date formatting are specified in the configuration, but the proper library does not load, this gracefully fails to no formatting.
* Strongly recommended to use ISO 8601 date formats in your source data and configuration. Then use the UI for localization.
* Accessibility: Minimal level (Level A ??).
* Site search intentionally left non-functional since developers will likely want to use their own tool, e.g. Elasticsearch, etc.

# Live Demo
[https://simplenotsimpler.github.io/modern-javascript-dashboard/](https://simplenotsimpler.github.io/modern-javascript-dashboard/)

# Getting Started
Download or clone from [modern-javascript-dashboard](https://github.com/simplenotsimpler/modern-javascript-dashboard).

## Requires:
* Bootstrap - either of the versions below:
  * [Bootstrap 4.4.1](https://getbootstrap.com/docs/4.4/getting-started/introduction/)
  * [Bootstrap 4.5.3](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
* [Apex Charts](https://github.com/apexcharts/apexcharts.js)
* [ModernTable Library](https://github.com/simplenotsimpler/modern-table)
* JSON data source
* Container to hold the datatable 

## Recommended:
* Number formatting: [format-intl-number library](https://github.com/simplenotsimpler/format-intl-number)
* Date formatting: [Moment.js](https://momentjs.com/)

# License
This project is [MIT licensed](./LICENSE).
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

gentelella

gentelella

Free admin dashboard template — vanilla JS, SCSS, Vite 8. No Bootstrap, no jQuery.

HTML · 后台

coreui-free-bootstrap-admin-template

coreui-free-bootstrap-admin-template

Free Bootstrap Admin & Dashboard Template Built for AI-Assisted Development

HTML · 后台

dashboards

dashboards

Responsive dashboard templates 📊✨

HTML · 后台

SB Admin 2

SB Admin 2

SB Admin 2 是 Start Bootstrap 推出的开源后台模板，基于 Bootstrap 构建，整体风格偏向经典管理界面。

HTML · 后台

Adminator-admin-dashboard

Adminator-admin-dashboard

Adminator is easy to use and well design admin dashboard template with dark mode for web apps, websites, servi…

HTML · 后台

SB Admin

SB Admin

SB Admin 是 Start Bootstrap 推出的开源后台管理模板，基于 Bootstrap 构建，定位是简洁、实用的管理界面。

HTML · 后台