Bulma Sass 表单控件 Mixins

Bulma 按钮和表单控件的 Mixins

在 Bulma 中，表单控件是框架的重要组成部分。它们包括以下元素

.button
.input
.select
.file-cta .file-name
.pagination-previous .pagination-next .pagination-link .pagination-ellipsis

control() mixin 通过提供一组在所有这些表单控件之间共享的样式来确保一致性。您可以使用它来创建其他控件

@use "bulma/sass/utilities/controls";

.bulma-control-mixin {
  @include controls.control;
  background: deeppink;
  color: white;
}

示例

HTML

<button class="bulma-control-mixin">
  My control
</button>

尺寸 #

控件的默认字体大小为 $size-normal，并且还提供 3 种其他尺寸，可以通过 3 种其他 mixins 访问

```
@include controls.control-small;
```
字体大小为 $size-small
```
@include controls.control-medium;
```
字体大小为 $size-medium
```
@include controls.control-large;
```
字体大小为 $size-large

.bulma-control-mixin {
  &.is-small {
    @include controls.control-small;
  }

  &.is-medium {
    @include controls.control-medium;
  }

  &.is-large {
    @include controls.control-large;
  }
}

示例

HTML

<button class="bulma-control-mixin is-small">
  Small
</button>
<button class="bulma-control-mixin">
  Normal
</button>
<button class="bulma-control-mixin is-medium">
  Medium
</button>
<button class="bulma-control-mixin is-large">
  Large
</button>

控件占位符 #

control() mixin 也以 Sass 占位符 %control 的形式存在

@use "bulma/sass/utilities/extends";

.bulma-control-extend {
  @extend %control;
  background: mediumblue;
  color: white;
}

示例

HTML

<button class="bulma-control-extend">
  My control
</button>

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

Bulma Sass 表单控件 Mixins

Bulma 按钮和表单控件的 Mixins

尺寸 #

控件占位符 #

如何支持 Bulma