框架变体

目的与范围

本文档解释了 Bulma CSS 框架的不同变体以及何时使用它们。Bulma 提供了几种专门的构建版本，以满足特定的用例，使开发人员能够仅包含他们所需的功能来优化其样式表。这些变体作为核心仓库的一部分进行官方维护，并提供了减小文件大小或避免 CSS 类名冲突的选项。

有关通过 Sass 变量和其他方法自定义 Bulma 的信息，请参阅自定义。

变体概述

除了标准构建之外，Bulma 还提供了四个主要的框架变体

标准 Bulma：包含所有功能的完整框架
无暗黑模式：Bulma 不支持暗黑模式
无辅助类：Bulma 不包含实用辅助类
无辅助类（带前缀）：Bulma 不包含辅助类，并且类名带有前缀
带前缀：Bulma 包含所有功能，但使用带前缀的类名

变体比较

下表比较了每个变体中可用的功能

变体	暗模式	辅助类	带前缀的类	文件大小（压缩后）
标准 Bulma	✅	✅	❌	657KB
无深色模式	❌	✅	❌	546KB
无辅助工具	✅	❌	❌	468KB
无辅助类（带前缀）	✅	❌	✅	505KB
带前缀	✅	✅	✅	710KB

来源：package.json38-46 css/bulma.min.css css/versions/bulma-no-dark-mode.min.css css/versions/bulma-no-helpers.min.css css/versions/bulma-no-helpers-prefixed.min.css css/versions/bulma-prefixed.min.css

变体构建过程

Bulma 的变体构建是通过项目 package.json 中定义的专用 SCSS 文件和构建过程来构建的。

来源：package.json38-50

变体详细说明

标准 Bulma

Bulma 的完整版本包含所有功能、组件和实用程序。这是大多数用户开始使用的默认版本。

优点

包含所有组件和实用程序的完整功能集
支持暗黑模式，用于浅色/深色主题
用于快速样式的辅助类

文件大小：压缩后 657KB

适用场景：需要完整功能集，且文件大小不是关键考虑因素。

无暗黑模式变体

此变体不包含暗黑模式支持，文件大小约减小 17%。

优点

比标准 Bulma 文件更小
保留所有组件和辅助类
适用于具有自定义主题或无暗黑模式需求的项目的

文件大小：压缩后 546KB（比标准版小 17%）

适用场景：项目不需要暗黑模式支持，并希望在保留所有其他功能的同时减小 CSS 文件大小。

来源：css/versions/bulma-no-dark-mode.css css/versions/bulma-no-dark-mode.min.css

无辅助类变体

此变体不包含 Bulma 的实用辅助类，导致文件大小显著减小（约减小 29%）。核心组件和功能保持不变，包括暗黑模式支持。

优点

文件大小显著减小
保留所有核心组件和暗黑模式
非常适合与其他辅助系统或自定义 CSS 结合使用

文件大小：压缩后 468KB（比标准版小 29%）

适用场景：在使用其他辅助库（如 Tailwind CSS）、编写自己的辅助类，或希望仅使用 Bulma 的组件类而不使用辅助类时。

来源：css/versions/bulma-no-helpers.css css/versions/bulma-no-helpers.min.css

无辅助类（带前缀）变体

此变体结合了移除辅助类的功能，并为所有类名添加了 bulma- 前缀。这提供了更小的构建版本，同时还避免了潜在的类名冲突。

优点

比标准 Bulma 文件更小
避免与其他框架的类名冲突
支持暗黑模式

文件大小：压缩后 505KB（比标准版小 23%）

适用场景：需要将 Bulma 与其他可能存在类名冲突的 CSS 框架或库集成，且不需要辅助类时。

来源：css/versions/bulma-no-helpers-prefixed.css css/versions/bulma-no-helpers-prefixed.min.css

带前缀变体

此变体保留了所有 Bulma 功能，但为所有类名添加了 bulma- 前缀，以防止与其它 CSS 框架或您自己的自定义样式发生命名冲突。

优点

带前缀类名的完整功能集
避免与其他框架的类名冲突
在 HTML 标记中提供清晰的视觉分离

文件大小：压缩后 710KB（比标准版大 8%，因为类名更长）

适用场景：需要将 Bulma 与其他 CSS 框架集成，或存在可能与 Bulma 类名冲突的现有样式，并且希望保留所有 Bulma 功能时。

来源：css/versions/bulma-prefixed.css css/versions/bulma-prefixed.min.css

功能细分

下图说明了每个变体包含哪些功能

来源：package.json38-46 css/versions/bulma-no-dark-mode.css css/versions/bulma-no-helpers.css css/versions/bulma-prefixed.css

与构建过程集成

框架变体是使用 package.json 文件中定义的 npm 脚本构建的。每个变体都有自己的构建脚本，用于将 SCSS 源文件编译成 CSS。

来源：package.json38-47

使用变体

要在您的项目中使用的特定 Bulma 变体

通过 CDN 安装

在 HTML 中包含特定的变体 CSS 文件

NPM 安装

安装 Bulma
在 SCSS 或 CSS 中导入特定的变体

带前缀变体中的类命名

当使用带前缀的变体时，所有 Bulma 类名都以 bulma- 开头。以下是一些标准 Bulma 类如何映射到其带前缀等效类的示例：

标准类	带前缀的类
`.button`	`.bulma-button`
`.container`	`.bulma-container`
`.navbar`	`.bulma-navbar`
`.is-primary`	`.bulma-is-primary`
`.column`	`.bulma-column`
`.section`	`.bulma-section`

来源：css/versions/bulma-prefixed.min.css css/versions/bulma-no-helpers-prefixed.min.css

变体选择指南

以下指南可以帮助您选择合适的 Bulma 变体

选择标准 Bulma：当您需要所有功能，并且不关心文件大小或类名冲突时。
选择无暗黑模式：当您的项目不需要暗黑模式，并希望减小文件大小时。
选择无辅助类：当您正在使用其他辅助库或编写自己的辅助类时。
选择无辅助类（带前缀）：当您需要避免类名冲突且不需要辅助类时。
选择带前缀：当您需要将 Bulma 与其他 CSS 框架集成，并且需要所有 Bulma 功能时。

结论

Bulma 的框架变体提供了灵活的选项来优化文件大小和避免类名冲突。通过选择合适的变体，您可以根据项目的特定需求来定制 Bulma，无论是最小化文件大小还是确保与其他框架和库的兼容性。