# Bulma 设计系统

## Bulma 设计系统界面预览

编辑标题和摘要、验证简报、将其标记为就绪，并切换浅色/深色外观。

## Bulma 设计系统设计参考

Bulma 1.0.4 编译后的 CSS 及官方响应式/辅助工具文档。HSL 组件是软件包的默认设置，并非品牌配色的替代方案。rem 换算以 16px 根字号为准。

### 字体与控件基础

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --bulma-family-primary | Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif | 字体偏好栈；软件包不会下载这些字体文件。 |
| --bulma-size-normal | 1rem | 控件/正文默认字号。 |
| --bulma-size-small | 0.75rem | 辅助控件的紧凑字号。 |
| --bulma-size-medium | 1.25rem | 中号修饰符字号。 |
| --bulma-size-large | 1.5rem | 大号修饰符字号。 |
| --bulma-weight-semibold | 600 | 标签和强调型界面文本。 |
| --bulma-block-spacing | 1.5rem | 块级元素之间的间距。 |
| --bulma-radius | 0.375rem | 在 16px 根字号下，默认圆角为 6px。 |
| --bulma-radius-small | 0.25rem | 小号圆角：4px。 |
| --bulma-radius-large | 0.75rem | 大号圆角：12px。 |
| --bulma-control-height | 2.5em | 控件字号为 16px 时，2.5em 相当于 40px。 |
| --bulma-control-border-width | 1px | 控件通用边框粗细。 |
| --bulma-control-line-height | 1.5 | 控件通用文本行高。 |
### 颜色构成

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --bulma-primary-h / -s / -l | 171deg / 100% / 41% | 主色的 HSL 基础组件。 |
| --bulma-link-h / -s / -l | 233deg / 100% / 63% | is-link 使用的操作与链接角色。 |
| --bulma-scheme-h / -s | 221 / 14% | 中性色方案的色相与饱和度。 |
| --bulma-scheme-main-l | 100% in light mode | 主界面表面的亮度。 |
| --bulma-text-l | 29% in light mode | 常规配色方案的文本亮度。 |
| --bulma-text-title-l | 14% in light mode | 强调标题文本的亮度。 |
### 间距辅助工具

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| mb-0 | 0 | 下边距工具类；其他方向使用相同的后缀等级。 |
| mb-1 | 0.25rem | 下边距工具类；其他方向使用相同的后缀等级。 |
| mb-2 | 0.5rem | 下边距工具类；其他方向使用相同的后缀等级。 |
| mb-3 | 0.75rem | 下边距工具类；其他方向使用相同的后缀等级。 |
| mb-4 | 1rem | 下边距工具类；其他方向使用相同的后缀等级。 |
| mb-5 | 1.5rem | 下边距工具类；其他方向使用相同的后缀等级。 |
| mb-6 | 3rem | 下边距工具类；其他方向使用相同的后缀等级。 |
### 响应式断点

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| mobile | ≤768px | 列和层级会堆叠，除非添加 is-mobile。 |
| tablet | ≥769px | 默认情况下，列会横向排列。 |
| desktop | ≥1024px | 桌面端专用修饰符从此断点开始生效。 |
| widescreen | ≥1216px | 更宽的容器/布局范围。 |
| fullhd | ≥1408px | 默认范围中的最大值。 |
## Bulma 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## Bulma 设计系统：行为明确的 CSS 框架

### 在语义化的 HTML 上使用 Bulma 类

> Bulma 提供一套视觉语言，涵盖元素、组件、布局辅助工具和修饰符。它不是表单状态管理器，也不是 JavaScript 控件运行时。编辑工作台加载官方 1.0.4 样式表，并添加了一段完整展示的精简脚本，用于表单验证、文本实时预览和主题切换。这里没有 React 依赖，也没有框架提供程序。

一个字段由标签、控件包装器和帮助文本组成。input 类应添加到实际的输入框上，而 select 则是包裹原生 select 元素的包装器。这些区别很重要，因为包装器负责装饰和间距。若只是将截图中的外观复制到通用 div 上，就会失去原生编辑和键盘操作行为。

阅读配套规范

## Bulma 设计系统：HSL 角色与浅色/深色主题

### 使用修饰符，而非硬编码补丁

