Levonic - Bootstrap 5 登陆页面模板 preview 1

Levonic - Bootstrap 5 登陆页面模板

bookmark

Levonic 是一款基于 Bootstrap 的多用途响应式落地页模板，提供 6 种不同风格的首页变体（index-1 至 index-6），适合创业公司、SaaS 产品展示、简历作品集等场景。内置平滑滚动导航、计数器动画、打字机效果、客户端轮播等交互功能。

HTMLagencybootstrapbusinesscorporatecreativelanding pagelaunch

项目简介

Levonic 是一款基于 Bootstrap 的多用途响应式落地页模板，提供 6 种不同风格的首页变体（index-1 至 index-6），适合创业公司、SaaS 产品展示、简历作品集等场景。内置平滑滚动导航、计数器动画、打字机效果、客户端轮播等交互功能。

技术栈

  • Bootstrap 5.3.2
  • jQuery（负责表单验证与 DOM 操作）
  • Gumshoe（导航高亮）
  • SmoothScroll（平滑滚动）
  • tiny-slider（客户端轮播）
  • SCSS（提供源码，可自定义主题变量）
  • PHP（contact.php 表单后端）

项目结构

text
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 仅为基础示例，生产环境请补充邮件发送逻辑与安全校验。

help_outline

常见问题