二、基本用法

Bulma 的安装只需一步,把样式表插入网页即可。

  1. <link rel="stylesheet" href="css/bulma.min.css"/>

使用更简单,就是为 HTML 元素加上class

  1. <a class="button">Button</a>

上面的代码为 a 元素加上button类,这个链接就会被渲染成按钮。

二、基本用法 - 图1

Bulma 提供大量的修饰类,用来改变基类的样式。它们都是以is-has-开头。比如,要改变 Button 的大小,就可以使用下面的修饰类。

  1. <a class="button is-small">Small</a>
  2. <a class="button">Normal</a>
  3. <a class="button is-medium">Medium</a>
  4. <a class="button is-large">Large</a>

二、基本用法 - 图2

Bulma 默认提供6种颜色。

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

二、基本用法 - 图3

按钮状态的修饰类如下。

  • is-hovered
  • is-focused
  • is-active
  • is-loading

完整的修饰类清单请看官方文档