在React生态中，Foundation和Bulma都属于纯CSS框架，不绑定特定组件库，因此很多团队会在项目早期选用Foundation，后期因文档活跃度或社区偏好转向Bulma。这种迁移并不是简单改一行CDN链接，而是涉及类名体系、响应式断点、Sass变量以及React组件结构的一整套调整。理解两个框架的设计差异，才能避免在重构过程中出现布局错乱和样式冲突。
核心差异：栅格与响应式断点设计
Foundation的栅格系统以xy-grid为基础，使用grid-x、cell以及medium-6这类尺寸类来控制列宽。它的断点通过Sass变量定义，默认包含small、medium、large等，且支持自动堆叠。在React中，开发者常把grid-x写在容器组件上，子元素用cell配合尺寸类实现响应排布。这种写法对IE支持较好，但类名冗长，嵌套时容易混淆。
Bulma则采用更简洁的columns与column结构，断点以移动优先为原则，修饰类如is-half、is-4直接表达占比，并用is-hidden-tablet等控制显隐。在React项目里，Bulma的扁平类名让JSX更可读。需要注意的是，Bulma的平板断点默认是769px，而Foundation的medium通常是640px，直接迁移会导致中屏设备布局偏移，必须统一断点变量或添加兼容类。
下面是一段Foundation栅格的React写法，以及对应的Bulma改写。可以看到结构相似，但类名完全不兼容，这也是迁移时必须做映射的原因。
// Foundation写法
function CardRow() {
return (
<div className="grid-x grid-margin-x">
<div className="cell medium-6">左侧内容</div>
<div className="cell medium-6">右侧内容</div>
</div>
);
}
// Bulma写法
function CardRow() {
return (
<div className="columns">
<div className="column is-half-tablet">左侧内容</div>
<div className="column is-half-tablet">右侧内容</div>
</div>
);
}
在React项目中的集成与构建方式
Foundation官方提供foundation-sites包，通常通过Sass引入并配合Webpack或Vite的样式加载器。在React中，可以在入口文件index.js里import 'foundation-sites/dist/css/foundation.min.css'，也可以使用Sass定制。它的JavaScript部分（如响应式菜单）依赖jQuery，这在现代React应用中往往显得累赘，很多团队只引入CSS部分。
Bulma是纯CSS框架，没有JS依赖，在React中集成极为轻便。可以通过npm install bulma后，在全局样式文件用@import 'bulma/bulma.sass'，或直接引入编译好的CSS。由于Bulma使用CSS变量和Sass，定制主题只需覆盖$primary等变量，而不必像Foundation那样修改整条栅格混合宏。对于使用Vite的React项目，Bulma的Tree-Shaking不佳，但可通过只引入所需sass模块来减小体积。
若项目原先依赖Foundation的JS插件（如Reveal弹窗），迁移到Bulma时要改用React状态控制显隐，或用Bulma的modal类配合React条件渲染。下面示例展示用React state实现Bulma模态框，替代Foundation的jQuery插件。
import { useState } from 'react';
function BulmaModal() {
const [open, setOpen] = useState(false);
return (
<div>
<button className="button is-primary" onClick={() => setOpen(true)}>打开</button>
{open && (
<div className="modal is-active">
<div className="modal-background" onClick={() => setOpen(false)}></div>
<div className="modal-content">
<p>这是一个Bulma模态框</p>
</div>
<button className="modal-close is-large" onClick={() => setOpen(false)}></button>
</div>
)}
</div>
);
}
平滑迁移的实施步骤与避坑策略
直接全局替换类名风险极高，推荐采用包装组件逐步迁移。先建立一个Grid组件，内部根据配置输出Foundation或Bulma结构，新页面用Bulma，旧页面暂留Foundation，待验证后再删旧代码。这样能保证线上功能不中断，也方便团队并行开发。同时，在CI中运行视觉回归测试，对比迁移前后页面截图，防止断点差异引发错位。
另一个常见坑是表单元素。Foundation的input使用form-label和help-text，Bulma则用label和help。在React受控表单中，需同步修改className并确认校验样式。Bulma的is-danger等状态类要手动加到input或select上，而Foundation常用is-invalid配合span提示。建议抽离表单字段组件，统一接收error属性来输出对应框架的类名。
最后，清理依赖时别忘记移除Foundation的Sass变量文件和jQuery引用。若构建工具配置了Foundation的PostCSS插件，也应一并删除。迁移完成后，可对比打包体积：Bulma全量约40KB gzip，Foundation CSS加JS常超100KB，在React这类已具备交互能力的项目中，换用Bulma能明显降低冗余。以下脚本演示如何封装跨框架按钮，减少业务层改动。
function UiButton({ framework, children, onClick }) {
const cls = framework === 'bulma' ? 'button is-primary' : 'button success';
return <button className={cls} onClick={onClick}>{children}</button>;
}
通过上述分层封装与渐进替换，React应用可以从Foundation平稳过渡到Bulma，既享受更轻量的响应式体系，也保持代码可维护性。迁移核心在于断点对齐与组件抽象，而非盲目替换样式文件。
ReactBulmaFoundation修改时间：2026-08-16 09:14:30