Foundation框架提供响应式菜单和按钮组件，通过Top Bar实现自动折叠的导航，配合预设CSS类如.button、颜色、大小及圆角样式快速构建交互元素，结合viewport设置与网格布局优化移动端体验。
Foundation 是一个强大的前端框架，内置了响应式设计工具，能快速搭建适配手机、平板和桌面的菜单与按钮。使用它的 CSS 组件，无需写额外 JavaScript 就能实现常见的交互效果。
响应式导航菜单（Top Bar）
Foundation 提供 Top Bar 组件，自动在小屏幕上折叠为汉堡菜单。
基础结构如下：
这个菜单在屏幕变窄时会自动隐藏列表项，只显示“菜单”按钮。点击后展开垂直列表。
使用按钮样式
Foundation 提供多种预设按钮样式，只需添加对应 class 即可。
立即学习“前端免费学习笔记（深入）”；
常用按钮类型：-
基础按钮：
.button -
颜色区分：可用
.secondary、.success、.alert、.warning -
大小控制：支持
.tiny、.small、.large、.expand（全宽） -
圆角或无边框：用
.radius或.round
确认操作
删除
全宽按钮
移动端适配技巧
为了让菜单和按钮在移动设备上体验更好，注意以下几点：
- 确保页面头部包含响应式 meta 标签：
- 按钮文字不要太长，避免在小屏换行错位
- 可为菜单添加
data-options="is_hover: false"防止误触 - 利用 Foundation 的网格类控制按钮布局，如
class="small-6 medium-4 columns"
