安装与使用

安装方法

根据您的项目设置和偏好，可以通过多种方法安装 Bulma。

包管理器

您可以使用您喜欢的包管理器安装 Bulma

CDN

对于快速原型设计或小型项目，您可以直接从 CDN 使用 Bulma

jsDelivr 服务提供了对 README 中引用的 Bulma 文件的可靠 CDN 访问。

安装图表

来源： README.md16-49 package.json2-13 package.json54-61 bower.json1-27

文件结构

安装后，Bulma 同时提供编译后的 CSS 文件和源 Sass 文件。

CSS 文件

Bulma 提供的核心 CSS 文件包括：

文件	描述	用于
`css/bulma.css`	展开的 CSS 文件，具有完整格式	开发
`css/bulma.min.css`	最小化的 CSS 文件	生产
`css/versions/bulma-no-dark-mode.css`	不支持深色模式的版本	减小的文件大小
`css/versions/bulma-no-helpers.css`	不包含辅助类的版本	最小化设置
`css/versions/bulma-no-helpers-prefixed.css`	不包含辅助类，带有前缀类	避免冲突
`css/versions/bulma-prefixed.css`	所有类都带有前缀	避免冲突

源文件

Bulma 提供其 Sass 源文件以供自定义

bulma/
├── bulma.scss             # Main entry file
├── sass/
│   ├── utilities/        # Mixins, functions, variables
│   ├── base/             # Reset and basic styles
│   ├── elements/         # Basic UI elements
│   ├── components/       # Complex UI components
│   ├── layout/           # Layout containers
│   └── helpers/          # Helper classes
└── versions/             # Framework variants source

来源： package.json54-61 README.md55-59 bower.json1-27

用途

基础 HTML 用法

要在您的项目中使用 Bulma，只需包含 CSS 文件

使用 CSS 导入

您可以在 CSS 文件中导入 Bulma

使用 Sass

要在 Sass 中使用 Bulma 进行自定义

构建系统图

来源： README.md39-50 package.json38-53

框架变体

Bulma 提供了几种框架变体以满足不同需求

变体	构建命令	目的
标准	`build-bulma`	包含所有功能的完整框架
无深色模式	`version-no-dark-mode`	不支持深色模式的框架
无辅助工具	`version-no-helpers`	不包含辅助类的框架，尺寸更小
无辅助类和带前缀	`version-no-helpers-prefixed`	不包含辅助类，且带有前缀类
带前缀	`version-prefixed`	所有类都带有前缀以避免冲突

这些变体是使用 package.json 文件中定义的 npm 脚本构建的。

来源： package.json38-46

仅 CSS 方法

Bulma 是一个仅 CSS 的框架，没有 JavaScript 依赖。这种方法有几个优点：

体积小，加载速度更快
没有 JavaScript 相关的错误或兼容性问题
可以使用任何 JavaScript 框架或库的自由
与现有项目更容易集成

这种“环境无关”的方法使 Bulma 具有高度的灵活性，并且可以适应各种项目需求。

来源： README.md53-59

浏览器支持

Bulma 使用 autoprefixer 来确保与现代浏览器的兼容性

Chrome
Edge
Firefox
Opera
Safari

Internet Explorer (10+) 仅部分支持。

来源： README.md61-71

许可证

Bulma 在 MIT 许可下发布，该许可允许以最少的限制进行使用、修改和分发。

来源： LICENSE1-21 README.md139-141 package.json18