项目简介link

Toddly 是一款面向幼儿园、学前教育机构的多彩 HTML5 网站模板，采用 Bootstrap 5.3.3 构建，集成了 GSAP 动画、Lenis 平滑滚动和 Swiper 轮播等交互组件。模板提供首页、博客、课程、商店、团队、活动等 30+ 页面，适合快速搭建教育类商业网站。

技术栈link

• HTML5 + CSS3（静态页面）
• Bootstrap v5.3.3
• jQuery
• GSAP（动画引擎）
• Lenis（平滑滚动）
• Swiper Slider（轮播组件）
• Google Fonts（Baloo 2、Roboto、Amatic SC）

项目结构link

toddlyhtml-10/
├── documentation/           # 模板文档
│   ├── index.html
│   └── assets/
│       ├── css/style.css
│       └── js/main.js
└── download version/        # 完整模板包（生产可用）
    ├── index.html
    ├── about.html
    ├── blog.html
    ├── shop.html
    ├── contact.html
    ├── mail.php             # 联系表单后端
    └── assets/
        ├── css/             # 所有样式文件
        ├── fonts/           # 字体文件
        └── js/              # 所有脚本文件

核心文件说明link

• download version/index.html — 首页模板，包含 Hero 轮播区
• download version/assets/css/style.css — 主样式表（含完整 CSS 变量系统）
• download version/assets/js/main.js — 核心交互脚本（GSAP、Swiper、动画等 39 个功能模块）
• download version/mail.php — AJAX 联系表单后端处理
• documentation/index.html — 模板使用文档

快速开始link

1. 将 download version 文件夹内容上传至服务器根目录
2. 直接在浏览器打开 index.html 即可预览
3. 联系表单需配置服务器 PHP 环境支持

使用建议link

模板采用模块化结构，修改时只需定位对应区块的 HTML 和 CSS。若需深色主题或自定义配色，可通过 style.css 顶部的 CSS 变量（--vs-theme-color1 等）快速全局换色。