编辑“︁CSS Bulma基础”︁（章节）

= CSS Bulma基础 =

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

== 简介 ==
Bulma由Jeremy Thomas于2016年发布，其设计哲学强调：
* '''模块化'''：按需引入组件
* '''响应式'''：内置移动优先的网格系统
* '''语义化'''：类名直观易记（如<code>is-primary</code>、<code>has-text-centered</code>）

与其他框架（如Bootstrap）相比，Bulma的特点是：
* 无默认主题色，通过变量轻松定制
* 纯CSS实现，无需JavaScript即可使用核心功能
* 更简洁的HTML结构

== 安装与设置 ==
=== CDN引入 ===
最简单的使用方式是通过CDN引入：
<syntaxhighlight lang="html">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</syntaxhighlight>

=== npm安装 ===
适用于现代前端项目：
<syntaxhighlight lang="bash">
npm install bulma
</syntaxhighlight>

== 核心概念 ==
=== 布局系统 ===
Bulma的网格基于Flexbox，主要类包括：
* <code>columns</code>：容器
* <code>column</code>：子项
* 响应式后缀：<code>is-mobile</code>、<code>is-desktop</code>等

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

=== 颜色系统 ===
Bulma提供9种语义化颜色类：
{| class="wikitable"
|+ 颜色类前缀
|-
! 类型 !! 类前缀 !! 示例
|-
| 主色 || <code>is-primary</code> || <span style="background:#00d1b2; color:white; padding:0 5px;">Primary</span>
|-
| 链接色 || <code>is-link</code> || <span style="background:#3273dc; color:white; padding:0 5px;">Link</span>
|-
| 危险色 || <code>is-danger</code> || <span style="background:#ff3860; color:white; padding:0 5px;">Danger</span>
|}

=== 组件示例 ===
'''按钮'''：
<syntaxhighlight lang="html">
<button class="button is-primary is-rounded">
  圆角主按钮
</button>
</syntaxhighlight>

'''导航栏'''：
<syntaxhighlight lang="html">
<nav class="navbar is-light">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">Logo</a>
  </div>
</nav>
</syntaxhighlight>

== 定制化 ==
通过Sass变量修改主题：
<syntaxhighlight lang="scss">
// 导入Bulma核心
@import "bulma/sass/utilities/_all";

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

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

== 实际案例 ==
=== 用户卡片 ===
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

=== 响应式布局 ===
<mermaid>
graph TD
    A[导航栏] --> B[英雄区域]
    B --> C[三栏内容区]
    C --> D[页脚]
    style A fill:#f5f5f5
    style B fill:#00d1b2
    style C fill:#ffffff
    style D fill:#363636
</mermaid>

== 最佳实践 ==
1. '''按需导入'''：通过Sass只引入需要的模块
2. '''扩展类'''：使用<code>@extend</code>复用样式
3. '''组合类'''：如<code>button is-primary is-large</code>

== 数学公式示例 ==
Bulma的间距系统基于倍数关系：
<math>spacing = base-spacing \times multiplier</math>
其中基础间距<math>base-spacing = 0.25rem</math>，乘数范围为0-6。

== 常见问题 ==
'''Q：Bulma需要jQuery吗？'''
A：不需要，但可以与任何JS框架配合使用。

'''Q：如何覆盖默认样式？'''
A：通过更高特异性的CSS规则或!important（不推荐）。

== 进阶学习 ==
* 研究Bulma的Sass源码结构
* 创建自定义主题
* 结合Vue/React等框架使用

Bulma通过简洁的类名系统和灵活的定制选项，成为轻量级项目的理想选择。其文档详尽，社区资源丰富，是CSS框架入门的优秀选择。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS框架与库]]