辅助类

辅助类组织

Bulma 中的辅助类系统地组织成几个类别，每个类别服务于特定的样式目的

来源：docs/documentation/helpers/typography-helpers.html, docs/documentation/helpers/spacing-helpers.html, docs/documentation/helpers/other-helpers.html

命名约定

Bulma 的辅助类遵循一致的命名模式，使其易于使用和记忆

来源：docs/documentation/helpers/typography-helpers.html, docs/documentation/helpers/spacing-helpers.html

排版辅助类

排版辅助类控制文本外观，包括大小、对齐、粗细和转换。

大小辅助类

Bulma 提供了七个文本大小辅助类，范围从 is-size-1（最大）到 is-size-7（最小）。

类	字体大小
`is-size-1`	3rem
`is-size-2`	2.5rem
`is-size-3`	2rem
`is-size-4`	1.5rem
`is-size-5`	1.25rem
`is-size-6`	1rem
`is-size-7`	0.75rem

可以通过添加视口后缀（例如 is-size-1-mobile、is-size-3-desktop）使每个大小辅助类响应式。

来源：docs/documentation/helpers/typography-helpers.html, docs/_data/sizes-list.json

文本对齐

文本对齐辅助类控制水平文本对齐

has-text-centered: 居中文本
has-text-justified: 两端对齐文本
has-text-left: 左对齐文本
has-text-right: 右对齐文本

这些也可以响应式（例如 has-text-right-desktop）。

来源：docs/documentation/helpers/typography-helpers.html

间距辅助类

间距辅助类控制外边距和内边距。它们遵循系统性的命名约定，该约定指定属性、方向和大小。

命名模式

间距辅助类遵循此模式

属性：m（外边距）或 p（内边距）
方向
- t（顶部）
- r（右侧）
- b（底部）
- l（左侧）
- x（水平 - 左右两侧）
- y（垂直 - 上下两侧）
- 无方向（所有侧边）
大小：从 0 到 6，或 auto

大小值

后缀	值
`-0`	0
`-1`	0.25rem
`-2`	0.5rem
`-3`	0.75rem
`-4`	1rem
`-5`	1.5rem
`-6`	3rem
`-auto`	自动版 (auto)

示例

mt-4：Margin-top 为 1rem
px-2：Padding-left 和 padding-right 为 0.5rem
m-0：所有侧边均无外边距

来源：docs/documentation/helpers/spacing-helpers.html

其他实用辅助类

Bulma 提供其他几个实用辅助类，用于常见的样式需求

辅助类	目的
`is-clearfix`	修复元素的浮动子元素
`is-pulled-left`	将元素向左浮动
`is-pulled-right`	将元素向右浮动
`is-overlay`	完全覆盖第一个定位的父元素
`is-clipped`	添加 overflow: hidden
`is-radiusless`	移除任何边框半径
`is-shadowless`	移除任何阴影效果
`is-unselectable`	防止文本选择
`is-clickable`	应用 cursor: pointer !important
`is-relative`	应用 position: relative

来源：docs/documentation/helpers/other-helpers.html

辅助类实现

辅助类在 Bulma CSS 框架中作为单独的模块实现，可以在构建过程中包含或排除。这种模块化方法允许开发人员创建仅包含他们需要的辅助类的自定义构建。

来源：css/versions/bulma-no-helpers.css, css/versions/bulma-no-helpers-prefixed.css, css/versions/bulma-prefixed.css, css/versions/bulma-prefixed.min.css, css/versions/bulma-no-dark-mode.css, css/versions/bulma-no-dark-mode.css.map

响应式行为

Bulma 中的大多数辅助类支持响应式变体，这些变体仅在特定的视口宽度下应用。这是通过在基本辅助类后附加视口后缀来实现的。

响应式后缀

-mobile：应用于 768px 以下
-tablet：应用于 769px 起
-desktop：应用于 1024px 起
-widescreen：应用于 1216px 起
-fullhd：应用于 1408px 起

示例

is-size-4-mobile：文本仅在移动设备上为 4 号大小
has-text-centered-desktop：文本仅在桌面及更大屏幕上居中
is-hidden-touch：元素在触摸设备（手机和平板电脑）上隐藏

为了响应式地隐藏元素，Bulma 提供了专用的可见性辅助类，如 is-hidden-mobile、is-hidden-desktop 等。

来源：docs/documentation/helpers/typography-helpers.html, docs/documentation/helpers/spacing-helpers.html

辅助类最佳实践

与组件结合：使用辅助类来调整 Bulma 组件，而不是编写自定义 CSS。
考虑性能：包含所有辅助类会增加 CSS 文件大小。对于生产环境，请考虑仅使用您需要的辅助类。
一致性使用：在何时使用辅助类与为重复的样式模式创建自定义类方面建立约定。
响应式设计：利用辅助类的响应式变体来创建适应不同屏幕尺寸的布局。
使用 no-helpers 版本：如果您不需要辅助类或希望保持 CSS 文件大小较小，请使用 bulma-no-helpers.css 版本。

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

框架变体

Bulma 提供了与辅助类相关的不同构建版本

变体	描述
`bulma.css`	完整的 Bulma 框架，包含所有辅助类
`bulma-no-helpers.css`	不带任何辅助类的 Bulma
`bulma-prefixed.css`	带有前缀类名的 Bulma（使用 `bulma-` 前缀）
`bulma-no-helpers-prefixed.css`	不带辅助类且带有前缀类名的 Bulma
`bulma-no-dark-mode.css`	不带暗模式支持的 Bulma，但包含辅助类

来源：css/versions/bulma-no-helpers.css, css/versions/bulma-no-helpers-prefixed.css, css/versions/bulma-prefixed.css, css/versions/bulma-no-dark-mode.css

通过理解和有效使用这些辅助类，开发人员可以加快样式设置过程，并在其基于 Bulma 的项目中保持一致的视觉设计。

辅助类