模块化（Modularity）

你只需要添加你需要的模块（本节内容针对sass模式，使用单文件模式的可直接看下一节）。

1

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>

返回头部

23222