餐厅单页 Bootstrap 5 模板 | Sarab – 菜单筛选与预订界面

Sarab 适合把一家餐厅的菜单、门店信息和预订入口放在同一页。访客可以先看菜品与价格，再往下了解环境、营业时间和到店安排。它采用 Bootstrap 5，正式页面入口是 index.html，不需要 npm 或编译步骤；预订、联系与线上点单的后端仍需另接。

首屏与六个菜品分类先回答“这里有什么可吃”，菜单之后是促销、食物图库、发展时间线、厨师和营业时间。评价轮播与预订区接近后段，联系信息收在页尾。对一家以到店消费为主的餐厅，这条路径能把菜品和门店放在一起介绍，访客不用在多个页面之间来回寻找。

首屏还包含顶部联系方式、粘性导航、搜索浮层和四项演示数字。菜单区有六张菜品卡片，之后是五张食物图库、发展时间线、四位厨师与营业安排；页尾的三篇博客卡片、订阅和社交链接也需要按实际经营内容取舍。

内容多不意味着必须全部保留。新店没有长年品牌历史时，可以缩短时间线，把篇幅留给菜单与位置；没有持续更新文章的打算，也可以去掉博客卡片。客户数字、厨师资料和顾客评价都是演示内容，应换成真实且可公开使用的信息。导航主要跳转到当前页的区块，没有独立商品详情、结算或会员页面。

一张菜品卡片，有两套需要同步的内容

分类值要在各入口对应

菜单会按外层卡片的 data-c 显示或隐藏菜品。新增分类时，需要让这些入口指向同一个类别值：

• 菜单筛选按钮：data-f。
• 上方分类卡片：data-filter。
• 搜索浮层的分类按钮：data-cat。

这些入口都用于筛选外层卡片，只改按钮显示的中文名称，不会改变筛选类别。

换菜名、图片和价格，按这个顺序处理

js/main.js 从卡片属性读取内容并填入详情弹窗。列表里的可见文字和弹窗数据要一起改：

1. 先更新卡片上显示的菜名、图片、价格和分类。
2. 同步卡片的 data-title、data-img、data-price 与 data-desc，再核对评分、热量、制作时间和标签等属性。
3. 打开对应弹窗，确认名称、图片、价格与列表一致；否则卡片已经换了菜，弹窗仍可能显示旧内容。

搜索浮层里的分类按钮能触发筛选，趋势词则只填入输入框，手动输入关键词尚没有搜索逻辑。弹窗的数量按钮能加减，“加入购物车”会增加页面顶部的计数并显示反馈，但没有保存商品明细或订单。要支持外卖点单，仍需要独立设计购物车、库存、支付与履约流程。

门店气质由配色、照片和字体一起构成

css/style.css 顶部的红色 --primary、橙色 --secondary 与奶油背景控制按钮、标签和主要区块。红橙组合与快餐、促销内容比较贴近；换成咖啡馆或更安静的餐厅时，可以连同首屏照片、菜品图片和装饰字一起调整，只换 Logo 难以改变整页的气质。

正文使用 Poppins，标题用 Playfair Display，手写装饰字用 Dancing Script，均通过 Google Fonts 加载；Font Awesome 与 Icomoon 图标字体则随包提供。食物图库支持大图、前后切换和 Esc 关闭，评价轮播在 640px 与 1024px 断点增加同屏卡片数量。图库适合放真实菜品与店内环境，评价轮播的卡片应换成有依据的内容。

预约成功和活动时限，不能沿用演示反馈

收到申请，不等于确认座位

预订区提供姓名、电话、邮箱、人数、日期、时间和特殊要求，可以用来录入到店预约信息。但当前按钮只等待约 1.5 秒就展示成功提示，没有向服务器提交，也没有检查座位是否可预约。联系区采用相同的定时反馈，订阅仅检查输入是否包含 @。

接入预订服务后，要明确“申请已收到”和“座位已确认”的区别，补上必填校验、错误提示、重复提交处理和隐私说明。联系区也需要实际收件接口，订阅则需连接真实服务。

倒计时需要对应真实结束时间

促销倒计时并不对应实际截止日期：脚本从 8 小时 45 分 30 秒开始递减，到零后重新循环。真实限时活动需要改为对应的结束时间，或移除这段展示。

样式与脚本按 css、js、webfonts 和 img 目录组织，Bootstrap、AOS、Swiper 等资源随包提供，菜单和图库由自定义脚本控制。保持引用路径即可从静态文件开始修改；删掉区块时，也需要处理引用它的脚本，避免剩余交互继续寻找已经不存在的元素。