Levonic - Bootstrap 5 登陆页面模板

# 项目简介 Levonic 是一款基于 Bootstrap 的多用途响应式落地页模板，提供 6 种不同风格的首页变体（index-1 至 index-6），适合创业公司、SaaS 产品展示、简历作品集等场景。内置平滑滚动导航、计数器动画、打字机效果、客户端轮播等交互功能。 ## 技术栈 - Bootstrap 5.3.2 - jQuery（负责表单验证与 DOM 操作） - Gumshoe（导航高亮） - SmoothScroll（平滑滚动） - tiny-slider（客户端轮播） - SCSS（提供源码，可自定义主题变量） - PHP（contact.php 表单后端） ## 项目结构 ``` Levonic_HTML_v2.0.0/ ├── HTML/ │ ├── index-*.html # 6 种首页变体 │ ├── css/ │ │ └── style.css # 主样式文件 │ ├── js/ │ │ └── app.js # 核心交互逻辑 │ ├── images/ # 背景图与素材 │ ├── fonts/ # 图标字体 │ ├── php/ │ │ └── contact.php # 联系表单后端 │ └── scss/ # SCSS 源码 └── Documentation/ # 官方文档说明 ``` ## 核心文件说明 - `HTML/index-*.html` — 6 种落地页入口，按需选择或组合使用 - `HTML/css/style.css` — 主样式表，包含通用布局、颜色体系、按钮、响应式断点等 - `HTML/js/app.js` — 交互逻辑：导航滚动吸附、表单验证、轮播、计数器动画、打字机效果 - `HTML/php/contact.php` — 联系表单 POST 接收端，需配合服务器环境使用 - `HTML/scss/_general.scss` — SCSS 变量与通用样式，可自行编译定制主题色 - `HTML/scss/_counter.scss` — 数字计数区样式，背景引用 `images/img-1.jpg` ## 快速开始 纯静态使用：直接用浏览器打开 `HTML/index-1.html`（或任意 index 变体），无需任何构建工具。 表单功能：需将 `HTML` 目录部署至支持 PHP 的 Web 服务器，修改 `form action` 指向正确路径。 自定义样式：修改 `scss/` 目录下的文件后，使用 SCSS 编译器重新生成 `style.css`。 ## 使用建议 模板预设了蓝紫色（#565ae3）品牌色，如需更换可在 `style.css` 顶部或对应 SCSS 变量中全局替换。contact.php 仅为基础示例，生产环境请补充邮件发送逻辑与安全校验。