tabler：​36k+ stars 免费开源的仪表盘工具包！

Tabler 是一个基于 Bootstrap 开发的 HTML 仪表盘 UI 套件，旨在提供一个功能齐全、用户友好、清晰简单的管理面板，以最简单的方式管理和可视化不同类型的数据。每个组件都注重细节，让界面更加美观，可适用于简单和复杂的网站系统。

唯一的使用要求是具备基本的 HTML 和 CSS 知识，项目免费开源，目前已经收获了36K Star，含金量非常高。

主要特点如下：

• 响应式：支持移动设备、平板电脑和桌面显示器，无论您使用什么设备，都无关紧要。Tabler 在所有主流浏览器中都是响应式的。

• 跨浏览器：主题与最新的Chrome，Firefox +，Safari，Opera，Edge和移动浏览器完美配合，提供持续支持。

• HTML5和CSS3：使用现代网络技术如HTML5和CSS3。主题包括一些微妙的CSS3动画。
• 干净的代码：遵循Bootstrap的标准，集成简单。所有代码全部手写，W3C长久有效。
• 演示页面：有各种组件的 20 多个独立页面，可以自由选择和组合。所有组件的颜色和样式都可能有所不同，您可以使用 Sass 轻松修改。无任何限制！

• 单页应用程序版本：Tabler React 有 Tabler 的 React 组件。

Docker 运行：

1、构建映像

docker build -t tabler .

2、在将 src 目录以及 _config.yml 文件装载到容器中时运行 tabler 映像。

不要忘记公开端口 3000，以便可以在本地浏览网站。还可以公开端口 3001 以访问浏览器同步。

docker run -p 3000:3000 -p 3001:3001 -v $(pwd)/src:/app/src -v $(pwd)/_config.yml:/app/_config.yml tabler

3、打开浏览器

访问地址：http://localhost:3000 

编辑 src/ 文件夹中的任何内容，刷新浏览器，查看运行效果

项目集成：

1、npm安装：

npm install @tabler/core

2、yarn安装：

yarn add @tabler/core

3、pnpm安装：

pnpm install @tabler/core

4、CDN支持

@tabler/core npm 包中包含的所有文件都可以通过 jsDelivr CDN 获得。使用它来将 Tabler 编译的 CSS 和 JS 文件引入到项目中。

• Javascript

<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>

• Styles

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">

如果你想创建一个不仅用户友好而且完全响应的界面，Tabler 是一个完美的解决方案。提供大量的现成组件，支持自定义设计，适应用户的任何需求。最重要的是，Tabler是一个开源免费的解决方案，由开源社区不断开发和改进。

官网：

https://tabler.io/

tabler开源代码地址：

https://github.com/tabler/tabler

https://gitee.com/mirrors/Tabler

tabler演示地址：

https://preview.tabler.io/

tabler开发手册：

https://tabler.io/docs/getting-started

tabler-react开源代码地址：

https://github.com/tabler/tabler-react

tabler-react 演示地址：

https://tabler-react.com/

END

点点关注不迷路

本文发表于公众号【爱编程爱技术】

关注我们，阅读更多精彩内容

点击上方关注我们，谢谢支持！

往期推荐：