CSS 框架 词条目录
前端Wiki/词条/Bulma

Bulma

定义纯 CSS、无 JS 依赖的现代响应式框架,语法优雅、组件克制,适合轻量页面快速成型

Bulma 的最大卖点是纯粹:整个框架不包含一行 JS,交互(模态、下拉)只靠 CSS 状态或你自己写脚本。它整体基于 Flexbox 构建,类名高度语义化(button is-primary is-large),读起来像英文句子;默认配色克制现代,不花哨,适合落地页、文档站、内部小工具这类轻量页面快速成型。

没有 JS 是双刃剑:不依赖任何框架、引入一个文件就能跑,但复杂交互全靠自己补,对需要完整后台管理系统、密集表单交互的团队不够用。它用 Sass 编写并 MIT 开源,定制主题只需改几组颜色与间距变量;columns、navbar、modal 等组件相当克制,覆盖常见页面结构的七八成,剩下靠工具类自己微调。生态和中文资料远不如 Bootstrap 丰富,但官方文档示例质量一直很高,查起来很舒服。

HTML
<style>
  .button { border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; }
  .is-primary { background: #00d1b2; color: #fff; }
  .is-large { font-size: 18px; }
</style>
<button class="button is-primary is-large">Bulma 风格按钮</button>
⚠ 常见误区
🔗 相关词条栅格工具类
← 返回来源章节栅格