Logo

菜单

发布于 2026-01-06 1 阅读
0

Bulma CSS - 精选资源列表

Bulma CSS - 精选资源列表

各位程序员朋友们，大家好！

本文简要介绍Bulma CSS——一个基于 Flexbox 的热门开源 CSS 框架。Bulma 在 GitHub 上拥有超过 4 万颗星，并有 300 多位贡献者，它模块化、对开发者友好且易于定制，是Bootstrap的绝佳替代方案。本文还提供了一系列使用 Bulma 设计的入门示例，旨在将理论知识与实际应用相结合，应用于日常项目中。

感谢阅读！内容由AppSeed提供——AppSeed 是一个被全球众多开发者使用的平台。TL;DR（太长不看版）

  • 什么是Bulma CSS
  • 如何使用/导入Bulma CSS
  • Bulma基础知识：布局、元素、组件、表单

布尔玛的初始宝可梦

Bulma CSS - 开源 CSS 框架。

根据StateOfCSS.com 发布的CSS 2020 调查结果，Bulma CSS 在满意度排名中位列第三，仅次于 Tailwind 和 Pure CSS。对于每天使用 Bulma 的用户来说，这并不令人意外。

CSS框架对比——2020年调查报告。

布尔玛CSS有什么特别之处？让我们一起来了解一下。

  • 现代框架——基于 Flexbox 规范
  • 移动优先，响应式设计
  • 轻量级、模块化且不含 JavaScript
  • 内置组件：卡片、标签、菜单
  • 由 300 多位贡献者积极支持和版本控制

使用 Bulma 入门非常简单。我们可以打开一个编辑器，创建一个包含Bulma CSS和（可选）Font Awesome 的最小 HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bulma CSS - Starter Page</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"  crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" />

</head>
<body>
    <div class="container is-fluid">
        <!-- Add here Bulma Stuff -->
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

相关资源通过 CDN 加载（无需下载）：

布尔玛 - 纽扣

这段用于编写一些简单按钮的代码片段非常简单：

<button class="button is-primary is-small">Small</button>
<button class="button is-link">Default</button>
<button class="button is-warning is-normal">Normal</button>
<button class="button is-success is-medium">Medium</button>
<button class="button is-danger  is-large">Large</button>
Enter fullscreen mode Exit fullscreen mode

这段代码的输出结果如下图所示：

Bulma CSS - UI 按钮。

为了使布局四舍五入，我们可以使用限定符“is-rounded”，如下面的代码片段所示：

<button class="button is-rounded is-primary is-small">Small</button>
<button class="button is-rounded is-link">Default</button>
<button class="button is-rounded is-warning is-normal">Normal</button>
<button class="button is-rounded is-success is-medium">Medium</button>
<button class="button is-rounded is-danger  is-large">Large</button>
Enter fullscreen mode Exit fullscreen mode

Bulma CSS - UI 圆角按钮。

布尔玛 - 英雄组件

可以通过使用类“hero”作为主容器来调用此组件，这将在页面上生成一个全宽横幅。

Bulma CSS - UI 英雄组件。

布尔玛 - 联系表格

在本节中，我们将设计一个联系表单，左侧是图片，右侧是表单字段。

Bulma CSS - 联系表单组件。

相关代码：

  • 定义一个用于容纳所有元素的容器：class " container "
  • 定义两列，每列 6 行：class“ column is-6 ”
  • 左侧容器将显示图像
  • 正确的容器将包含以下表单：
<form>
    <div class="field">
        <div class="control">
            <input class="input" type="email" placeholder="Email">
        </div>
    </div>
    <div class="field">
        <div class="select is-fullwidth">
            <select>
            <option disabled selected>Select product</option>
            <option>Product 1</option>
            <option>Product 2</option>
            <option>Product 3</option>
            </select>
        </div>
    </div>
    <div class="field">
        <div class="control">
            <textarea class="textarea" rows="5"></textarea>
        </div>
    </div>
    <div class="field">
        <div class="control">
            <button class="button is-primary is-fullwidth">Submit</button>
        </div>
    </div>
</form>
Enter fullscreen mode Exit fullscreen mode

布尔玛 - 卡片

卡片组件包含多个元素，您可以自由组合搭配。所有卡片元素都应放在一个名为“卡片”的容器内：

  • 卡片标题
  • 卡片图像
  • 卡片内容
  • 卡片页脚

让我们来看一个示例，其中卡片样式包含内部图像、文本和加载条。

Bulma CSS - 媒体卡片。

以下是第一张卡片的代码：

<div class="box">
    <div class="media">
        <div class="media-left">
            <figure class="image is-48x48"><img src="media/icons/folder-o.svg">
            </figure>
        </div>
        <div class="media-content has-text-right">
            <h3 class="title is-1 has-text-info">2</h3>
        </div>
    </div>
    <h4 class="title">Projects</h4>
    <progress class="progress is-info" role="progressbar" value="75" max="100">
    </progress>
</div>
Enter fullscreen mode Exit fullscreen mode

可以通过更改 Bulma 提供的 CSS 限定符来自定义此卡片：

  • 使用is-96x96 类调整图像大小（图像大小翻倍）。
  • 更新编号和类，使其包含文本警告
  • 进度条使用is-success 类，值为 25/100

应用所有这些更改后，新的布局如下：

Bulma CSS - 媒体卡片自定义。

布尔玛 - 团队卡片

使用卡片式布局来展示团队或价格信息是许多模板中常见的元素。Bulma 可以帮助我们使用最少的 CSS 代码来编写团队部分：

布尔玛 CSS - 团队卡片

我们来看一下第一张卡片，并分析相关的 CSS 类：

<div class="column is-4">
    <div class="level">
        <div class="level-item">
            <figure class="image is-128x128">
                <img class="is-rounded" src="media/team-1.jpg" alt="">
            </figure>
        </div>
    </div>
    <h5 class="title is-5">Angelina Jolie</h5>
    <p class="subtitle is-6">CEO</p>
    <p>When I'm not obsessively stressing ...</p>
</div>
Enter fullscreen mode Exit fullscreen mode
  • 卡片宽度有4 个单元格（我们需要一行三张卡片）
  • 该图像包含图形容器和内部的“圆角”图像。
  • 描述符“ is-5 ”和“ is-6 ”是为标题对象定义的类。

以上所有示例都保存在顶部部分提到的单个文件中：Index.html - 如需查看实时演示，请访问此链接。

Bulma CSS - 单页启动器。

想了解更多关于这个强大框架的信息，请访问 Bulma CSS 官方网站或直接阅读文档。为了简化理论学习，我们可以先来看几个已经编写和定制的 Bulma CSS 示例。

布尔玛新鲜

这是一个极其简洁的单页启动页面，带有汉堡菜单和用于身份验证表单的弹出窗口。用户界面由 Css Ninja 机构设计，代码可直接从 GitHub 下载，并遵循 MIT 许可证。

Bulma CSS Fresh - 由 CSS Ninja 打造的开源模板项目

布尔玛·氪星

Krypton 是由 Css Ninja Studio 开发的单页落地页模板。Krypton 采用 MIT 许可证，基于此宽松的许可证，其用户界面可用于无限量的个人和商业项目：

Bulma CSS Krypton - 使用 Bulma 设计的开源多页面模板。

感谢阅读！更多资源请访问：

谢谢！顺便说一下，我的昵称是Sm0ke，我在推特上也相当活跃。

文章来源：https://dev.to/sm0ke/bulma-css-a-curated-list-with-resources-4o8j
我创建了一个 JavaScript...
使用 Node.js 和 Expr...