开始（start）

使用Bulma仅仅需要引入1 个CSS 文件

1

Bulma是一个CSS库。这意味着它提供CSS类来帮助您设计HTML代码的样式。
要使用Bulma，可以使用预编译的.css文件，也可以安装.sass文件，以便根据需要进行自定义。这部分内容官网讲的太啰嗦，也不容易懂，我自己写了下。

一、直接引用已编译好的css文件 #

你可以直接通过获取一个已编译好的css文件，其中包括了 Bulma css的所有功能。
这个文件你可以到 https://www.bulmacss.cn/down页面下载， 其中bulma.css是完整的css文件，bulma.min.css是压缩版的css文件，内容完全一样。
一般在开发中用bulma.css，你可以查看以下里面的css是怎么定义的，发布的时候换成bulma.min.css，访问速度更快。

1、CDN方式引入 2、本地文件引入

二、获取Bulma Sass文件自定义编译后使用 #

下载的文件包中了所有的 .sass 文件，你可以充分定制属于你的bulma css框架，不过我不建议这样做，有需要的可以研究下，容易和官方不一致，造成升级困难。

1、 NPM 模块安装 2、GitHub 下载 Windows操作系统，你可以到 https://www.bulmacss.cn/down页面下载，也可以直接到https://github.com/jgthms/bulma下载。
Linux操作系统下载

三、必要的代码 #

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

1

使用 HTML5 doctype声明 

<!DOCTYPE html>

2

添加响应式标签 viewport meta 

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

四、 开始模板 #

如果你想立刻开始, 你可以直接使用 开始模板(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.9.1/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>

五、 bulma-start #

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

返回头部

23222

问题反馈
返回顶部