修饰器语法(Modifiers syntax)

大多数 Bulma 元素都有可 选择 的样式,你只需要添加一个 修饰符类 即可应用样式。他们都以 is-has- 开头.

让我们从一个简单的 button 开始,你只需要添加 "button" CSS 类:

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

通过添加 "is-primary" CSS 类, 可以修改元素的 颜色:

<a class="button is-primary">
  Button
</a>

你可以使用下面的 6 主要颜色之一:

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger
<a class="button is-primary">
  Button
</a>
<a class="button is-link">
  Button
</a>
<a class="button is-info">
  Button
</a>
<a class="button is-success">
  Button
</a>
<a class="button is-warning">
  Button
</a>
<a class="button is-danger">
  Button
</a>

你也可以改变元素的 大小(size):

  • is-small
  • is-medium
  • is-large
<a class="button is-small">
  Button
</a>
<a class="button">
  Button
</a>
<a class="button is-medium">
  Button
</a>
<a class="button is-large">
  Button
</a>

或者修改元素的 样式(style)状态(state):

  • is-outlined
  • is-loading
  • [disabled]
<a class="button is-primary is-outlined">
  Button
</a>
<a class="button is-loading">
  Button
</a>
<a class="button" disabled>
  Button
</a>
最后, 可以非常简答的使用 组合修饰符(modifiers):
<a class="button is-primary is-small" disabled>
  Button
</a>
<a class="button is-info is-loading">
  Button
</a>
<a class="button is-danger is-outlined is-large">
  Button
</a>