三、栅格系统
3.1 Columns布局基础
Bulma的栅格系统基于Flexbox构建，核心概念是columns（列容器）和column（单个列）。
<!-- 基础栅格：自动等宽 -->
<div class="columns">
<div class="column">第一列</div>
<div class="column">第二列</div>
<div class="column">第三列</div>
<div class="column">第四列</div>
</div>
在这个例子中，四个列会自动平分父容器的宽度。columns容器在移动端默认垂直堆叠（每个column占满整行），在平板及以上设备自动变为水平排列。
列宽控制：
Bulma使用12列网格系统，通过is-*类控制列宽：
<div class="columns">
<div class="column is-4">占4列（1/3宽度）</div>
<div class="column is-8">占8列（2/3宽度）</div>
</div>
3.2 响应式列宽
Bulma提供了丰富的响应式列宽类，可以在不同断点设置不同的列宽：
<div class="columns">
<!-- 移动端占12列（全宽），平板端占6列（半宽），桌面端占4列（1/3） -->
<div class="column is-12-mobile is-6-tablet is-4-desktop">
响应式卡片
</div>
</div>
3.3 栅格修饰符
列间距（gap）控制：
<!-- 无间距 -->
<div class="columns is-gapless">
<div class="column">无间距列</div>
<div class="column">无间距列</div>
</div>
<!-- 自定义间距（0-8） -->
<div class="columns is-variable is-4">
<!-- is-4 表示间距为1rem -->
<div class="column">有间距列</div>
<div class="column">有间距列</div>
</div>
垂直对齐：
<!-- 垂直居中 -->
<div class="columns is-vcentered">
<div class="column">内容会自动垂直居中</div>
<div class="column">即使高度不同也会对齐</div>
</div>
多行布局：
<!-- 列数超过12时自动换行 -->
<div class="columns is-multiline">
<div class="column is-3">占3列</div>
<div class="column is-3">占3列</div>
<div class="column is-3">占3列</div>
<div class="column is-3">占3列</div>
<!-- 以下列会换到下一行 -->
<div class="column is-3">占3列</div>
</div>
移动端强制水平排列：
默认情况下，columns在移动端垂直堆叠。如需移动端也保持水平排列，添加is-mobile类：
<div class="columns is-mobile">
<div class="column">移动端也水平排列</div>
<div class="column">移动端也水平排列</div>
</div>
四、核心组件
4.1 按钮组件 Button
Bulma的按钮组件使用.button基类，配合语义化修饰符实现不同样式。
<!-- 按钮颜色变体 -->
<button class="button">默认按钮</button>
<button class="button is-primary">主要按钮</button>
<button class="button is-link">链接按钮</button>
<button class="button is-info">信息按钮</button>
<button class="button is-success">成功按钮</button>
<button class="button is-warning">警告按钮</button>
<button class="button is-danger">危险按钮</button>
<!-- 按钮尺寸 -->
<button class="button is-small">小按钮</button>
<button class="button is-normal">正常按钮</button>
<button class="button is-medium">中等按钮</button>
<button class="button is-large">大按钮</button>
<!-- 其他按钮样式 -->
<button class="button is-outlined">镂空按钮</button>
<button class="button is-inverted">反色按钮</button>
<button class="button is-rounded">圆角按钮</button>
<button class="button is-loading">加载中</button>
<button class="button" disabled>禁用按钮</button>
<!-- 按钮组 -->
<div class="buttons">
<button class="button is-primary">保存</button>
<button class="button is-light">取消</button>
</div>
<!-- 带图标的按钮 -->
<button class="button is-primary">
<span class="icon">
<i class="fas fa-download"></i>
</span>
<span>下载</span>
</button>
按钮组件要点：
基础按钮必须带is-primary、is-link等语义类，光有.button只是重置默认样式，不提供主题色
禁用状态需同时添加is-disabled类和disabled属性
https://unbgv.cn/category/shengxiaopeidui.html
自定义颜色时，不要只改background-color，Bulma的悬停效果依赖CSS变量，需在:root中覆盖整套变量
4.2 表单组件 Form
Bulma的表单组件使用.field（表单字段容器）、.label（标签）、.control（控件容器）三层结构。
<div class="field">
<label class="label">用户名</label>
<div class="control">
<input class="input" type="text" placeholder="请输入用户名">
</div>
</div>
<div class="field">
<label class="label">邮箱</label>
<div class="control has-icons-left">
<input class="input" type="email" placeholder="请输入邮箱">
<span class="icon is-left">
<i class="fas fa-envelope"></i>
</span>
</div>
</div>
<div class="field">
<label class="label">密码</label>
<div class="control">
<input class="input" type="password" placeholder="请输入密码">
</div>
</div>
<!-- 文本域 -->
<div class="field">
<label class="label">个人简介</label>
<div class="control">
<textarea class="textarea" placeholder="介绍一下自己..."></textarea>
</div>
</div>
<!-- 选择框 -->
<div class="field">
<label class="label">角色</label>
<div class="control">
<div class="select">
<select>
<option>请选择</option>
<option>管理员</option>
<option>普通用户</option>
</select>
</div>
</div>
</div>
<!-- 单选框组 -->
<div class="field">
<div class="control radios">
<label class="radio">
<input type="radio" name="option"> 选项一
</label>
<label class="radio">
<input type="radio" name="option"> 选项二
</label>
</div>
</div>
<!-- 复选框组 -->
<div class="field">
<div class="control checkboxes">
<label class="checkbox">
<input type="checkbox"> 同意用户协议
</label>
</div>
</div>
表单组件要点：
.field是表单字段容器，内部通常包含.label和.control
.control是控件容器，支持添加图标（.has-icons-left/.has-icons-right）
.input、.textarea、.select是实际输入控件类
表单字段可通过添加is-loading、is-danger等状态类显示验证状态
4.3 卡片组件 Card
卡片是Bulma中最常用的内容容器组件。
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="image.jpg" alt="卡片图片">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="avatar.jpg" alt="头像">
</figure>
</div>
<div class="media-content">
<p class="title is-4">张三</p>
<p class="subtitle is-6">@zhangsan</p>
</div>
</div>
<div class="content">
这是一段卡片内容描述。Bulma的卡片组件非常灵活，
可以包含图片、媒体对象、标题、内容和页脚。
<br>
<time datetime="2024-01-01">2024年1月1日</time>
</div>
</div>
<div class="card-footer">
<a href="#" class="card-footer-item">点赞</a>
<a href="#" class="card-footer-item">评论</a>
<a href="#" class="card-footer-item">分享</a>
</div>
</div>
4.4 导航栏组件 Navbar
Bulma的导航栏组件需要手动控制移动端汉堡菜单的展开/收起行为（框架不提供JS）。
<nav class="navbar" role="navigation" aria-label="主导航">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="logo.png" alt="Logo">
</a>
<!-- 汉堡菜单按钮（移动端显示） -->
<a role="button" class="navbar-burger" aria-label="菜单" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/">首页</a>
<a class="navbar-item" href="/docs">文档</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/more">更多</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/about">关于</a>
<a class="navbar-item" href="/contact">联系</a>
<hr class="navbar-divider">
<a class="navbar-item" href="/report">问题反馈</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary" href="/register">注册</a>
<a class="button is-light" href="/login">登录</a>
</div>
</div>
</div>
</div>
</nav>
<script>
// 汉堡菜单的JavaScript控制（必须自己实现）
document.addEventListener('DOMContentLoaded', () => {
const burger = document.querySelector('.navbar-burger');
const menu = document.querySelector(`#${burger.dataset.target}`);
burger.addEventListener('click', () => {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
});
</script>
导航栏组件要点：
必须给navbar-burger加data-target属性，值为对应navbar-menu的id
收起逻辑需要自己写JS：监听click事件，切换is-active类到两个元素
下拉菜单使用.has-dropdown和.navbar-dropdown结构
默认下拉菜单在hover时展开，移动端需点击
4.5 消息框组件 Message
消息框用于显示提示信息。
<article class="message">
<div class="message-header">
<p>消息标题</p>
<button class="delete" aria-label="删除"></button>
</div>
<div class="message-body">
这是一条提示消息。可以包含任意HTML内容。
</div>
</article>
<!-- 不同颜色的消息框 -->
<article class="message is-primary">...</article>
<article class="message is-link">...</article>
<article class="message is-info">...</article>
<article class="message is-success">...</article>
<article class="message is-warning">...</article>
<article class="message is-danger">...</article>
4.6 平铺布局组件 Tile
Tile是Bulma中最强大但常被低估的组件，专门用于构建复杂的二维网格布局，如仪表盘、拼贴墙等。
<!-- 基本结构：祖先 → 父级 → 子级 → 内容 -->
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child notification is-primary">
<p class="title">顶部区域</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-info">
<p class="title">右侧区域</p>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-warning">
<p class="title">底部宽区域</p>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-danger">
<p class="title">侧边栏</p>
<p class="subtitle">自动拉伸以匹配高度</p>
</article>
</div>
</div>
Tile组件核心类：
Tile的优势：子元素会自动拉伸以匹配同级元素的高度，无需手动计算。默认情况下，.tile元素在移动端垂直堆叠，桌面端水平排列。
来源：
https://unbgv.cn/
