下载

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

赞助商

Password.link

标签页

简单响应式水平导航标签页，具有不同的样式

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 或 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 变量
值 
$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 变量 #

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)

如何支持 Bulma

一次性捐赠

访问我们的赞助商

每月捐赠

成为赞助商
#native_company# #native_desc#
#native_cta#