Bulma 可通过 CDN 或 npm 引入，CDN 适合快速原型，npm 更利于定制；columns 默认移动端堆叠、桌面横排，需加 is-mobile 实现移动端横排；固定导航栏须同步为 html 添加 has-navbar-fixed-top 等辅助类以预留空间。
直接用一个 CSS 文件就能跑起来，不需要编译、不依赖 JS、不改 HTML 结构——Bulma 就是这么轻量。关键在于引入方式选对、HTML 结构写对、响应式类名用对，否则很容易出现“样式没生效”“列不水平”“导航栏遮住内容”这类问题。
怎么引入 Bulma：CDN vs npm，选哪个？
开发阶段推荐 npm，原型或静态页直接上 CDN。两者本质都是加载 bulma.min.css，但路径和后续扩展性差别很大：
- CDN 最快：在
里加一行<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">，立刻可用 - npm 更可控：运行
npm install bulma后，可导入源文件（如 Sass）做主题定制；但若只引入bulma/css/bulma.min.css，和 CDN 效果一致 - 注意版本号：当前稳定版是
0.9.4，别用latest或未发布的1.0，部分 class（如is-multiline行为）有 breaking change
为什么 columns 在手机上堆叠、桌面才横排？
Bulma 的 columns 默认响应式：移动端垂直堆叠，平板（tablet）及以上才转为 Flex 横排。这不是 bug，是设计预期。如果你希望移动端也横排，必须显式加 is-mobile：
<div class="columns is-mobile"> <div class="column">左</div> <div class="column">右</div> </div>
常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 忘了加
columns容器，只写column—— 列宽失效，变成普通块级元素 - 嵌套
columns时没加is-mobile，内层在手机上仍堆叠 - 用
is-4这类宽度类时，总和超过 12 不会自动换行，需配合is-multiline
固定导航栏后内容被遮住了，怎么办？
加了 is-fixed-top 却发现页面顶部文字被导航栏盖住？这是因为固定定位让导航栏脱离文档流，但页面内容没“让出空间”。Bulma 要求你同步给根元素加对应辅助类：
- 导航栏固定顶部 → 给
加has-navbar-fixed-top - 页脚固定底部 → 给
加has-navbar-fixed-bottom - 两者都固定 → 同时加
has-navbar-fixed-top has-navbar-fixed-bottom
这个机制靠的是预设的 padding 值（比如 has-navbar-fixed-top 对应 padding-top: 3.25rem），所以千万别手动覆盖 html 的 padding，否则间距错乱。
标题、进度条、按钮这些组件为什么 class 名这么长？
Bulma 的 class 是扁平化组合设计，不是语义化命名。比如 title is-3 is-spaced 中：
-
title是基础样式（字体大小、粗细、margin） -
is-3是尺寸 modifier（非 HTML 的h3标签层级） -
is-spaced是行为 modifier（控制与下个元素的间距）
这种写法自由度高，但容易漏写。典型错误：
- 只写
is-3不写title→ 没效果 - 进度条写成
<div class="progress"> → 必须用原生 <code><progress></progress>标签，否则无语义且样式异常 - 按钮颜色类（如
is-primary）必须和button类共存，单独用无效
真正难的不是记 class 名，而是理解 Bulma 不封装 DOM 结构——它只管样式，所有布局逻辑、语义、可访问性都要你亲手组织。这点和 Bootstrap、Tailwind 都不同，容易低估前期结构成本。
