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"










