模块化

Bulma 由 39 个 .sass 文件组成，您可以 单独 导入。

例如，您只需要 Bulma columns.
该文件位于 bulma/sass/grid 文件夹中.
只需要 导入 公共依赖，然后直接导入您需要的文件：

@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"

现在您可以直接使用 .columns 类 (用于容器) 和 .column :

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

如果您只需要 button 样式呢?

@import "bulma/sass/utilities/_all"
@import "bulma/sass/elements/button.sass"

您现在可以使用 .button 类, 及其所有修饰符:

• .is-active
• .is-primary, .is-info, .is-success...
• .is-small, .is-medium, .is-large
• .is-outlined, .is-inverted, .is-link
• .is-loading, [disabled]

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

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

<a class="button is-large">
  Large button
</a>

<a class="button is-loading">
  Loading button
</a>