Barab – 快餐和餐厅 HTML 模板 preview 1

Barab – 快餐和餐厅 HTML 模板

bookmark

Barab 是一套面向快餐店与餐饮场景的静态 HTML 模板，包含首页、菜品展示、购物车、博客、预约等 20+ 完整页面，无需后端即可本地预览。适合快速搭建餐饮品牌官网或外卖店铺落地页。

HTMLbarbistrobookingbootstrapcafecheffood

项目简介

Barab 是一套面向快餐店与餐饮场景的静态 HTML 模板，包含首页、菜品展示、购物车、博客、预约等 20+ 完整页面，无需后端即可本地预览。适合快速搭建餐饮品牌官网或外卖店铺落地页。

技术栈

  • Bootstrap 5（栅格与基础组件）
  • jQuery（DOM 操作与交互）
  • GSAP（动画）
  • Swiper（轮播）
  • Isotope（筛选布局）
  • Font Awesome 6 Pro（图标）
  • Google Fonts（Barlow Condensed / Inter / Bangers）

项目结构

text
barabhtml-10/
├── documentation/          # 官方文档入口
│   ├── index.html
│   └── assets/
├── download-version/       # 实际使用版本
│   ├── index.html          # 首页
│   ├── about.html          # 关于
│   ├── menu-list.html      # 菜单列表
│   ├── shop.html           # 商品页
│   ├── cart.html           # 购物车
│   ├── contact.html        # 联系/预约
│   ├── blog.html           # 博客列表
│   ├── reservation.html    # 订座
│   └── assets/
│       ├── css/style.css   # 主题样式
│       ├── js/main.js      # 交互逻辑
│       └── sass/           # SCSS 源码

核心文件说明

  • download-version/index.html — 首页入口，含 Banner、菜品、评价等完整区块
  • download-version/assets/css/style.css — 主题全部样式（含 CSS 变量定义与组件样式）
  • download-version/assets/js/main.js — 移动端菜单、滚动置顶、回到顶部、轮播等交互实现
  • download-version/assets/sass/style.scss — SCSS 源码，方便按需修改主题变量
  • download-version/mail.php — 联系表单/预约表单的后端处理脚本

快速开始

无需安装任何依赖，直接用浏览器打开 download-version/index.html 即可预览。实际部署时将 download-version 目录内容上传到服务器即可。

如需修改样式，推荐使用 VS Code + Live Sass Compiler 插件编辑 sass/style.scss，输出到 css/style.css。

使用建议

该模板预设了完整的电商与餐厅业务模块，直接替换图片、文字和联系方式即可使用，无需额外开发。表单功能依赖 mail.php，部署时需确保服务器支持 PHP。

help_outline

常见问题