Bulma 起步

使用 Bulma 您仅需 1 个 CSS 文件

Bulma 是一个 CSS 库。这也就是说，它能帮您美化您的 HTML 代码。
使用 Bulma，您可以使用预编译的 .css 文件，也可以安装能够自由定制的 .sass 文件。

获取 Bulma CSS 文件

一个包含所有 Bulma 代码的单独的 .css 文件

推荐选项 1. 使用一个 CDN

您可以直接从 jsDelivr 导入 CSS 文件：

@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";

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

也提供 RTL 版本 ：

@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma-rtl.min.css";

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

也可以从 cdnjs 获得 Bulma。

选择 2. 从 Github 下载

您可以从 GitHub 获取 Bulma 的最新 .zip 压缩版本：

下载 0.9.4 版本

或者

获取 Bulma 的 Sass 库

一个构建自己的 Bulma 版本的 .sass 文件集

Recommended 选项 1. 安装 NPM 包

Bulma 可通过 npm 安装：

npm install bulma

yarn add bulma

Bulma 也可以通过 cdnjs 获得。

选项 2. 复制 GitHub 代码库

Bulma 可通过 GitHub 获得：

git clone git@github.com:jgthms/bulma.git

git clone https://github.com/jgthms/bulma.git

gh repo clone jgthms/bulma

注意 GitHub 代码库也包含了这份文档，所以会比 NPM 包大。

代码需求 #

要是 Bulma 正常使用，您需要使您的网页具备自适应能力。

使用 HTML5 doctype

<!DOCTYPE html>

添加自适应 viewport 元标签

<meta name="viewport" content="width=device-width, initial-scale=1">

初始模板 #

如果您想马上起步，您可以使用这个HTML 初始模板。只需复制粘贴代码到文件中然后保存到您的计算机即可。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>