Button 是设计中的必备元素。在您的页面中通茶它是一个查看和执行的互动性元素。
HTML
button
类可用于:
-
<a>
锚点链接
-
<button>
表单按钮
-
<input type="submit">
提交输入
-
<input type="reset">
重置输入
HTML
颜色
#
示例
HTML
示例
HTML
每种颜色都有它的 light 版本。只需在其颜色修饰符后再加上 is-light
修饰符就可以使用该 button 的 light 版本。
示例
HTML
型号
#
button 有 4 种不同型号:
-
small
-
normal
-
medium
-
large
默认型号是 normal,修饰符 is-normal
之所以需要,是因为有时您需要重置到 normal 型号。
示例
HTML
您可以通过将多个 button 放入一个 buttons
父元素中然后一次修改其型号为以下三个修饰符之一:
-
buttons are-small
-
buttons are-medium
-
buttons are-large
HTML
您可以通过为其添加修饰符修改部分 button 的型号。
例如,如果您想要所有的 button 都是 small 型号,但其中一个是 normal 型号,只需这么做:
示例
HTML
自适应型号
#
New!
0.9.4
如果您想要为每个断点设置不同的 button 型号,可以使用 Bulma 的自适应 button。只需添加 is-responsive
修饰符:
Name |
Fixed size |
Responsive size (resize window to see in action) |
Code |
Default |
|
|
|
Small |
|
|
|
Normal |
|
|
|
Medium |
|
|
|
Large |
|
|
|
您可以定制型号——通过重写 Sass 变量 $button-responsive-sizes
即可。
显示
#
示例
HTML
样式
#
Outlined
示例
HTML
Inverted(文本颜色变背景色,反之亦然)
Invert Outlined (反转颜色变为文本和边框颜色)
圆角 button
状态
#
Bulma 为 button 的不同状态(state)制作了样式。每个状态可使用一个 CSS 类和一个对应的伪类(pseudo-class)来表示:
-
:hover
和 is-hovered
-
:focus
和 is-focused
-
:active
和 is-active
这就可以使您不用触碰它而获得相应的状态表现。
Normal
示例
HTML
Hover
示例
HTML
Focus
示例
HTML
Active
示例
HTML
加载中
您可以通过添加 is-loading
修饰符方式很容易将一个 button 变成加载中样式。您甚至不需要删除里面的文字,因为允许 button 在从默认状态到加载状态时保持它的原本型号。
因为加载旋钮使用 ::after
伪元素扩展,它不支持 <input type="submit">
元素。可以考虑使用 <button type="submit">
替换。
您可以通过使用 is-static
修饰符创建一个非互动 button。这对于对齐有文本标题的输入框很有用,例如当我们使用表单扩展时会看到。
Static
禁用
Bulma 支持使用 disabled
Boolean HTML 属性,从而阻止用户使用 button 互动。
CSS 类 is-disabled
已被弃用,而启用 HTML 的 disabled
属性。了解更多
使用 Font Awesome 图标
Bulma 的 button 通过添加 Font Awesome 图标很容易扩展增强。最好的做法就是,通过使用独立的 <span>
元素包裹内部文字。
示例
HTML
如果 button 只包含图标,Bulma 不管 button 还是图标的大小,都会确保 button 为方形。
如果您想要在一行里将 button 分组到一起,在 field
容器上使用 is-grouped
修饰符:
示例
HTML
如果您要为 button 做扩展(addons),在 field
容器上使用 has-addons
修饰符:
HTML
HTML
您可以通过使用 buttons
修饰符创建 Button 列表。
如果列表很长,它会自动使用多行进行包裹,从而保证所有 button 合理布局。
您可以将 has-addons
修饰符连同 buttons 修饰符一起使用。
使用 is-centered
或 is-right
修饰符调整对齐方式。
您可以在每一个 Button 上使用任何修饰符类来美化它们。要确保添加 is-selected
修饰符到那个需要看起来要高于其它相邻 Button 的元素之上。
这个 Button 列表样式可认为是 field is-grouped
的一种或者是新 buttons
类,差别很小:
-
buttons
简化了标记
-
buttons
可以只包含 button
元素
-
field is-grouped
可以包含任何类型控制
输入元素
-
field is-grouped
可强制所有控制元素到一行之内
-
使用
field is-grouped
您可以 expand 控制
总之,如果您想要一个 button 列表,就推荐使用 buttons
。如果您需要更多的控制定制和元素,就是用 表单组。
Variables
#
Name
Type
Value
Computed Value
Computed Type
size
size
variable
color
variable
color
size
compound
variable
color
variable
color
string
variable
color
string
variable
color
variable
color
variable
color
variable
color
compound