Bulma 1 将颜色系列存储为 HSL 组件，并据此推导相关值。链接角色应用于审核按钮、分区标签和辅助强调色。警告和成功标签分别表示“草稿”和“可供审核”，但文字标签始终会显示。此处使用 is-info 消息，因为它用于说明流程范围，而非报告错误。

演示页面在 html 上以 data-theme=light 开始。外观按钮会在 light 和 dark 之间切换该属性。所有卡片、字段、帮助文本和消息都会一同继承正确的主题。直接为方框设置白色背景会破坏这一切换效果。如需品牌定制，请更改文档中说明的角色变量，并检查其派生状态，而不是只修改最终按钮的背景色。

阅读配套规范

## Bulma 设计系统：字体偏好与实用字号阶梯

### 软件包指定的是字体偏好，而非字体文件

默认字体栈以 Inter 开头，并包含多个系统备用字体。加载 Bulma 不会下载 Inter。此离线示例会使用系统中已安装的列表字体，因此，若生产版本需要特定字体，必须另行提供字体资源并配置加载策略。标题和副标题类用于建立视觉层级，不会改变 HTML 标题级别。

工作台的页面使用 title is-2，表单使用 title is-4，文章标题使用 title is-3。在窄屏下，局部样式会将页面标题缩小至 2rem；这是明确的局部调整。控件保持常规的 1rem 字号。帮助文本紧邻对应字段，用户无需在不同侧栏之间来回查找说明。

阅读配套规范

## Bulma 设计系统：间距辅助工具与响应式列

### 七比五分栏，并可自然堆叠

父级 columns 使用 is-variable is-6；其子元素分别为 column is-7 和 column is-5。这些比例为表单分配的宽度大于文章预览。默认的移动优先行为会在移动端宽度下将列堆叠，因此此布局不会添加 is-mobile，以免维持拥挤的横向排列。

间距辅助类的后缀并非线性的像素刻度。具体来说，后缀五对应 1.5rem，后缀六对应 3rem。卡片与消息组件之间使用 mt-5，小标签使用 mb-3。外层区块通过应用层规则覆盖为垂直 2rem、水平 1.5rem；完整的额外 CSS 在设置部分提供。

阅读配套规范

## Bulma 设计系统：字段结构与验证

### 错误状态不只是颜色变化

标题和摘要均通过明确的关联关系连接到标签和帮助文本。提交被拒绝时，会为输入框和帮助文本添加 is-danger，将 aria-invalid 设为 true，并聚焦第一个无效控件。标题至少需要五个去除首尾空格后的字符；摘要至少需要二十个。这些是示例中的编辑要求，并非 Bulma 的限制。

还必须选中文案检查框。相关错误说明通过 aria-describedby 关联。Bulma 可以呈现这些状态，但无法判断文案是否已准备就绪。此判断由脚本负责，脚本也会阻止表单触发浏览器原生导航。这里不会虚构服务器端的处理结果。

1. 清空标题并提交，即可查看获得焦点的无效输入框。

2. 恢复标题，并填写至少二十个字符的摘要。

3. 选中文案检查框并提交，然后再次编辑，即可将简报状态恢复为“草稿”。

阅读配套规范

## Bulma 设计系统：卡片、消息与状态标签

### 让每个容器各司其职

文章卡片由 card-header 和 card-content 分隔。标题区域标明问题，标签则显示编辑状态。内容区域包含实时预览区、标题和摘要，后面是元数据。预览刻意以文本为主：作者可以判断层级和长度，而不会被占据画面的占位图片干扰。

消息组件使用 message-header 和 message-body，说明当前状态仅表示本地的审核准备情况。无论验证结果如何，这条消息都会保持显示。短暂出现的成功通知并不能替代这种持续说明，因为通知被关闭后，用户可能会误以为文章已经发布。

- 卡片：当前文章内容。

- 标签：明确标示草稿或审核状态。

- 消息：持续说明此操作的作用。

阅读配套规范

## Bulma 设计系统：不依赖组件运行时管理应用状态

### 防止成功状态过期，并避免不安全的预览内容插入

每次输入事件都会更新预览，并将状态重置为“草稿”。这样可以避免作者修改已审核的文本后，仍保留“就绪”标签。显示内容通过 textContent 更新，因此输入的 HTML 会作为文本显示，而不会被解析为标记语言。这些属于应用层职责；Bulma 的样式表无法实现这些功能。

