New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

入门指南

你只要使用 1 个 CSS 文件 来使用 bulma


你有几种方式 开始使用 Bulma:

  1. 使用 npm 来安装 Bulma 包
  2. 使用 cdnjs CDN 来链接 Bulma 样式表
  3. 使用 GitHub repository 来获得最新的开发版本

1

使用 NPM (推荐):

npm install bulma

Font Awesome icons

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

<script defer src="https://use.fontawesome.com/releases/v5.0.6/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 | 开始模板 #

如果您想 立即 开始,您可以使用这个 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://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/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 创建一个网站所需的依赖项。

查看

Made with Bulma
这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!