开始使用Bulma

使用Bulma仅仅需要1 CSS 文件

有多种方法可以开始使用Bulma,你可以选择其中如意一个:

  1. 使用 npm 安装 Bulma 包
  2. 使用 jsDelivr CDN 托管的 Bulma stylesheet 文件
  3. 使用 GitHub 库 的最新开发版

1

使用 NPM (推荐):

npm install bulma

2

使用 jsDelivr CDN

<link rel="stylesheet" src="https://cdn.jsdelivr.net/npm/bulma@0.8.0/bulma.css">


Font Awesome 图标

如果你想在Bulma中使用图标, 不要忘记添加Font Awesome 5:

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

必要的代码(Code requirements) #

为了让Bulma正确的工作,你需要网页是响应式的

1

使用 HTML5 doctype声明

<!DOCTYPE html>

2

添加响应式 viewport meta 标签

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

开始模板(Starter template) #

如果你想立刻开始, 你可以使用 开始模板(starter template). 只需要 复制/粘贴 下面的代码到文件中,并保存即可.

<!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.8.2/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </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>

bulma-start #

bulma-start 是一个很小的npm软件包,它当中仅包含了使用Bulma构建网站所需要的npm依赖项.

查看Bulma-start