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

Get it now →

修饰符语法

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


让我们从一个简单的 按钮 开始,你只需要添加 .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>

您也可以改变 大小:

  • 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>

或者 样式状态:

  • is-outlined
  • is-loading
  • [disabled]
<a class="button is-primary is-outlined">
  Button
</a>
<a class="button is-primary is-loading">
  Button
</a>
<a class="button is-primary" disabled>
  Button
</a>

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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!