项目简介
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/目录。 - 侧边管理面板(打开首页右上角设置图标)可预览不同页面变体,方便选型后再针对性修改。
