Bulma CSS - 模块化

---

Bulma CSS框架教程

Bulma CSS – 简介

Bulma CSS – 开始

Bulma CSS – CSS类

Bulma CSS – 模块化

Bulma CSS – 响应式

---

Bulma框架是模块化的，可以按需导入。

Bulma包含39个.sass文件，都可以单独导入。

例如，假设项目只需要Bulma columns，相关文件位于bulma/sass/grid文件夹中。

只需导入依赖项utilities以及columns：

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

然后就可以直接使用.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>

如果只想要按钮样式呢?

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

然后就可以使用.buttoncss类及其所有修饰符:

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