
Zorial v2.0 - 登陆页面模板
categoryHTML
# 项目简介
Zorial 是一款基于 Bootstrap 的响应式多用途落地页模板,适用于初创公司、SaaS 产品、业务展示、营销页面等场景。模板内置 6 套亮色和 6 套暗色主题变体,支持一键切换明暗模式,配有粘性导航、平滑滚动、联系表单等功能。
## 技术栈
- Bootstrap 4/5
- jQuery
- Owl Carousel(轮播组件)
- Boxicons(图标字体)
- Google Fonts(Montserrat / Poppins)
## 项目结构
```
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 图标字体
```
## 核心文件说明
- `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 框架样式
## 快速开始
直接用浏览器打开 `HTML/index-1.html` 即可预览。如需本地服务,推荐使用任意静态服务器(如 `npx serve`)。
## 使用建议
所有页面均为纯静态 HTML,无需构建。更换内容和图片时直接在对应的 `.html` 文件中编辑即可;如需修改样式,推荐使用 `style.css` 覆盖而非直接改 Bootstrap 源码。
help_outline
常见问题
评论0
发布时间Dec 7, 2025
技术栈
HTML
标签
agencybootstrapbusinesscorporatecreativelanding pagelaunchmarketingmultipurposeproduct launchresponsivestartupstartup landing pagestartup template