基于 React Bootstrap 构建的响应式后台仪表盘模板
ReactHTML后台启动器
light-bootstrap-dashboard-react-boilerplate — React 后台模板
作者 saissei
基于 React Bootstrap 的 Light Bootstrap Dashboard React 后台模板启动器，包含侧边栏、卡片、表格、地图与用户资料等示例页面。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
目前有 1 张原始预览，可打开完整图片查看设计细节。
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-03查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
包含 Dashboard、User Profile、Table List、Notifications、Maps、Icons、Typography、Upgrade 等示例页面
提供 Card、StatsCard、UserCard、Tasks、Sidebar、Navbars、Footer、FormInputs 等可复用组件
侧边栏支持 black、azure、green、orange、red、purple 六种颜色及背景图片选项
采用 MIT 许可，允许免费使用、修改、商用与分发该版本代码
模板详细介绍
该仓库是 Creative Tim 的 Light Bootstrap Dashboard React 的 boilerplate（启动器）版本，技术栈为 React，构建在 React Bootstrap 之上，并沿用 Light Bootstrap Dashboard 的视觉风格，页面为响应式布局。
模板提供后台仪表盘常见的页面与组件示例：Dashboard、User Profile、Table List、Notifications、Maps、Icons、Typography、Upgrade 等视图，以及 Card、StatsCard、UserCard、Tasks、Sidebar、Navbars、Footer、FormInputs、CustomButton、CustomCheckbox、CustomRadio、FixedPlugin 等组件。侧边栏提供 black、azure、green、orange、red、purple 六种颜色，并支持背景图片选项。README 说明其可用于管理面板、项目管理系统、Web 应用后端、CMS 或 CRM 等场景。
使用限制方面：仓库为 MIT 许可的免费版本，但演示图片、字体、图标等第三方素材需按各自许可单独核对；域名、托管、数据库等外部服务可能另行收费。README 中的浏览器支持声明为“最后两个版本”的 Chrome、Firefox、Edge、Safari、Opera，属于作者当时的支持目标，不代表当前实际兼容性。仓库更新时间较早，未提供依赖版本清单，使用前需自行核对依赖兼容性。
ReactHTML后台启动器
适合你的项目吗？
适用场景
- 搭建管理后台或运营面板的前端骨架
- 作为项目管理系统、CMS 或 CRM 的界面起点
- 在 React 项目中快速引入 Bootstrap 风格的仪表盘布局与组件
- 用于学习 React Bootstrap 组件组织与后台页面结构
适合人群
- 需要 React 后台仪表盘起步模板的前端开发者
- 使用 Bootstrap 风格设计语言、偏好轻量视觉的后台项目
- 希望以 MIT 许可免费获取并自行修改代码的团队
- 需要现成示例页面（表格、地图、通知、用户资料）作为参考的项目
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
可通过 git clone 仓库、下载 GitHub 压缩包或从 Creative Tim 产品页获取代码
- 2
README 中的文档链接指向 demos.creative-tim.com 上的在线文档
- 3
仓库未提供依赖版本清单，安装前需自行核对 package.json 中各依赖的兼容性
- 4
演示图片、字体、图标等第三方素材需按各自许可单独核对，不能仅凭 MIT 许可判断
- 5
仓库最后更新于 2020 年，使用前建议确认依赖与当前构建工具链的兼容情况
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 代码以 MIT 许可免费提供，允许使用、复制、修改、合并、发布、分发、再许可和/或销售，但须在所有副本或实质性部分中保留版权声明与许可声明。
- 使用或分发时须保留 Creative Tim 的版权声明，不得移除或篡改。
- 文档托管在作者网站，离线使用或自行部署时需注意文档链接指向外部站点，可能需联网访问。
- 浏览器支持仅为作者声明的目标范围（Chrome、Firefox、Edge、Safari、Opera 最后两个版本），不代表当前实际兼容性，使用前需自行验证。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
README 原文
Copyright 2018 Creative Tim (https://www.creative-tim.com?ref=lbdr-readme)
README 原文
The documentation for the Light Bootstrap Dashboard React is hosted at our [website](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/documentation/?ref=lbdr-readme).
README 原文
https://github.com/saissei/light-bootstrap-dashboard-react-boilerplate/blob/master/LICENSE.mdhttps://github.com/saissei/light-bootstrap-dashboard-react-boilerplate/blob/master/README.mdAt present, we officially aim to support the last two versions of the following browsers:
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 61 / 100
- 技术栈
- React · HTML
- 网站类型
- 后台 · 启动器
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2020-09-04
- 截图检查日期
- 2026-10-03
目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。
目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 7cd91c746834b03c995d2b5aac18b25f0f6bf6713fece0e30bf3c5169ac114b6
2026-10-03T06:04:09.921Z
来源文件 / 仓库# [Light Bootstrap Dashboard React](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/?ref=lbdr-readme) [](https://twitter.com/intent/tweet?url=https%3A%2F%2Fcreativetimofficial.github.io%2Flight-bootstrap-dashboard-react&text=Light%20Bootstrap%20Dashboard%20React%20-%20Free%20Bootstrap%20Admin%20Template&original_referer=https%3A%2F%2Fdemos.creative-tim.com%2Flight-bootstrap-dashboard-react%2F&via=creativetim&hashtags=react%2Cbootstrap%2Creact-bootstrap%2Ccreativetim%2Ccreative-tim)
  []() []() [](https://discord.gg/E4aHAQy)
**[Light Bootstrap Dashboard React](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/?ref=lbdr-readme)** is an admin dashboard template designed to be beautiful and simple. It is built on top of [React Bootstrap](https://5c507d49471426000887a6a7--react-bootstrap.netlify.com/), using [Light Bootstrap Dashboard](https://www.creative-tim.com/product/light-bootstrap?ref=lbdr-readme) and it is fully responsive. It comes with a big collections of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM.
The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Light Bootstrap Dashboard React contains multiple handpicked and optimized plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customization of this product.
It comes with 6 filter colors for the sidebar (`black`, `azure`,`green`,`orange`,`red`,`purple`) and an option to have a background image.
## Table of Contents
* [Versions](#versions)
* [Demo](#demo)
* [Quick Start](#quick-start)
* [Documentation](#documentation)
* [File Structure](#file-structure)
* [Browser Support](#browser-support)
* [Resources](#resources)
* [Reporting Issues](#reporting-issues)
* [Technical Support or Questions](#technical-support-or-questions)
* [Licensing](#licensing)
* [Useful Links](#useful-links)
## Versions
[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/html-logo.jpg" width="60" height="60" />](https://www.creative-tim.com/product/light-bootstrap-dashboard?ref=lbdr-readme)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/react-logo.jpg" width="60" height="60" />](https://www.creative-tim.com/product/light-bootstrap-dashboard-react?ref=lbdr-readme)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/vue-logo.jpg" width="60" height="60" />](https://www.creative-tim.com/product/vue-light-bootstrap-dashboard?ref=lbdr-readme)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/angular-logo.jpg" width="60" height="60" />](https://www.creative-tim.com/product/light-bootstrap-dashboard-angular2?ref=lbdr-readme)
| HTML | React | Vue | Angular |
| --- | --- | --- | --- |
| [](https://www.creative-tim.com/product/light-bootstrap-dashboard?ref=lbdr-readme) | [](https://www.creative-tim.com/product/light-bootstrap-dashboard-react?ref=lbdr-readme) | [](https://www.creative-tim.com/product/vue-light-bootstrap-dashboard?ref=lbdr-readme) | [](https://www.creative-tim.com/product/light-bootstrap-dashboard-angular2?ref=lbdr-readme) |
## Demo
| Dashboard | User Profile | Tables | Maps |
| --- | --- | --- | --- | --- |
| [](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/dashboard?ref=lbdr-readme) | [](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/user-page?ref=lbdr-readme) | [](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/table-list?ref=lbdr-readme) | [](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/notifications?ref=lbdr-readme) |
[View More](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/dashboard?ref=lbdr-readme).
## Quick start
Quick start options:
- Clone the repo: `git clone https://github.com/creativetimofficial/light-bootstrap-dashboard-react.git`.
- [Download from Github](https://github.com/creativetimofficial/light-bootstrap-dashboard-react/archive/master.zip).
- [Download from Creative Tim](https://www.creative-tim.com/product/light-bootstrap-dashboard-react?ref=lbdr-readme).
## Documentation
The documentation for the Light Bootstrap Dashboard React is hosted at our [website](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/documentation/?ref=lbdr-readme).
## File Structure
Within the download you'll find the following directories and files:
```
light-bootstrap-dashboard-react
.
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── jsconfig.json
├── package.json
├── Documentation
│ ├── css
│ │ ├── demo.css
│ │ ├── documentation.css
│ │ └── light-bootstrap-dashboard.css
│ ├── img
│ └── tutorial-components.html
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── index.js
├── logo.svg
├── routes.js
├── assets
│ ├── css
│ │ ├── animate.min.css
│ │ ├── demo.css
│ │ ├── light-bootstrap-dashboard-react.css
│ │ ├── light-bootstrap-dashboard-react.css.map
│ │ ├── light-bootstrap-dashboard-react.min.css
│ │ └── pe-icon-7-stroke.css
│ ├── fonts
│ ├── img
│ │ ├── faces
│ └── sass
│ ├── lbd
│ │ └── mixins
│ └── light-bootstrap-dashboard-react.scss
├── components
│ ├── Card
│ │ └── Card.jsx
│ ├── CustomButton
│ │ └── CustomButton.jsx
│ ├── CustomCheckbox
│ │ └── CustomCheckbox.jsx
│ ├── CustomRadio
│ │ └── CustomRadio.jsx
│ ├── FixedPlugin
│ │ └── FixedPlugin.jsx
│ ├── Footer
│ │ └── Footer.jsx
│ ├── FormInputs
│ │ └── FormInputs.jsx
│ ├── Navbars
│ │ ├── AdminNavbar.jsx
│ │ └── AdminNavbarLinks.jsx
│ ├── Sidebar
│ │ └── Sidebar.jsx
│ ├── StatsCard
│ │ └── StatsCard.jsx
│ ├── Tasks
│ │ └── Tasks.jsx
│ └── UserCard
│ └── UserCard.jsx
├── layouts
│ └── Admin.jsx
├── variables
│ └── Variables.jsx
└── views
├── Dashboard.jsx
├── Icons.jsx
├── Maps.jsx
├── Notifications.jsx
├── TableList.jsx
├── Typography.jsx
├── Upgrade.jsx
└── UserProfile.jsx
```
## Browser Support
At present, we officially aim to support the last two versions of the following browsers:
<img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png" width="64" height="64">
## Resources
- Demo: https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/dashboard?ref=lbdr-readme
- Download Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react?ref=lbdr-readme
- Documentation: https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/documentation/tutorial?ref=lbdr-readme
- License Agreement: https://www.creative-tim.com/license?ref=lbdr-readme
- Support: https://www.creative-tim.com/contact-us?ref=lbdr-readme
- Issues: [Github Issues Page](https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues)
## Reporting Issues
We use GitHub Issues as the official bug tracker for the Light Bootstrap Dashboard React. Here are some advices for our users that want to report an issue:
1. Make sure that you are using the latest version of the Light Bootstrap Dashboard React. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/?ref=lbdr-readme).
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
## Technical Support or Questions
If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=lbdr-readme) instead of opening an issue.
## Licensing
- Copyright 2018 Creative Tim (https://www.creative-tim.com?ref=lbdr-readme)
- Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
## Useful Links
More products from Creative Tim: <https://www.creative-tim.com/products?ref=lbdr-readme>
Tutorials: <https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w>
Freebies: <https://www.creative-tim.com/products?ref=lbdr-readme>
Affiliate Program (earn money): <https://www.creative-tim.com/affiliates/new?ref=lbdr-readme>
Social Media:
Twitter: <https://twitter.com/CreativeTim>
Facebook: <https://www.facebook.com/CreativeTim>
Dribbble: <https://dribbble.com/creativetim>
Google+: <https://plus.google.com/+CreativetimPage>
Instagram: <https://instagram.com/creativetimofficial>
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
ant-design-pro
Ant Design Pro 是 Ant Design 官方推出的企业级中后台前端脚手架，基于 React 19、Umi Max 4 和 antd 6 构建，内置 TypeScript 支持。
React · 后台
react-boilerplate
react-boilerplate 是一个为有一定 React 和 Redux 经验的开发者设计的启动器，目标是快速搭建可扩展、离线优先的 Web 应用。
React · 启动器
coreui-free-react-admin-template
Free React Admin & Dashboard Template Built for AI-Assisted Development
React · 后台
fastapi-react
fastapi-react 是一个基于 Cookiecutter 的模板，用于快速搭建 FastAPI 与 React（TypeScript）的全栈项目。
React · 后台
react-antd-admin-template
一个基于React+Antd的后台管理模版，在线预览https://nlrx-wjc.github.io/react-antd-admin-template/
React · 后台
shadcn-landing-page
Free Landing page template using Shadcn, React, Typescript and Tailwind
React · 企业官网