恢复草稿会调用 form.reset，移除验证类和 aria-invalid，清除复选框错误说明，并重新生成预览。它会恢复原始示例内容，而不会重新加载文档。提交后的状态变化会显示在带有 role=status 的段落中；正常输入时不会反复移动焦点。

阅读配套规范

## Bulma 设计系统：安装 CSS，并让行为清晰可见

### 无需提供程序，也不捆绑 Bulma 的 JavaScript

安装 bulma@1.0.4，并将编译后的 CSS 复制到本地资源目录；或者在现有打包工具中导入该 CSS。复制资源后，这里展示的纯 HTML 设置无需构建。将完整的工作台标记放入 body，并使用 defer 加载 app.js。不要指望通过加载无关的 JavaScript 包来启用 Bulma 的组件。

如果之后添加模态框或下拉菜单，请有意实现相应的键盘操作、焦点管理和关闭行为。像 is-active 这样的类只会改变外观，并不会创建焦点陷阱。此示例使用原生输入框和按钮，让行为尽可能简单且易于审查。

阅读配套规范

## Bulma 设计系统：在合适的范围内自定义

### 覆盖组件变量前先检查其定义

全局 --bulma 变量用于设置主题，但组件也会在各自的选择器中定义变量。更具体的组件赋值可能覆盖根级值。如果根级覆盖看起来没有生效，请检查编译后的 CSS 中对应的类，然后在适当的组件上设置覆盖，而不是叠加无关声明。

对于长期维护的产品，应将程序包默认值、品牌覆盖和屏幕专属布局规则分开管理。示例中的小尺寸容器和移动端标题调整属于屏幕规则。参考表会单独列出实际的 Bulma 值，以便区分可复用的设置与仅适用于此编辑工作台的设置。

阅读配套规范

## Bulma 设计系统组件示例

### 完整的编辑工作台标记

Bulma 的字段/控件/标签/帮助文本结构、7/5 列布局、卡片、消息和状态标签。

```
<section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>
```

代码参考

- CSS 库不会验证或提交表单。

- aria-describedby 将输入框与帮助文本关联起来。

- 预览使用 textContent 显示用户输入的文本。

### 验证和本地预览行为

原始事件处理程序实现了 Bulma 刻意留给应用层处理的行为。

```
const $=id=>document.getElementById(id);
const fields=['headline','summary'];
function draft(){ $('state').textContent='Draft';$('state').className='tag is-warning is-light mr-4 my-4';$('result').textContent='Draft changes stay in this page only.';}
function preview(){ $('preview-title').textContent=$('headline').value.trim()||'Untitled article';$('preview-summary').textContent=$('summary').value.trim()||'No summary yet.';$('preview-section').textContent=$('section').value;draft();}
for(const id of ['headline','summary','section','checked'])$(id).addEventListener('input',preview);
$('brief').addEventListener('submit',event=>{event.preventDefault();let first=null;for(const id of fields){const invalid=$(id).value.trim().length<(id==='headline'?5:20);$(id).classList.toggle('is-danger',invalid);$(id).setAttribute('aria-invalid',String(invalid));$(id+'-help').classList.toggle('is-danger',invalid);if(invalid&&!first)first=$(id);}$('checked-help').textContent=$('checked').checked?'':'Confirm the copy check before review.';$('checked-help').className='help is-danger';if(!$('checked').checked&&!first)first=$('checked');if(first){$('result').textContent='Check the highlighted brief fields.';first.focus();return;}$('state').textContent='Ready for review';$('state').className='tag is-success is-light mr-4 my-4';$('result').textContent='Marked ready in this local preview. Nothing was published.';});
$('reset').addEventListener('click',()=>{$('brief').reset();for(const id of fields){$(id).classList.remove('is-danger');$(id).removeAttribute('aria-invalid');$(id+'-help').classList.remove('is-danger');}$('checked-help').textContent='';preview();});
$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.theme!=='dark';document.documentElement.dataset.theme=dark?'dark':'light';$('theme').textContent=dark?'Light appearance':'Dark appearance';});
```

代码参考

- 提交无效内容时，会聚焦第一个未填写的字段。

- 编辑已就绪的简报后，状态会恢复为“草稿”。

- data-theme 属性控制外观。

## Bulma 设计系统：AI Agent 设置

### 实现起点

