基于Flexbox的现代化CSS框架：Bulma快速入门指南

qife122
47 阅读3分钟

Bulma

Bulma 是一个基于 Flexbox 的现代化 CSS 框架，专注于提供优雅的 UI 组件和响应式布局解决方案。

功能特性

  • 纯 CSS 框架：项目输出仅为单个 CSS 文件（bulma.css），不包含任何 JavaScript，可以与任何 JS 环境或框架配合使用。
  • 基于 Flexbox：核心布局基于 CSS Flexbox 构建，提供了强大且灵活的布局系统。
  • 易于定制：提供 Sass 源文件，允许开发者通过修改变量来轻松定制主题、颜色、间距等。
  • 响应式设计：内置完整的响应式工具和组件，适配各种屏幕尺寸。
  • 丰富的组件：包含按钮、表单、导航栏、卡片、模态框等一系列现代化 UI 组件。
  • 语义化修饰符：使用直观的 is-* 和 has-* 类名来修饰元素样式，代码可读性高。
  • 社区支持：拥有活跃的社区和丰富的资源。

安装指南

NPM 安装

npm install bulma

Yarn 安装

yarn add bulma

Bower 安装

bower install bulma

通过 CDN 引入

可以直接使用 jsDelivr 提供的 CDN 链接：
www.jsdelivr.com/package/npm…

导入使用

安装后，可以通过以下方式将 CSS 文件导入你的项目：

@import 'bulma/css/bulma.css';

使用说明

基础示例

使用 Bulma 非常简单，只需将 CSS 文件引入到 HTML 的 <head> 中，然后使用其提供的类名即可。

<!DOCTYPE html>
<html>
<head>
  <!-- 引入 Bulma CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
</head>
<body>
  <!-- 使用 Bulma 的按钮组件 -->
  <button class="button is-primary">
    这是一个主要按钮
  </button>
</body>
</html>

响应式容器

Bulma 的容器组件可以轻松创建响应式布局。

<div class="container">
  <div class="notification is-primary">
    这是一个居中的容器，在不同屏幕尺寸下会自动调整宽度。
  </div>
</div>

<!-- 在平板及以下设备宽度达到最大 -->
<div class="container is-max-tablet">
  <p>这个容器在平板尺寸下会达到最大宽度。</p>
</div>

网格系统

使用列（Columns）系统创建灵活的网格布局。

<div class="columns">
  <div class="column">
    第一列
  </div>
  <div class="column">
    第二列
  </div>
  <div class="column">
    第三列
  </div>
  <div class="column">
    第四列
  </div>
</div>

辅助类

Bulma 提供了丰富的辅助类来调整文本、颜色和间距。

<!-- 文本颜色和粗细 -->
<p class="has-text-primary has-text-weight-bold">
  这是一段加粗的主要颜色文本。
</p>
<p class="has-text-weight-extrabold">
  这是超粗体文本。
</p>

<!-- 背景颜色 -->
<div class="has-background-warning">
  这是一个有警告色背景的区域。
</div>

<!-- 使用 currentColor 或 inherit -->
<div style="color: blue;">
  <span class="has-text-currentColor">这段文字会继承父级的蓝色。</span>
</div>

表单组件

使用 Bulma 样式化的表单元素。

<div class="field">
  <label class="label">用户名</label>
  <div class="control">
    <input class="input" type="text" placeholder="请输入用户名">
  </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>

高度控制

Section 组件支持全屏高度模式。

<section class="section is-fullheight">
  <h1 class="title">这个区块的高度至少为 100vh</h1>
</section>

自定义变量

如果使用 Sass 源文件，可以通过覆盖变量来自定义主题。

// 在导入 Bulma 之前设置你的变量
$primary: #ff0000;
$family-sans-serif: "My Custom Font", sans-serif;
$input-border-style: dashed;
$input-border-width: 2px;

// 然后导入 Bulma
@import "~bulma/bulma";

核心代码

Bulma 的核心是一个模块化的 Sass 项目，其样式通过组合多个独立的组件文件生成。主要的构建逻辑集中在根目录的 package.json 和构建脚本中，确保能输出最终的 CSS 文件。

核心优势在于其变量系统和模块化设计，允许开发者仅通过修改 Sass 变量（如 $primary、$link 等）就能实现深度的主题定制，而无需重写大量 CSS 规则。所有组件都基于一致的变量和混合宏（Mixin）构建，保证了整个框架样式的高度统一性和可维护性。 t3Li4f3NrFLEpP3nclSjeYqIIwP+tCv/572c5fTu6Wc=

avatar
文章
阅读
粉丝