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>