Kidba - 教育 HTML 模板 preview 1

Kidba - 教育 HTML 模板

bookmark

Kidba 是一款面向幼儿园、小学及教育培训机构的多页面 HTML 模板,采用现代设计风格,支持首页变体、课程展示、师资介绍、博客、商城、购物车等功能页面。模板内置深色/浅色模式切换和 LTR/RTL 布局切换功能。

HTML

项目简介

Kidba 是一款面向幼儿园、小学及教育培训机构的多页面 HTML 模板,采用现代设计风格,支持首页变体、课程展示、师资介绍、博客、商城、购物车等功能页面。模板内置深色/浅色模式切换和 LTR/RTL 布局切换功能。

技术栈

  • Bootstrap 5.x(响应式布局框架)
  • jQuery(DOM 操作与交互)
  • Slick(轮播组件)
  • Google Fonts(Fredoka One、Open Sans、Roboto)
  • 静态 HTML/CSS(无需构建工具)

项目结构

text
kidbahtml-10/
├── documentation/          # 官方文档
│   ├── index.html
│   └── assets/
├── kidba/                  # 生产用模板主目录
│   ├── index.html          # 首页
│   ├── index-2.html        # 首页变体
│   ├── about.html          # 关于我们
│   ├── class.html          # 课程列表
│   ├── class-2.html        # 课程列表变体
│   ├── class-details.html  # 课程详情
│   ├── staff.html          # 师资团队
│   ├── staff-details.html  # 师资详情
│   ├── blog.html           # 博客列表
│   ├── blog-details.html   # 博客详情
│   ├── shop.html           # 商城
│   ├── shop-details.html   # 商品详情
│   ├── cart.html           # 购物车
│   ├── checkout.html       # 结账
│   ├── contact.html        # 联系我们
│   ├── signin.html         # 登录
│   ├── signup.html         # 注册
│   ├── error.html          # 错误页面
│   └── assets/
│       ├── css/            # 样式文件
│       ├── fonts/           # 图标字体
│       └── images/          # 图片资源

核心文件说明

  • kidba/index.html — 模板主入口首页,包含预加载动画与主题切换面板
  • kidba/assets/css/style.css — 全局样式表,定义颜色、字体、布局等所有主题变量
  • kidba/assets/css/bootstrap.min.css — Bootstrap 核心样式,提供栅格系统与基础组件
  • kidba/assets/js/ — jQuery 插件集合(含 Slick 轮播、jQuery Easing 动画等)
  • documentation/index.html — 官方使用文档,含页面说明与自定义指引

快速开始

直接用浏览器打开 kidba/index.html 即可预览全部页面。如需部署,将 kidba 文件夹内容上传至服务器即可。

使用建议

  • 模板所有页面均为静态 HTML,图片和文案需根据实际业务替换;LOGO 位于 assets/images/logo/ 目录。
  • 侧边管理面板(打开首页右上角设置图标)可预览不同页面变体,方便选型后再针对性修改。
help_outline

常见问题