项目简介link

WebFlux 是一套基于 Bootstrap 的多页面商业网站模板，提供首页三套变体（index / index2 / index3），内置关于我们、博客、商店、产品详情、团队、案例、定价等完整页面，适合快速搭建企业官网或电商展示站点。

技术栈link

• Bootstrap 5（CSS 框架）
• Owl Carousel 2（轮播组件）
• jQuery UI Slider（价格区间滑块）
• Font Awesome 6（图标库）
• PHP（联系表单后端处理）

项目结构link

webfluxhtml-10/
  documentation/
  webflux/
    index.html        # 首页变体一
    index2.html       # 首页变体二
    index3.html       # 首页变体三
    about.html        # 关于我们
    blog.html         # 博客列表
    shop.html         # 商城
    product-detail.html
    cart.html
    checkout.html
    contact.html      # 联系页
    contact-form.php  # 表单后端
    team.html
    testimonial.html
    pricing.html
    project.html
    services.html
    assets/
      bootstrap/
        bootstrap.min.css
      css/
        custom.css, responsive.css
        owl.carousel.min.css
        priceslider.css
      images/

核心文件说明link

• index.html — 主入口页面，包含 Banner、服务特色、案例展示等区块
• contact-form.php — 处理 contact.html 提交的数据，发送邮件至指定地址
• assets/css/priceslider.css — jQuery UI 价格滑块样式，用于商城筛选
• assets/bootstrap/bootstrap.min.css — Bootstrap 核心样式表
• assets/css/owl.carousel.min.css + owl.theme.default.min.css — 轮播组件样式
• shop.html — 商城列表页，含分类筛选与价格滑块

快速开始link

1. 直接在浏览器打开 webflux/index.html 预览完整效果
2. 若需使用联系表单，请将整个 webflux 文件夹部署至支持 PHP 的 Web 服务器
3. 修改 contact-form.php 中的 $to_email 为实际收件邮箱

使用建议link

• 本模板为纯静态页面，适合直接修改 HTML/CSS 内容后部署至任意静态托管服务
• 联系表单依赖 PHP mail() 函数，线上环境建议替换为 SendGrid / PHPMailer 等更可靠的邮件方案
• 页面中大量使用绝对定位和固定高度，移动端适配需额外关注 responsive.css 中的断点样式