引言
Bulma 是基于 Flexbox 的 CSS 框架，提供语义化类名、移动优先的断点和可按需引入的 Sass 模块。它不内置 JavaScript，因此菜单、下拉框等交互需要由项目自行实现。本文从基础布局开始，逐步介绍导航栏、卡片、主题定制和常见问题。
核心概念
模块化结构
框架可以按项目需要引入基础、网格和组件模块，避免把不使用的样式打包进最终文件：
@import "bulma/sass/utilities/_all";
@import "bulma/sass/base/_all";
@import "bulma/sass/grid/columns";
@import "bulma/sass/components/card";
Flexbox 网格与修饰符
columns 和 column 组成基础布局；is-multiline 允许换行，is-half-tablet、is-one-quarter-desktop 等类可根据断点调整列宽。颜色、尺寸和状态也通过 is-primary、is-small、is-loading 等修饰符表达。
<div class="columns is-multiline">
<div class="column is-full-mobile is-half-tablet">内容区块 1</div>
<div class="column is-full-mobile is-half-tablet">内容区块 2</div>
</div>
实际应用
响应式导航栏
<nav class="navbar is-dark" role="navigation" aria-label="主导航">
<div class="navbar-brand">
<a class="navbar-item" href="/">我的应用</a>
<a role="button" class="navbar-burger" aria-label="打开菜单" aria-expanded="false" data-target="navMenu">
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item" href="/products/">产品</a>
<a class="navbar-item" href="/docs/">文档</a>
</div>
</div>
</nav>
navbar-burger 只提供样式和状态类，点击后需要切换菜单的 is-active，并同步更新 aria-expanded：
const burger = document.querySelector('.navbar-burger');
const menu = document.getElementById(burger.dataset.target);
burger.addEventListener('click', () => {
const active = burger.classList.toggle('is-active');
menu.classList.toggle('is-active', active);
burger.setAttribute('aria-expanded', String(active));
});
商品卡片网格
<section class="section">
<div class="container">
<div class="columns is-multiline is-mobile">
<div class="column is-half-mobile is-one-quarter-tablet">
<article class="card">
<div class="card-image">
<figure class="image is-4by3"><img src="/media/product.jpg" alt="商品名称"></figure>
</div>
<div class="card-content">
<h2 class="title is-5">商品名称</h2>
<button class="button is-primary" type="button">查看详情</button>
</div>
</article>
</div>
</div>
</div>
</section>
定制与性能
在导入完整框架前覆盖 Sass 变量，可以统一品牌颜色、字体和断点：
@import "bulma/sass/utilities/initial-variables";
$primary: #4361ee;
$family-sans-serif: "Segoe UI", sans-serif;
$tablet: 768px;
$desktop: 1024px;
@import "bulma/bulma";
完成构建后，再使用按需导入、压缩和未使用 CSS 检查减少产物体积。具体收益取决于项目组件数量和构建配置，不应把固定百分比当作通用结果。
垂直居中可以配合 is-vcentered，响应式显示可以使用 is-hidden-mobile 与 is-flex-tablet：
<div class="columns is-vcentered">
<div class="column">左侧内容</div>
<div class="column has-text-centered">居中内容</div>
</div>
<div class="is-hidden-mobile is-flex-tablet">平板以上显示</div>
常见问题
样式覆盖冲突
先确认自定义样式加载在 Bulma 之后，再通过更具体的选择器或项目命名空间控制覆盖范围。多个框架共存时，避免重用相同的通用类名。
非标准布局
对于卡片网格，使用 columns is-multiline 配合明确的 column is-* 宽度；瀑布流等特殊布局则应使用专门的 CSS Grid 或第三方方案，不要把等高的 Flexbox 列误称为瀑布流。
组件需要交互
Bulma 只负责样式。下拉菜单、模态框和标签页可以用原生 JavaScript、Alpine.js 或项目现有组件库实现，并补充键盘操作、焦点管理和 ARIA 状态。
总结
Bulma 通过语义化类名、Flexbox 网格和 Sass 变量降低了响应式页面的开发成本。先用网格和修饰符搭出结构，再按需定制主题和实现交互，可以在保持样式一致性的同时控制前端产物复杂度。
评论 (0)
暂无评论，快来抢沙发吧！