三、栅格系统

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/

前端组件库——Bulma知识点大全（二）

三、栅格系统

四、核心组件

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

前端组件库——Bulma知识点大全（二）

三、栅格系统

四、核心组件

热门文章

最新文章

相关电子书