Bulma选项卡是一个简单的导航组件,有多种版本。它们只需要以下结构:
-
tabs
选项卡容器
-
<ul>
HTML列表元素
-
<li>
HTML列表项元素
-
<a>
HTML链接
默认选项卡样式的底部只有一个边框。
HTML
对齐
#
要对齐选项卡列表,请使用.tabs容器上的“居中”或“向右”修饰符:
is-centered
or is-right
HTML
HTML
图标
#
HTML
大小
#
你可以选择三种大小: is-small
is-medium
and is-large
.
HTML
HTML
HTML
样式
#
如果您想要更经典的带有边框的样式,只需附加is-boxed
修饰符。
HTML
如果需要互斥选项卡(如单选按钮,单击其中一个可取消选择所有其他选项卡),请使用is-toggle
修饰符。
HTML
如果同时使用is-toggle
and is-toggle-rounded
,则第一个和最后一个项目将是圆角的。
HTML
如果您想让标签占据整个可用宽度,请使用is-fullwidth
。
HTML
组合
#
可以组合不同的修改器。例如,您可以有居中的方框选项卡,或全角切换选项卡。
HTML
HTML
HTML
HTML
变量
#
Name
Type
Value
Computed Value
Computed Type
variable
color
string
size
variable
color
variable
color
variable
color
variable
color
variable
color
variable
color
string
variable
color
string
size
variable
color
variable
color
variable
color
variable
color
variable
color
返回头部