
Consulo - Business Consulting Bootstrap 5 HTML Template
category企业官网
# 项目简介
Consulo 是一款面向企业客户和专业商务服务的 Bootstrap 5 多页面 HTML 模板,包含首页、关于我们、博客、服务、项目、团队、定价等多个完整页面。内置粘性导航栏、滚动动画、响应式抽屉菜单等交互功能,适合作为企业官网或咨询公司展示站点的基础模板。
## 技术栈
- Bootstrap 5(响应式布局框架)
- 原生 HTML5 / CSS3 / JavaScript
- 自定义 Web Components(StickyHeader、ScrollTop、DrawerOpener)
- Google Fonts(Inter + Poppins)
- AOS(Animate On Scroll 动画库)
## 项目结构
```
consulohtml-10/Consulo HTML/
├── index.html # 首页入口
├── about.html # 关于我们
├── blog.html # 博客列表
├── blog-list.html # 博客列表页
├── blog-details.html # 博客详情
├── services.html # 服务列表
├── service-details.html # 服务详情
├── project.html # 项目展示
├── project-details.html # 项目详情
├── team.html # 团队成员
├── team-details.html # 成员详情
├── pricing-plan.html # 定价方案
├── contact.html # 联系我们
├── faq.html # 常见问题
├── error.html # 错误页面
├── privacy-policy.html # 隐私政策
├── terms-condition.html # 使用条款
└── assets/
├── css/ # 编译后的样式文件
├── scss/ # SCSS 源码(可自定义变量)
├── js/
│ ├── main.js # 核心交互逻辑
│ └── vendor.js # 第三方依赖
└── img/ # 图片资源
```
## 核心文件说明
- `index.html` — 首页模板,包含 Hero 区域和服务展示
- `assets/js/main.js` — 实现粘性导航、滚动置顶按钮、抽屉菜单的 Web Components
- `assets/css/style.css` — 主样式表,定义了完整的设计系统变量(颜色、字体、间距等)
- `assets/scss/` — SCSS 源码目录,可通过修改变量自定义主题
- `contact.html` — 包含联系表单布局,表单提交逻辑需后端对接
- `assets/css/base.css` — CSS 基础重置与工具类
## 快速开始
1. 直接在浏览器打开 `consulohtml-10/Consulo HTML/index.html` 即可预览全部页面
2. 如需修改样式,建议使用 SCSS 源码重新编译:
- 安装依赖:`npm install`
- 编译 SCSS:`npm run sass`
3. 模板使用 Google Fonts CDN,无需额外安装字体
## 使用建议
该模板适合快速搭建企业官网,页面结构完整但无后端逻辑,联系表单等交互功能需要自行对接后端服务。模板样式通过 CSS 变量集中管理,可通过修改 `assets/css/style.css` 顶部的 `:root` 变量快速调整品牌配色和字体。
help_outline
FAQ
Comments0
PublishedDec 7, 2025
Tech Stack
HTML
Tags
bootstrap 5Business Consultantconsultancyconsultingconsulting companyconsulting firmscorporatecreative agencycreative businesscreative designcreative porfoliodigitalmarketingstartuptechnology