概述

相关源文件

• CHANGELOG.md
• LICENSE
• README.md
• docs/_data/meta.json
• docs/_layouts/post.html
• docs/_posts/2021-01-12-new-feature-icon-text.md
• docs/blog.html
• docs/documentation/elements/form.html
• docs/documentation/start/alternative-versions.html
• docs/more.html

本文档提供了 Bulma 的高层技术概述。Bulma 是一个基于 Flexbox 的现代 CSS 框架。它涵盖了 Bulma 的架构、组件系统、构建流程和自定义功能。有关具体的实现细节，请参阅相应的 wiki 部分，例如 SASS 架构、组件 或 构建系统。

框架理念

Bulma 被设计为一个纯 CSS 框架，没有 JavaScript 依赖。它作为 Web 应用程序的表示层，允许开发人员独立实现自己的逻辑。该框架是模块化的、响应式的，并且可以通过其变量系统进行高度定制。

来源

• README.md53-59
• CHANGELOG.md83-90

文件结构和组织

Bulma 的源代码组织成层次结构的 Sass 文件，形成了分层式的样式方法。

这种结构反映了框架组件的层层构建方式

1. 工具类：定义系统的核心函数、变量和 mixin
2. 基础样式：通用的重置样式和基础元素样式
3. 元素：简单的 UI 组件（按钮、表单等）
4. 组件：由元素构建的复杂 UI 组件
5. 布局：页面结构组件
6. 辅助类：用于常见样式任务的实用类

来源

• CHANGELOG.md93-96

构建流程与分发

Bulma 的源文件通过构建流程进行处理，为不同的使用场景生成多个 CSS 输出。

替代版本适用于特定用例

版本	目的	主要功能
标准	完整框架	所有组件和辅助类
带前缀	避免命名冲突	类名带前缀 bulma-
无辅助工具	文件更小	仅核心组件，无辅助类
无深色模式	仅浅色主题	移除深色模式主题支持

来源

• docs/documentation/start/alternative-versions.html70-172
• CHANGELOG.md98-105

CSS 变量系统与主题化

从 1.0 版本开始，Bulma 实现了一个全面的 CSS 变量系统，无需重新编译 Sass 代码即可进行主题化和自定义。

变量遵循以 --bulma- 作为前缀的命名约定。此系统支持

1. 通过 CSS 进行运行时自定义
2. 深色模式实现
3. 组件特定的主题化
4. 调色板生成

来源

• CHANGELOG.md95-103

组件架构

Bulma 的组件以分层架构组织，每一层都建立在前一层的基础上。

这种分层方法意味着

• 元素是独立的，可以独立使用
• 组件将多个元素组合成更复杂的 UI 结构
• 布局组件提供页面级组织

来源

• CHANGELOG.md83-90
• docs/_posts/2021-01-12-new-feature-icon-text.md10-49

集成方法

Bulma 可以通过多种方式集成到项目中

方法	命令/链接	备注
npm	npm install bulma	现代项目首选
Yarn	yarn add bulma	替代包管理器
CDN	jsDelivr 或 CDNJS	快速原型制作，无需构建步骤
直接下载	bulma.io 网站	适用于独立项目

安装后，您可以通过以下方式在项目中愉快地使用 Bulma：

1. 直接导入 CSS 文件
2. 导入 Sass 源代码文件（用于自定义）
3. 使用替代版本之一

来源

• README.md15-49
• docs/_data/meta.json1-22

版本历史与演进

Bulma 自成立以来经历了显著的演变，主要里程碑包括

• v0.x：初始开发，包含基本组件集
• v1.0：使用 Dart Sass 重写，引入 CSS 变量系统
• v1.0.x：改进、错误修复和附加的辅助功能

随时间添加的关键功能包括

• 深色模式支持
• 用于主题化的调色板
• 骨架加载器
• 类名选项
• 基于 CSS 变量的自定义
• 响应式组件

来源

• CHANGELOG.md3-180
• LICENSE1-22 (MIT 许可)

框架对比

作为一个纯 CSS 框架，Bulma 在前端生态系统中保持着独特的地位

方面	Bulma	其他 CSS 框架	JS 组件库
依赖项	无（仅 CSS）	通常最小	通常相当大
JavaScript	不包含 JS	通常包含 JS	必填
定制	Sass 变量 & CSS 变量	可变	组件属性
大小	轻量	可变	通常更大
集成	任何 Web 项目	任何 Web 项目	特定生态系统

这种理念使得 Bulma 成为那些

• 需要样式而无需框架锁定的项目的理想选择
• 希望实现自己的 JavaScript 逻辑的项目
• 倾向于分离表示和行为的项目

来源

• README.md53-59

Bulma 仍在积极维护中，定期更新和改进，专注于提升开发者体验，同时保持其简洁、模块化和可定制的核心原则。