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 最快：在 里加一行 ，立刻可用
• 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>

常见踩坑点：

• 忘了加 columns 容器，只写 column —— 列宽失效，变成普通块级元素
• 嵌套 columns 时没加 is-mobile，内层在手机上仍堆叠
• 用 is-4 这类宽度类时，总和超过 12 不会自动换行，需配合 is-multiline

固定导航栏后内容被遮住了，怎么办？

加了 is-fixed-top 却发现页面顶部文字被导航栏盖住？这是因为固定定位让导航栏脱离文档流，但页面内容没“让出空间”。Bulma 要求你同步给根元素加对应辅助类：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 导航栏固定顶部 → 给 加 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 → 没效果
• 进度条写成
  → 必须用原生 标签，否则无语义且样式异常
• 按钮颜色类（如 is-primary）必须和 button 类共存，单独用无效

真正难的不是记 class 名，而是理解 Bulma 不封装 DOM 结构——它只管样式，所有布局逻辑、语义、可访问性都要你亲手组织。这点和 Bootstrap、Tailwind 都不同，容易低估前期结构成本。