Bulma选项卡是一个简单的导航组件,有多种版本。它们只需要以下结构:
-
tabs
选项卡容器 -
<ul>
HTML列表元素 -
<li>
HTML列表项元素 -
<a>
HTML链接
默认选项卡样式的底部只有一个边框。
选项卡导航(Tabs)
简单响应的水平导航选项卡,具有不同的样式
Bulma选项卡是一个简单的导航组件,有多种版本。它们只需要以下结构:
tabs
选项卡容器
<ul>
HTML列表元素
<li>
HTML列表项元素
<a>
HTML链接
默认选项卡样式的底部只有一个边框。
HTML
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
要对齐选项卡列表,请使用.tabs容器上的“居中”或“向右”修饰符:
is-centered
or is-right
HTML
<div class="tabs is-centered">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
HTML
<div class="tabs is-right">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
你可以用任何Font Awesome 文字图标.
HTML
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
你可以选择三种大小: is-small
is-medium
and is-large
.
HTML
<div class="tabs is-small">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
HTML
<div class="tabs is-medium">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
HTML
<div class="tabs is-large">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
is-boxed
修饰符。
HTML
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
如果需要互斥选项卡(如单选按钮,单击其中一个可取消选择所有其他选项卡),请使用is-toggle
修饰符。
HTML
<div class="tabs is-toggle">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
如果同时使用is-toggle
and is-toggle-rounded
,则第一个和最后一个项目将是圆角的。
HTML
<div class="tabs is-toggle is-toggle-rounded">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
如果您想让标签占据整个可用宽度,请使用is-fullwidth
。
HTML
<div class="tabs is-fullwidth">
<ul>
<li>
<a>
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
<span>Left</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
<span>Up</span>
</a>
</li>
<li>
<a>
<span>Right</span>
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
</a>
</li>
</ul>
</div>
可以组合不同的修改器。例如,您可以有居中的方框选项卡,或全角切换选项卡。
HTML
<div class="tabs is-centered is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
HTML
<div class="tabs is-toggle is-fullwidth">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
HTML
<div class="tabs is-centered is-boxed is-medium">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
HTML
<div class="tabs is-toggle is-fullwidth is-large">
<ul>
<li class="is-active">
<a>
<span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
$tabs-border-bottom-color
$border
hsl(0, 0%, 86%)
$tabs-border-bottom-style
solid
$tabs-border-bottom-width
1px
$tabs-link-color
$text
hsl(0, 0%, 29%)
$tabs-link-hover-border-bottom-color
$text-strong
hsl(0, 0%, 21%)
$tabs-link-hover-color
$text-strong
hsl(0, 0%, 21%)
$tabs-link-active-border-bottom-color
$link
hsl(229, 53%, 53%)
$tabs-link-active-color
$link
hsl(229, 53%, 53%)
$tabs-link-padding
0.5em 1em
$tabs-boxed-link-radius
$radius
4px
$tabs-boxed-link-hover-background-color
$background
hsl(0, 0%, 96%)
$tabs-boxed-link-hover-border-bottom-color
$border
hsl(0, 0%, 86%)
$tabs-boxed-link-active-background-color
$scheme-main
hsl(0, 0%, 100%)
$tabs-boxed-link-active-border-color
$border
hsl(0, 0%, 86%)
$tabs-boxed-link-active-border-bottom-color
transparent
$tabs-toggle-link-border-color
$border
hsl(0, 0%, 86%)
$tabs-toggle-link-border-style
solid
$tabs-toggle-link-border-width
1px
$tabs-toggle-link-hover-background-color
$background
hsl(0, 0%, 96%)
$tabs-toggle-link-hover-border-color
$border-hover
hsl(0, 0%, 71%)
$tabs-toggle-link-radius
$radius
4px
$tabs-toggle-link-active-background-color
$link
hsl(229, 53%, 53%)
$tabs-toggle-link-active-border-color
$link
hsl(229, 53%, 53%)
$tabs-toggle-link-active-color
$link-invert
#fff