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"
然后就可以使用.button
css类及其所有修饰符:
.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>