bulma

项目概述

Bulma 是一个基于 Flexbox 的现代 CSS 框架，只输出单个 CSS 文件，不绑定任何 JavaScript，因此可以与 Vue、React 等任意前端栈自由组合。它提供完善的栅格、排版、表单与组件体系，并通过 is-、has- 修饰符实现灵活的状态控制。Sass 源文件完全开放，开发者可以修改变量定制主题后自行编译。框架借助 autoprefixer 保证 Flexbox 特性在主流浏览器上的一致表现。

项目	内容
类型	CSS 框架
布局引擎	Flexbox
依赖	无 JavaScript
许可	MIT

纯 CSS 无 JS 的轻量框架，用类名就能拼出整齐的响应式页面。

主要功能

• 纯 CSS 输出：单个 bulma.css 开箱即用，也可引入 Sass 源码定制变量
• Flexbox 栅格：基于弹性布局的列系统，天然支持垂直居中与等高排列
• 组件体系：内置导航栏、卡片、消息框、下拉、标签页、模态框等常用组件
• 修饰符语法：is-、has- 类名控制颜色、尺寸与状态，语义直观
• 响应式设计：断点体系覆盖移动端到超宽屏，移动优先
• 结构行为分离：交互组件只提供结构样式，行为由项目自己的 JS 驱动

适用人群

• 前端开发者
• 不想引入 JS 组件库的项目
• 原型与后台界面搭建者
• 喜欢定制 Sass 变量的团队

快速上手

1. 通过 npm 安装

   npm install bulma

2. 在项目中引入样式

   @import 'bulma/css/bulma.css'

3. 也可通过 jsDelivr CDN 直接引入压缩版 CSS
4. 参考项目文档复制所需组件的类名结构，开始搭建页面

核心优势

• 零 JS 依赖：样式层与逻辑层彻底解耦，适配任何技术栈
• 易学易用：类名语义化，看名字即可猜出效果
• 高度可定制：Sass 变量驱动，改几个变量即可换肤

系统要求

项目	要求
浏览器	Chrome、Edge、Firefox、Opera、Safari 近期版本
兼容性	IE 10+ 部分支持
引入方式	npm、yarn、Bower 或 CDN

注意事项

• 无内置交互：下拉、模态等组件只有样式与结构，需自行绑定事件
• IE 支持有限：老版本 IE 下 Flexbox 特性表现不全