模块化(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

问题反馈
返回顶部
(function(){ var src = "https://s.ssl.qhres2.com/ssl/ab77b6ea7f3fbf79.js"; document.write('