模块化(Modularity)

只需要添加你需要的模块

Bulma是由39个可以单独导入(import)的.sass文件组成。

例如, 你只需要 Bulma 列(columns).
改文件位于bulma/sass/grid 文件夹中.
简单的 import utilities 依赖, 然后直接导入你所需要的文件: 

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

现在你可以直接使用.columns (for the container) 和 .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.sass"
@import "bulma/sass/elements/button.sass"

现在你可以使用 .button 类, 以及它所有的修饰符(modifier):

  • .is-active
  • .is-primary, .is-info, .is-success...
  • .is-small, .is-medium, .is-large
  • .is-outlined, .is-inverted, .is-link
  • .is-loading, [disabled] 
<button class="button">
  Button
</button>

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

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

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