kavlan html bootstrap

Kavlan - Bootstrap 5 HTML 响应式管理模板

概述

Kavlan 是完美的深色管理面板模板，可让您的管理系统轻松导航和维护。 Kavlan 简洁、响应灵敏且易于使用，提供的用户体验将帮助您创建成功的界面。最重要的是，它是免费的！

查看演示 |下载压缩包

目录

• 要求

• 快速入门

• 模板页面

• 演示链接

• 模板主要特点

• 模板文件结构

• 车把

• 模板 JSON 数据

• 自定义模板样式

• 创建新页面

• 引导文档

• 制作人员

• 联系我们

要求

如果您不打算使用模板源代码（这意味着您不会编译它或运行 Webpack 开发服务器），则无需安装任何内容。您只需导航到 dist 文件夹并开始编辑文件即可。

大多数开发人员将编辑源代码，并且还将运行 Webpack 来重新编译模板文件。如果是这种情况，请确保您已安装 Node.js。您可以从这里下载

快速入门

• 下载最新版本或克隆存储库： git clone https://github.com/PixelRocket-Shop/kavlan-html-bootstrap.git

• 如果您的系统上尚未安装 Node.js，请安装它。

• 在命令行中打开项目根目录。

• 在命令行中运行npm install 。

• 运行npm start启动 Webpack devserver。

• 如果要重新编译模板文件（输出到 dist 文件夹），请运行npm run build

模板页面

该模板由 6 页组成：

• 仪表板

• 登录页面

• 注册页面

• 忘记密码页面

• 404页

• 空白页

为了将代码重复降至最低，我们使用 Handlebars.js 作为模板引擎和部分来快速将相同的代码添加到不同的页面。我们还使用 JSON 数据的 Handlebars 插件 - 这允许我们使用循环并输出单个 HTML 代码块，而不是重复相同的 HTML。

演示链接

演示网址

请注意，这只是一个 HTML 模板。它不连接到数据库，并且不会自动在内容管理系统（Wordpress 等）中工作。您需要将我们的代码合并到您的应用程序中。

模板主要特点

• Chart.js 与 3 种不同图表类型集成

• 使用 Bootstrap 5 构建

• 完全响应

• 最新订单组件

• 可折叠侧边栏（浏览器调整大小时自动折叠）

• 通知组件

• 头像组件

• 登录/注册组件

模板文件结构

dist - 模板的生成版本。如果您不想使用模板源代码，请转到此处。但请注意：如果您直接自定义此文件夹中的任何内容，然后使用 webpack 重新编译模板，除非您将 dist 文件夹移出模板，否则您的更改将被覆盖。

node_modules - NPM 安装依赖项的目录。在完成模板安装之前，您将看不到此文件夹。您不需要创建此文件夹。

src - 模板源代码。转到此处自定义您的模板。

src/assets - 模板资源，例如 CSS、JS、图像等。

src/data - 模板 JSON 数据文件。我们使用这些 JSON 文件使您能够更轻松地将内容插入到模板中。

src/html - 模板页面。转到此处编辑现有页面或添加新页面。

src/partials - 车把部分模板。

车把

Handlebars 是一个模板引擎，它允许我们保持模板源代码尽可能有组织和干净。它减少了代码重复，并通过使用辅助函数，使模板开发人员能够使用最少的代码非常快速地输出大量数据。您可以在这里阅读更多相关信息。

部分车把示例

在我们的模板中打开以下文件：src/html/index.html。

在第 21 行左右，您将看到以下代码：

{{> content/breadcrumbs }}

这是车把部分。该代码告诉 Handlebars 查看名为 content 的文件夹（位于partials 文件夹中），然后查找名为 breadcrumbs 的文件，并在编译时将其插入到 index.html 文件中。

关于我们使用 Handlebars 部分的一些重要注意事项：

• 我们所有的部分都存储在 src/partials 中。不要将部分部件放置在其他地方。

• 我们使用 .html 作为部分文件扩展名。我们还添加了 .svg 作为有效的部分文件扩展名。

• 如果部分文件夹内的文件夹中有文件夹，则仅引用部分所在的文件夹。因此“partials/header/navbars/navbar.html”将被引用为“navbars/navbar”。

• 请勿包含部分文件扩展名。请注意，在上面的示例中，我们输出“breadcrumbs”而不是“breadcrumbs.html”

模板 JSON 数据

我们使用的 Webpack Handlebars 插件附带了一个非常方便的实用程序，它允许我们传入 JSON 文件作为模板数据。

请导航至：src/data。这是我们的模板数据 JSON 文件所在的位置。您可以编辑、删除或添加您自己的文件夹到此文件夹中。

自定义模板样式

模板的所有源 CSS/SASS 文件都保存在模板的 asset 文件夹中。导航到 src/assets/scss。使用编辑器打开 theme.scss。

这是所有其他 SASS/CSS 文件的主要入口点。

创建新页面

要创建新页面，请在代码编辑器中导航至：src/html。为了更容易地获得正确的 HTML，请克隆现有页面。将新创建的文件重命名为您需要的任何 URL。就是这样。现在，您可以使用代码编辑器打开新页面，进行更改，然后保存文件。退出 Webpack devserver 并重新启动以显示页面。

引导文档

Bootstrap 已经有一个全面的文档站点，它将指导您设置和使用所有默认的 Bootstrap 功能。 Bootstrap 5 完全集成到我们模板的源代码中。请首先参阅 Bootstrap 的文档站点，了解任何默认的 Bootstrap 功能：访问 Bootstrap 的文档站点

制作人员

引导程序

图表.js

未飞溅

像素

皮克斯

Simplebar.js

联系我们

您可以在此处找到我们的网站，也可以发送电子邮件至 support@pi​​xelrocket.store