37.1K star！超受欢迎的 HTML 仪表盘 UI 工具包，开源免费！

* 戳上方蓝字“开源先锋”关注我

项目简介

Tabler是一个免费开源的 HTML 仪表板 UI 工具包，基于 Bootstrap 构建，提供了丰富的 UI 组件和样式，可以很好地适应各种设备，包括桌面、平板和手机。

提供了超过 20 个独立的页面，涵盖了仪表板常见的功能，例如：

Tabler 的组件可以轻松组合使用，并支持多种颜色方案和样式自定义，可以满足各种应用场景的需求。

此外，Tabler 还提供了 React 版本，可以帮助我们构建单页应用。

目前在Github上面收获了的37.1K star！

响应式设计：Tabler具有完全响应式设计，支持移动设备、平板电脑和桌面显示器，无论用户在何种设备上浏览，都能提供完美的显示效果。
跨浏览器兼容：Tabler主题与最新版本的Chrome、Firefox、Safari、Opera、Edge以及移动浏览器完美兼容，确保用户在不同浏览器上都能流畅使用。
HTML5和CSS3技术：Tabler采用现代的Web技术，如HTML5和CSS3，其中包含一些优雅的CSS3动画效果，能够吸引用户的注意力。
清晰的代码规范：Tabler严格遵循Bootstrap的指导原则，保证代码简洁清晰，并且所有代码都是手工编写的，符合W3C标准。
丰富的演示页面：Tabler提供超过20个独立页面，展示了各种不同的组件，用户可以自由选择并组合。所有组件均可通过Sass轻松定制样式和颜色，让用户拥有无限的设计可能性。
单页面应用版本：Tabler React为Tabler提供了React组件版本，方便用户在React项目中灵活应用Tabler的功能。

支持使用npm、yarn、pnpm安装，命令分别如下：

npm install @tabler/core

yarn add @tabler/core

pnpm install @tabler/core

CDN支持

@tabler/core npm包中的所有文件都可通过CDN获取，直接使用以下链接来加载Tabler的文件：

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">

Docker 运行则按下面的步骤：

1、构建Tabler镜像

docker build -t tabler

2、运行Tabler镜像时，将src目录和_config.yml文件挂载到容器中。

不要忘记公开端口 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/文件夹中进行任何编辑，当页面重新构建后，浏览器会自动刷新页面。

项目demo

各种组件界面

表格元素

不同风格的布局

多样的图标

总的来说，Tabler 是一个功能强大、用户友好而且可扩展的开源 HTML 仪表板 UI 工具包，提供大量的现成组件，支持自定义设计。无论你是 Bootstrap 的忠实粉丝，还是喜欢 React 的开发者，都可以从 Tabler 中找到适合自己的解决方案。

更多细节功能，感兴趣的可以到项目地址查看：

开源项目：https://github.com/tabler/tabler
React版本：https://github.com/tabler/tabler-react

原文始发于微信公众号（开源先锋）：37.1K star！超受欢迎的 HTML 仪表盘 UI 工具包，开源免费！

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/295063.html