按照说明保存完整标记和 JavaScript 示例。Bulma 提供 CSS；提供的应用脚本负责实现所有验证和本地状态逻辑。离线预览会将两个文件内联。HTML 包装文件包含完整的 body 标记；请将提供的交互和 CSS 示例保存为此处引用的文件名。

```
<!-- Install and copy the local asset:
npm install bulma@1.0.4
mkdir -p assets
cp node_modules/bulma/css/bulma.min.css assets/bulma.min.css
-->
<!doctype html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Editorial desk</title>
<link rel="stylesheet" href="assets/bulma.min.css">
<style>.section{padding:2rem 1.5rem}.container{max-width:1080px!important}.card-header{align-items:center;flex-wrap:wrap}.title{overflow-wrap:anywhere}.level-left{min-width:0}@media(max-width:768px){.title.is-2{font-size:2rem}.level-right{margin-top:1rem}}</style>
<script src="app.js" defer></script>
</head>
<body><section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>
</body>
</html>
```

### 适用于你项目的提示词

```
从完整的 Bulma 1.0.4 编辑工作台开始。保留字段/控件/帮助文本结构、响应式列布局、卡片和消息组件，以及文档级浅色/深色主题。标题和摘要发生变化时，必须通过 textContent 更新文章预览，并将状态恢复为“草稿”。只有在满足去除首尾空格后的文本长度要求并确认文案检查后，才能标记为“待审核”；将无效字段与其帮助文本关联，并聚焦第一个错误。恢复原始草稿并清除验证状态，但不要让用户误以为内容已发布。
```

## Bulma 设计系统：来源与适用范围

Bulma 1.0.4 CSS 参考。本文编辑规则和 JavaScript 均为原创示例代码；不会保存或发布草稿。

- 概览 仅限 CSS 的设置和文档要求。

- CSS 变量 全局作用域与组件作用域。

- 表单控件 字段与控件的构成。

- 响应式设计 官方视口边界。

- 间距辅助工具 实用类后缀值。

- 深色模式 主题选择。

- 消息 消息容器的结构。

## Bulma 设计系统相关资源

### Chakra UI

Chakra UI v3 参考资料，涵盖设计令牌、语义颜色角色、配方和复合表单组件。查看实际的间距与字体比例，然后尝试使用原生组件构建工作区个人资料表单，其中包含验证、保存失败模拟以及浅色/深色外观。

### CoreUI

一个使用真实 5.9 主题变量构建的 CoreUI 审核队列，包含原生标签页、复选框批量选择，以及可撤销上次本地归档操作的常驻提示框。

### daisyUI

一个原生支持 CSS 的邀请函制作工作室，展示 daisyUI 的 5 种语义主题、成对的内容颜色、单选按钮组合、范围控件、浏览器验证以及实际的对话框审核步骤。


- [实现参考](https://bulma.io/documentation/form/general/)
- [来源](https://bulma.io/documentation/features/css-variables/)
- [来源](https://bulma.io/documentation/features/color-palettes/)
- [来源](https://bulma.io/documentation/helpers/spacing-helpers/)
- [来源](https://bulma.io/documentation/start/responsiveness/)
- [阅读配套规范](https://bulma.io/documentation/start/overview/)
- [阅读配套规范](https://bulma.io/documentation/features/dark-mode/)
- [阅读配套规范](https://bulma.io/documentation/helpers/typography-helpers/)
- [阅读配套规范](https://bulma.io/documentation/start/responsiveness/)
- [阅读配套规范](https://bulma.io/documentation/form/general/)
- [阅读配套规范](https://bulma.io/documentation/components/message/)
- [阅读配套规范](https://bulma.io/documentation/features/css-variables/)
- [代码参考](https://bulma.io/documentation/form/general/)
- [代码参考](https://bulma.io/documentation/start/overview/)
- [概览 仅限 CSS 的设置和文档要求。](https://bulma.io/documentation/start/overview/)
- [CSS 变量 全局作用域与组件作用域。](https://bulma.io/documentation/features/css-variables/)
- [表单控件 字段与控件的构成。](https://bulma.io/documentation/form/general/)
- [响应式设计 官方视口边界。](https://bulma.io/documentation/start/responsiveness/)
- [间距辅助工具 实用类后缀值。](https://bulma.io/documentation/helpers/spacing-helpers/)
- [深色模式 主题选择。](https://bulma.io/documentation/features/dark-mode/)
- [消息 消息容器的结构。](https://bulma.io/documentation/components/message/)