Vakavia v2.1.0 - 多用途登陆页面模板 preview 1

Vakavia v2.1.0 - 多用途登陆页面模板

bookmark

Vakavia 是一款基于 Bootstrap 的多用途 Landing Page 模板，包含 6 种首页变体，集成了轮播图、视频弹窗、表单验证等常见组件，适合 App 推广、产品介绍或企业展示页面。

HTMLagencybootstrapbusinesscorporatecreativelanding pagelaunch

项目简介

Vakavia 是一款基于 Bootstrap 的多用途 Landing Page 模板，包含 6 种首页变体，集成了轮播图、视频弹窗、表单验证等常见组件，适合 App 推广、产品介绍或企业展示页面。

技术栈

  • Bootstrap 5.3.2（响应式框架）
  • jQuery（DOM 操作与交互）
  • Owl Carousel（客户/评价轮播）
  • FlexSlider（图片滑块）
  • Magnific Popup（视频弹窗）
  • Parsley.js（表单验证）
  • jQuery Easing（平滑滚动动画）

项目结构

text
vakaviahtml-210/Vakavia_HTML_v2.1.0/
├── Landing/                    # 实际使用的主模板目录
│   ├── index.html ~ index_6.html # 6 种首页布局
│   ├── css/
│   │   ├── style.css            # 主样式（含 Loader、按钮、导航等）
│   │   ├── bootstrap.min.css
│   │   ├── owl.carousel.css
│   │   ├── flexslider.css
│   │   └── themify-icons.css
│   ├── js/
│   │   ├── app.js               # 核心交互逻辑（轮播、表单、弹窗）
│   │   ├── jquery.min.js
│   │   ├── bootstrap.bundle.min.js
│   │   └── owl.carousel.min.js
│   └── images/
└── Documentation/              # 官方文档（可忽略）

核心文件说明

  • Landing/index.html — 主首页模板，包含 Hero、Features、Services、Team、Pricing、Contact 等完整区块
  • Landing/css/style.css — 主题主样式，定义 Loader、按钮、导航栏、背景图片等
  • Landing/js/app.js — 交互逻辑：导航滚动、Owl Carousel 初始化、视频弹窗、表单 AJAX 提交
  • Landing/index_2.html ~ index_6.html — 不同布局的首页变体，可按需替换

快速开始

直接在浏览器中打开 Landing/index.html，或使用任意本地服务器访问（如 Live Server）。所有资源均为 CDN 或本地文件，无需额外安装依赖。

使用建议

  • 表单提交需配置后端接口或在 app.js 的 $.ajax 中修改 url 为实际接口地址
  • 图片资源位于 images/ 目录，建议替换为项目实际素材
  • 如需修改主题色，可定位 style.css 中 .text-custom（#f56363 红色）及相关变量
help_outline

常见问题