选项卡导航(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>

变量 #

Name
Type
Value
Computed Value
Computed Type
$tabs-border-bottom-color
variable
$border
hsl(0, 0%, 86%)
color
$tabs-border-bottom-style
string
solid
$tabs-border-bottom-width
size
1px
$tabs-link-color
variable
$text
hsl(0, 0%, 29%)
color
$tabs-link-hover-border-bottom-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$tabs-link-hover-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$tabs-link-active-border-bottom-color
variable
$link
hsl(229, 53%,  53%)
color
$tabs-link-active-color
variable
$link
hsl(229, 53%,  53%)
color
$tabs-link-padding
size
0.5em 1em
$tabs-boxed-link-radius
variable
$radius
4px
size
$tabs-boxed-link-hover-background-color
variable
$background
hsl(0, 0%, 96%)
color
$tabs-boxed-link-hover-border-bottom-color
variable
$border
hsl(0, 0%, 86%)
color
$tabs-boxed-link-active-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$tabs-boxed-link-active-border-color
variable
$border
hsl(0, 0%, 86%)
color
$tabs-boxed-link-active-border-bottom-color
string
transparent
$tabs-toggle-link-border-color
variable
$border
hsl(0, 0%, 86%)
color
$tabs-toggle-link-border-style
string
solid
$tabs-toggle-link-border-width
size
1px
$tabs-toggle-link-hover-background-color
variable
$background
hsl(0, 0%, 96%)
color
$tabs-toggle-link-hover-border-color
variable
$border-hover
hsl(0, 0%, 71%)
color
$tabs-toggle-link-radius
variable
$radius
4px
size
$tabs-toggle-link-active-background-color
variable
$link
hsl(229, 53%,  53%)
color
$tabs-toggle-link-active-border-color
variable
$link
hsl(229, 53%,  53%)
color
$tabs-toggle-link-active-color
variable
$link-invert
#fff
color

返回头部

问题反馈
返回顶部