Bulma CSS - 模块化

    xiaoxiao2022-06-27  320


    目录

    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>

    最新回复(0)