选项卡

简单的响应式水平导航选项卡，具有不同的样式

Bulma 的 tabs 是一个简单的导航组件，有多种版本。它们只需要以下结构

一个 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 或 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>

尺寸 #

您可以选择 3 种其他尺寸：is-small is-medium 和 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 和 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>

Sass 和 CSS 变量 #

Sass 变量	CSS 变量	值
`$tabs-border-bottom-color`	`var(--bulma-tabs-border-bottom-color)`	`var(--bulma-border)`
`$tabs-border-bottom-style`	`var(--bulma-tabs-border-bottom-style)`	`solid`
`$tabs-border-bottom-width`	`var(--bulma-tabs-border-bottom-width)`	`1px`
`$tabs-link-color`	`var(--bulma-tabs-link-color)`	`var(--bulma-text)`
`$tabs-link-hover-border-bottom-color`	`var(--bulma-tabs-link-hover-border-bottom-color)`	`var(--bulma-text-strong)`
`$tabs-link-hover-color`	`var(--bulma-tabs-link-hover-color)`	`var(--bulma-text-strong)`
`$tabs-link-active-border-bottom-color`	`var(--bulma-tabs-link-active-border-bottom-color)`	`var(--bulma-link-text)`
`$tabs-link-active-color`	`var(--bulma-tabs-link-active-color)`	`var(--bulma-link-text)`
`$tabs-link-padding`	`var(--bulma-tabs-link-padding)`	`0.5em 1em`
`$tabs-boxed-link-radius`	`var(--bulma-tabs-boxed-link-radius)`	`var(--bulma-radius)`
`$tabs-boxed-link-hover-background-color`	`var(--bulma-tabs-boxed-link-hover-background-color)`	`var(--bulma-background)`
`$tabs-boxed-link-hover-border-bottom-color`	`var(--bulma-tabs-boxed-link-hover-border-bottom-color)`	`var(--bulma-border)`
`$tabs-boxed-link-active-background-color`	`var(--bulma-tabs-boxed-link-active-background-color)`	`var(--bulma-scheme-main)`
`$tabs-boxed-link-active-border-color`	`var(--bulma-tabs-boxed-link-active-border-color)`	`var(--bulma-border)`
`$tabs-boxed-link-active-border-bottom-color`	`var(--bulma-tabs-boxed-link-active-border-bottom-color)`	`transparent`
`$tabs-toggle-link-border-color`	`var(--bulma-tabs-toggle-link-border-color)`	`var(--bulma-border)`
`$tabs-toggle-link-border-style`	`var(--bulma-tabs-toggle-link-border-style)`	`solid`
`$tabs-toggle-link-border-width`	`var(--bulma-tabs-toggle-link-border-width)`	`1px`
`$tabs-toggle-link-hover-background-color`	`var(--bulma-tabs-toggle-link-hover-background-color)`	`var(--bulma-background)`
`$tabs-toggle-link-hover-border-color`	`var(--bulma-tabs-toggle-link-hover-border-color)`	`var(--bulma-border-hover)`
`$tabs-toggle-link-radius`	`var(--bulma-tabs-toggle-link-radius)`	`var(--bulma-radius)`
`$tabs-toggle-link-active-background-color`	`var(--bulma-tabs-toggle-link-active-background-color)`	`var(--bulma-link)`
`$tabs-toggle-link-active-border-color`	`var(--bulma-tabs-toggle-link-active-border-color)`	`var(--bulma-link)`
`$tabs-toggle-link-active-color`	`var(--bulma-tabs-toggle-link-active-color)`	`var(--bulma-link-invert)`

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

选项卡

简单的响应式水平导航选项卡，具有不同的样式

对齐 #

图标 #

尺寸 #

样式 #

组合 #

Sass 和 CSS 变量 #

如何支持 Bulma

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

选项卡

简单的响应式水平导航 选项卡，具有不同的样式

对齐 #

图标 #

尺寸 #

样式 #

组合 #

Sass 和 CSS 变量 #

如何支持 Bulma

简单的响应式水平导航选项卡，具有不同的样式