Lebari - Education HTML Template

# 项目简介 LeBari 是一套基于 Bootstrap 4 的教育类网站 HTML5 模板，包含 5 种首页风格变体，涵盖在线课程、教练培训、幼儿园、大学等多种教育场景。模板内置课程详情、博客、活动、师资、会员等多个业务页面，可直接作为教育平台或培训机构官网使用。 ## 技术栈 - HTML5 / Bootstrap 4（响应式框架） - CSS3（自定义样式 + 动画） - Font Awesome 5（图标库） - jQuery（交互功能） - Noto Sans TC（Google Fonts 中文字体） - PHP（contact form 邮件发送） ## 项目结构 ``` lebarihtml-10/lebari-package/lebari/ ├── index.html # 首页（在线课程） ├── index-2.html ~ index-5.html # 其他首页变体 ├── about.html # 关于我们 ├── course.html # 课程列表 ├── course-detail.html # 课程详情 ├── blog.html # 博客列表 ├── blog-detail.html # 博客详情 ├── event.html # 活动列表 ├── teacher.html # 师资团队 ├── membership.html # 会员页面 ├── contact.html # 联系我们 ├── sendemail.php # 邮件发送脚本 ├── css/ │ ├── bootstrap.css # Bootstrap 核心 │ ├── style.css # 主样式文件 │ ├── responsive.css # 响应式适配 │ └── font-awesome.css # 图标样式 └── fonts/ # 自定义字体文件 ``` ## 核心文件说明 - `index.html` — 主首页，包含 Banner、课程展示、师资、评价等模块 - `css/style.css` — 主题核心样式，定义全局字体、颜色、布局（主色 #43b97e） - `css/bootstrap.css` — Bootstrap 4 框架样式，提供栅格系统与组件 - `course.html` — 课程分类列表页，支持筛选布局 - `sendemail.php` — 联系表单后端脚本，接收用户提交并发送邮件 - `contact.html` — 联系我们页面，包含表单与地图区块 ## 快速开始 1. 直接在浏览器中打开 `lebari/index.html` 预览完整效果 2. 如需本地服务器运行，可使用 VS Code Live Server 或执行： ``` npx serve lebarihtml-10/lebari-package/lebari ``` 3. 修改联系表单收件地址：编辑 `sendemail.php` 中的收件邮箱 ## 使用建议 - 该模板为纯静态页面，部署时直接上传 `lebari` 文件夹至任意 Web 服务器或静态托管平台（如 Vercel、Netlify）即可 - 如需对接后端数据，建议替换 `course.html`、`blog.html` 等列表页为动态模板（如 React/Vue 组件）