项目简介link

Zorial 是一款基于 Bootstrap 的响应式多用途落地页模板，适用于初创公司、SaaS 产品、业务展示、营销页面等场景。模板内置 6 套亮色和 6 套暗色主题变体，支持一键切换明暗模式，配有粘性导航、平滑滚动、联系表单等功能。

技术栈link

• Bootstrap 4/5
• jQuery
• Owl Carousel（轮播组件）
• Boxicons（图标字体）
• Google Fonts（Montserrat / Poppins）

项目结构link

Zorial_HTML_v2.0.0/
├── Documentation/          # 模板文档
│   └── index.html
└── HTML/                   # 模板主体
    ├── index-*.html        # 12 个落地页变体（6 亮 + 6 暗）
    ├── css/
    │   ├── style.css       # 主样式
    │   ├── style-dark.css  # 暗色主题样式
    │   └── bootstrap.min.css
    ├── js/
    │   └── app.js          # 交互逻辑（导航、轮播、表单验证）
    ├── images/             # 示例图片资源
    └── fonts/              # Boxicons 图标字体

核心文件说明link

• HTML/index-*.html — 12 个落地页入口文件，按编号和明暗区分
• HTML/css/style.css — 主样式表，定义配色、布局及组件样式
• HTML/css/style-dark.css — 暗色主题样式，通过 app.js 动态切换
• HTML/js/app.js — 核心交互脚本，包含粘性导航、平滑滚动、轮播初始化、表单验证逻辑
• HTML/css/bootstrap.min.css — Bootstrap 框架样式

快速开始link

直接用浏览器打开 HTML/index-1.html 即可预览。如需本地服务，推荐使用任意静态服务器（如 npx serve）。

使用建议link

所有页面均为纯静态 HTML，无需构建。更换内容和图片时直接在对应的 .html 文件中编辑即可；如需修改样式，推荐使用 style.css 覆盖而非直接改 Bootstrap 源码。