幼儿园学前教育网站模板 | Kider – 班级展示参观预约界面

Kider 是一套面向幼儿园、学前教育中心和儿童兴趣机构的多页网站模板，用园所环境、班级、教师和预约界面介绍招生服务。它以 Bootstrap 5 为基础，适合先制作机构展示站；预约、联系和订阅目前都停留在前端界面，尚未接入报名、排期或收件服务。

从首屏到园所介绍

Kider 的儿童场景很明确：橙红色按钮配浅粉背景，导航和主视觉之间用波浪边缘衔接，班级照片、设施图标和教师头像大量采用圆形。首页有两张自动轮播的儿童照片，英文大标题使用 Lobster Two，整体比常见的方正课程目录更活泼。改成中文时，可以保留这些形状与配色，再检查标题字体的回退效果和换行位置。

首页往下依次放设施介绍、园所与活动说明、教师招募入口、六个班级、预约区、教师及评价。设施区预置校车、操场、食堂和学习环境四项；这些内容应按真实园所条件取舍，照片、教师姓名和家长评价也都是待替换的示例。

包内共 10 个 HTML 页面，包含首页、园所介绍、班级、设施、教师、教师招募、预约、评价和联系这九个内容页，另有一页 404。教师页摆放六张人物卡片，评价页则复用三条评价的轮播。首页汇集多个内容区，内页继续展开对应主题，适合从首页概览进入具体介绍。

班级和预约需要补什么

首页与班级页各有六张班级卡片，展示美术、色彩、运动舞蹈等主题。圆形照片下方放教师头像和费用，再以三栏列出年龄、时间与人数容量，家长可以并排比较这些信息。不过，现有卡片重复使用 3–5 岁、9–10 AM、30 名儿童和 99 美元等示例值，费用也没有注明收费周期，不能直接理解成月费。

班级标题是空链接，没有独立班级详情、按年龄筛选或实时剩余名额。替换内容时，首页与 classes.html 需要同步；若希望点击后查看课程安排、材料或收费说明，还要补建详情页并修改入口。

其他入口也需要分清用途：

• 预约区出现在首页、班级页和独立预约页，包含监护人姓名与邮箱、孩子姓名与年龄、留言。它没有日期、时段或人数校验，提交也不会建立预约记录。
• 教师招募页是一张图片配介绍和 Get Started 按钮，没有应聘表单或简历上传；Join Us、Learn More 等入口中也有占位链接，需要重新安排去向。
• 联系表单没有接收端，页脚的邮箱输入框与 SignUp 按钮也没有订阅逻辑。输入框主要用 ID 标识，接入服务时还需补字段名称、必填规则和相应校验；孩子年龄当前只是文本框。

联系页地图展示的是外部嵌入的示例地点，并不获取访客位置。本页在线演示保留这些布局，只在提交或尝试使用未接通入口后显示演示提示，不会发送留言、保存订阅或创建预约。

内容与配色的修改顺序

1. 先替换园所名称、地址和招生介绍，再同步修改各页导航与页脚。当前页眉页脚直接写在每个 HTML 文件中，修改一页不会自动更新其他页面。
2. 按真实班级整理年龄、时间、容量、费用和教师信息，处理首页及班级页的重复内容，并为预约、咨询和教师招募按钮安排实际入口。
3. 替换 img/ 中的首屏、班级、教师和环境照片。首屏用 carousel-1.jpg、carousel-2.jpg，上下波浪由两张背景 PNG 形成；换图时应同时查看窄屏裁切和文字是否遮住人物。
4. 最后统一配色与字体。css/style.css 提供 --primary、--light、--dark，原值分别是 #FE5D37、#FFF5F3、#103741；Bootstrap 按钮、文字色等还涉及已编译样式，不能只改这三个变量就假定所有组件都会同步。

包内保留了 scss/bootstrap.scss 及其导入的 Bootstrap Sass 文件。如果通过 Sass 调整品牌色，应同步修改其中的 $primary、$light、$dark 等变量，再将编译结果写入对应 CSS；只维护现成页面时，也可以直接编辑已有样式，但要检查按钮的悬停与状态颜色。

现成 HTML 已有可用的 CSS 和 JavaScript，不需要先执行 Node.js 构建。实际文件对应 Bootstrap 5.0.0，交互还使用 jQuery 3.4.1、Owl Carousel、WOW 和滚动缓动脚本；包内没有预设 npm 构建命令。演示副本将原先外链的运行脚本和图标字体按原版本保存到本地，在线字体与示例地图仍需要联网，下载包保持原样。