CSS Bulma基础[编辑 | 编辑源代码]

Bulma 是一个基于 Flexbox 的现代化开源 CSS框架，提供响应式布局和预构建的UI组件，适合快速构建美观的网页界面。它不依赖JavaScript，完全通过CSS类实现功能，因此学习成本较低，特别适合初学者和中级开发者。

简介[编辑 | 编辑源代码]

Bulma由Jeremy Thomas于2016年发布，其设计哲学强调：

模块化：按需引入组件
响应式：内置移动优先的网格系统
语义化：类名直观易记（如is-primary、has-text-centered）

与其他框架（如Bootstrap）相比，Bulma的特点是：

无默认主题色，通过变量轻松定制
纯CSS实现，无需JavaScript即可使用核心功能
更简洁的HTML结构

安装与设置[编辑 | 编辑源代码]

CDN引入[编辑 | 编辑源代码]

最简单的使用方式是通过CDN引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

npm安装[编辑 | 编辑源代码]

适用于现代前端项目：

npm install bulma

核心概念[编辑 | 编辑源代码]

布局系统[编辑 | 编辑源代码]

Bulma的网格基于Flexbox，主要类包括：

columns：容器
column：子项
响应式后缀：is-mobile、is-desktop等

示例：

<div class="columns is-mobile">
  <div class="column is-half">占50%宽度</div>
  <div class="column">自动分配剩余空间</div>
</div>

颜色系统[编辑 | 编辑源代码]

Bulma提供9种语义化颜色类：

颜色类前缀
类型	类前缀	示例
主色	`is-primary`	Primary
链接色	`is-link`	Link
危险色	`is-danger`	Danger

组件示例[编辑 | 编辑源代码]

按钮：

<button class="button is-primary is-rounded">
  圆角主按钮
</button>

导航栏：

<nav class="navbar is-light">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">Logo</a>
  </div>
</nav>

定制化[编辑 | 编辑源代码]

通过Sass变量修改主题：

// 导入Bulma核心
@import "bulma/sass/utilities/_all";

// 修改主色
$primary: #8a4d76;

// 引入其余部分
@import "bulma/bulma";

实际案例[编辑 | 编辑源代码]

用户卡片[编辑 | 编辑源代码]

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="avatar.png" alt="用户头像">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <p class="title is-4">张三</p>
        <p class="subtitle is-6">@zhangsan</p>
      </div>
    </div>
    <div class="content">
      前端开发者 | Bulma爱好者
    </div>
  </div>
</div>