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>


浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载