Xton - 电子商务商店 Bootstrap 5 模板 preview 1

Xton - 电子商务商店 Bootstrap 5 模板

bookmark

Xton 是一套多页面的电商 HTML 模板，基于 Bootstrap 5.x 和 jQuery 3.7.1 构建，适合服装、化妆品、在线零售等电商网站快速落地。模板内置 RTL 版本，支持阿拉伯语和希伯来语。纯静态页面，无需构建工具即可运行。

HTML

项目简介

Xton 是一套多页面的电商 HTML 模板，基于 Bootstrap 5.x 和 jQuery 3.7.1 构建，适合服装、化妆品、在线零售等电商网站快速落地。模板内置 RTL 版本，支持阿拉伯语和希伯来语。纯静态页面，无需构建工具即可运行。

技术栈

  • Bootstrap 5.x（响应式布局框架）
  • jQuery 3.7.1
  • Sass（样式预处理）
  • OWL Carousel / Slick（轮播组件）
  • Nice Select / MeanMenu（表单与导航插件）
  • Magnific Popup（灯箱效果）

项目结构

text
xtonhtml-10/
├── xton-ecommerce-html-template/
│   ├── documantation/          # 文档页面（含使用说明）
│   │   ├── index.html
│   │   ├── css/style.css
│   │   └── js/main.js
│   └── xton/                   # 模板主目录
│       ├── index.html          # 首页
│       ├── assets/
│       │   ├── css/            # 样式文件
│       │   ├── js/             # 脚本文件
│       │   └── img/            # 图片资源
│       ├── about.html
│       ├── blog-*.html
│       ├── products-*.html
│       └── [其他页面...]

核心文件说明

  • xton/index.html — 首页入口，包含顶部导航、轮播、精选商品等模块
  • xton/assets/css/style.css — 主样式表（含暗色主题 dark.css）
  • xton/assets/css/responsive.css — 响应式适配样式
  • documantation/index.html — 模板官方文档，说明定制方法与组件配置
  • documantation/css/style.css — 文档页样式，定义了 Raleway / Work Sans 字体与主色 #3d5198
  • xton/assets/js/main.js — 全局交互脚本（侧边栏锚点滚动等）

快速开始

直接用浏览器打开 xtonhtml-10/xton-ecommerce-html-template/xton/index.html 即可预览。若需本地服务器（推荐），可在 xton 目录执行：

bash
npx serve .
# 或
python -m http.server 8080

使用建议

  • 所有页面均在 xton/ 目录下，通过复制已有 HTML 文件快速新增商品、博客、分类等页面
  • 更换主色只需在 style.css 中修改变量 --primaryColor
  • 模板附带 RTL 版本（xton-rtl 文件夹），直接替换 CSS 路径即可支持阿拉伯语/希伯来语排版
help_outline

常见问题