Lebari - 教育 HTML 模板 preview 1

Lebari - 教育 HTML 模板

bookmark

LeBari 是一套基于 Bootstrap 4 的教育类网站 HTML5 模板，包含 5 种首页风格变体，涵盖在线课程、教练培训、幼儿园、大学等多种教育场景。模板内置课程详情、博客、活动、师资、会员等多个业务页面，可直接作为教育平台或培训机构官网使用。

HTMLEducationBootstrap 4.xWell DocumentedResponsive

项目简介

LeBari 是一套基于 Bootstrap 4 的教育类网站 HTML5 模板，包含 5 种首页风格变体，涵盖在线课程、教练培训、幼儿园、大学等多种教育场景。模板内置课程详情、博客、活动、师资、会员等多个业务页面，可直接作为教育平台或培训机构官网使用。

技术栈

  • HTML5 / Bootstrap 4（响应式框架）
  • CSS3（自定义样式 + 动画）
  • Font Awesome 5（图标库）
  • jQuery（交互功能）
  • Noto Sans TC（Google Fonts 中文字体）
  • PHP（contact form 邮件发送）

项目结构

text
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 或执行：
    text
    npx serve lebarihtml-10/lebari-package/lebari
  3. 修改联系表单收件地址：编辑 sendemail.php 中的收件邮箱

使用建议

  • 该模板为纯静态页面，部署时直接上传 lebari 文件夹至任意 Web 服务器或静态托管平台（如 Vercel、Netlify）即可
  • 如需对接后端数据，建议替换 course.html、blog.html 等列表页为动态模板（如 React/Vue 组件）
help_outline

常见问题