修饰符语法(Modifiers )

大多数Bulma元素都有不同的样式。要应用它们,只需附加一个修饰符类。它们都以is-或has-开头。

1、开始

让我们从一个使用“button”CSS类的简单按钮开始为例说明吧,非常简单,直接增加一个class="button"类就可以了,如果原本存在class标签的话,在里面加个空格和button就可以了。

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

2、改变颜色

通过 增加 "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>

3、改变大小

大小有4种,不写就是标准大小,其他三种都是相对标准大小来的:

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

4、改变样式及状态

样式 及 状态可以组合使用:

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

5、组合使用

最后,你可以很容易组合修饰符,把多个不同效果的修饰符写到同一个类,就能得到不同效果:
<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>

返回头部

问题反馈
返回顶部