Foundation 提供灵活网格与丰富组件，通过 .grid-container、.grid-x 和 .cell 实现响应式布局，支持多设备适配；结合 .button、.top-bar 等类快速构建按钮、导航等界面元素，提升开发效率。
Foundation 是一个强大的前端框架，适合快速构建响应式网站。它提供了灵活的网格系统和丰富的 UI 组件，能大幅减少开发时间。只要掌握其核心结构，就能高效搭建专业级页面布局。
使用 Foundation 网格系统实现响应式布局
Foundation 的网格基于 Flexbox，支持多种屏幕尺寸自动适配。通过简单的类名即可划分行与列。
基本用法如下：
- .grid-container：作为最外层容器，居中内容并限制宽度
- .grid-x：定义一行，内部包含多个列
- .cell：表示单个列单元，默认占满整行
- 可添加 .small-12 .medium-6 .large-4 控制不同设备下的宽度
例如，创建一个两栏布局，桌面各占一半，移动端堆叠：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
<div class="grid-x">
<div class="cell small-12 medium-6">左侧内容</div>
<div class="cell small-12 medium-6">右侧内容</div>
</div>
</div>
调用 Foundation 组件提升开发效率
Foundation 内置按钮、导航、卡片、表单等常用组件，直接使用类名即可生效。
- 按钮：用 .button 创建基础按钮，加上 .primary、.success 区分状态
- 导航栏：使用 .top-bar 搭建顶部导航，配合 .dropdown 实现下拉菜单
- 卡片：用 .card 包裹图文内容，自动带边框和圆角
- 表单控件：输入框、选择器加上 Foundation 样式后更统一美观
这些组件默认响应式，无需额外设置就能在手机上正常显示。
自定义样式与响应断点设置
虽然 Foundation 提供默认样式，但常需根据设计调整外观。可通过覆盖 SCSS 变量或添加自定义 CSS 实现。
- 修改颜色、字体、间距等变量，在编译前重新设定主题
- 利用 @media 查询补充特定屏幕下的布局调整
- 保持语义化结构的同时，增强视觉表现力
注意不要破坏原有网格逻辑，确保跨设备一致性。
基本上就这些。熟练运用 Foundation 的网格和组件，再结合少量定制，就能快速产出高质量页面。不复杂但容易忽略细节，比如类名拼写和嵌套层级，多练习几次就顺了。
