In Bulma, the form controls are an essential part of the framework. They comprise the following elements:
.button
.input
.select
.file-cta
.file-name
.pagination-previous
.pagination-next
.pagination-link
.pagination-ellipsis
The control()
mixin ensures consistency by providing a set of styles that are shared between all these form controls. You can use it to create additional controls:
.bulma-control-mixin {
@include control ;
background : deeppink ;
color : white ;
}
HTML
<button class= "bulma-control-mixin" >
My control
</button>
Sizes
#
Controls have a default font size of $size-normal
and also come in 3 additional sizes , which can be accessed via 3 additional mixins:
with a font size $size-small
with a font size $size-medium
with a font size $size-large
.bulma-control-mixin {
& .is-small {
@include control-small ;
}
& .is-medium {
@include control-medium ;
}
& .is-large {
@include control-large ;
}
}
示例
Small
Normal
Medium
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 placeholder
#
The control()
mixin also exists as Sass placeholder %control
.bulma-control-extend {
@extend %control ;
background : mediumblue ;
color : white ;
}
HTML
<button class= "bulma-control-extend" >
My control
</button>