Bulma CSS - 资源和简介

2025-06-07

Bulma CSS - 资源和简介

你好，程序员们，

在本文中，我将介绍一些关于 Bulma Css（基于 Flexbox 的开源 CSS 框架）的资源和基本信息。Bulma是CSS框架战场上一个相对较新的成员，并在短时间内声名鹊起。

感谢阅读！ - 内容由App Generator提供。

布尔玛游戏

简洁的单页启动器，采用 Bulma v0.9.1 样式，并根据 MIT 许可证在 Github 上发布。作为一款基于 Bulma 设计的简单 Flask 启动器，它可以轻松集成到任何基于 Python 的框架中，例如 Django、FastAPI。

Bulma Css - BulmaPlay，使用 Bulma 设计的开源启动器。

布尔玛新鲜

这是一个非常简单的单页入门网站，带有汉堡菜单和身份验证表单的弹出窗口。UI 由 Css Ninja 团队制作，代码可以直接从 Github 下载，遵循 MIT 许可证。

Bulma CSS Fresh - CSS Ninja 制作的开源模板项目

布尔玛氪星

Krypton 是由 Css Ninja Studio 构建的单页落地页启动器。Krypton 采用 MIT 许可证，基于此许可证，其 UI 可用于无限量的业余爱好和商业项目。

Bulma CSS Krypton - 使用 Bulma 样式的开源多页模板。

Flask Dashkit

管理仪表板采用 Flask 框架编码，基于CssNinja 设计的Dashkit 仪表板设计（PRO 版本）。

Bulma Css - Flask Dashkit，采用 Bulma 风格的高级入门版。

Django Dashkit

管理仪表板采用 Django 框架编码，基于CssNinja 设计的Dashkit 仪表板设计（PRO 版本）。

Bulma Css - Django Dashkit，使用 Bulma 设计的高级入门版。

布尔玛 CSS

入门

使用 Bulma 编写一个基本的网页代码非常简单。我们需要包含 CSS 文件，该文件可在 CDN 上找到：

<!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

Bulma 和 Font-Awesome 通过 CDN 加载（无需下载）：

Bulma 语法

修饰符

关于 Bulma，你首先应该了解的是修饰符类。它们允许你为几乎所有 Bulma 元素设置替代样式。它们都以is- * 或has- * 开头，然后你可以将 * 替换为你想要的样式。例如，让我们添加几个带样式的按钮：

<!DOCTYPE html>
<html>
  <head>
  <body>
  ...
        <p>
            <button class="button">
              Button
            </button>

            <button class="button is-primary">
              Primary button
            </button>

            <button class="button is-large is-warning">
              Large button
            </button>
        </p>
  ...
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

结果

Bulma CSS - 带有按钮的最小启动器。

更多...按钮

编写一些简单按钮的代码片段相当简单：

<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 按钮。

布尔玛的响应能力

Bulma 中的每个元素都是移动优先的，并针对垂直阅读进行了优化，因此在移动设备上默认使用 5 个断点：移动设备（最高 768px）、平板电脑（769px 起）、桌面设备（1024px 起）、宽屏：1216px 起

Bulma CSS - 带有 Gid 系统的图像。

布尔玛颜色

要设置元素的颜色，我们需要在所需颜色前面使用is- *：

.is-danger
.is-warning
Enter fullscreen mode Exit fullscreen mode

Bulma CSS - 框架颜色。

Bulma - 英雄组件

可以通过使用类“hero”作为主容器来调用该组件，这将在页面上编码全宽横幅。

Bulma CSS - UI Hero 组件。

布尔玛 - 团队卡

在许多模板中，使用卡片来表示团队或定价是一个相当常见的组件。Bulma 帮助我们使用最少的 CSS 代码来编写团队部分：

Bulma 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 ”是为标题对象定义的类

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

顺便说一句，我的昵称是Sm​​0ke，我在Twitter上也相当活跃。

文章来源：https://dev.to/sm0ke/bulma-css-a-tutorial-for-beginners-af2
Devto 翻译
PREV
Dev.to 很快 - 但是...怎么做到的？
NEXT
Bootstrap 初学者教程 - 附示例