下载

从这里开始

特性

Sass 工具

定制

CSS 库

CSS 帮助器

赞助商

Password.link

标签

小标签可插入到任何位置

Bulma 标签是一个小巧但用途广泛的元素。它非常适合将信息附加到块或其他组件。其大小也使其易于以数字显示，使其适用于长列表的项目。

默认情况下，标签是一个 1.5rem 高的标签。
标签标签 
<span class="tag"> Tag label </span>

颜色 #

与按钮一样，有10 种不同的颜色可用。

黑色

深色

浅色

白色

主色

链接

信息

成功

警告

危险 
<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>

现在您可以选择颜色的浅色版本。

主色

链接

信息

成功

警告

危险 
<span class="tag is-primary is-light">Primary</span>
<span class="tag is-link is-light">Link</span>
<span class="tag is-info is-light">Info</span>
<span class="tag is-success is-light">Success</span>
<span class="tag is-warning is-light">Warning</span>
<span class="tag is-danger is-light">Danger</span>

尺寸 #

标签有 3 种不同尺寸。

虽然默认尺寸是正常尺寸，但是 is-normal 修饰符在您需要将标签重置为正常尺寸时存在。

正常

中等

大 

<span class="tag is-link is-normal">Normal</span>
<span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span>

您可以一次更改所有标签的尺寸

示例

全部 中等 尺寸

HTML 

<div class="tags are-medium">
  <span class="tag">All</span>
  <span class="tag">Medium</span>
  <span class="tag">Size</span>
</div>

示例

全部 大 尺寸

HTML 

<div class="tags are-large">
  <span class="tag">All</span>
  <span class="tag">Large</span>
  <span class="tag">Size</span>
</div>

但是，您可以通过简单地应用其一个修饰符类来保持子集标签的原始尺寸

示例

中等 正常 中等 大 中等

HTML 

<div class="tags are-medium">
  <span class="tag">Medium</span>
  <span class="tag is-normal">Normal</span>
  <span class="tag">Medium</span>
  <span class="tag is-large">Large</span>
  <span class="tag">Medium</span>
</div>

悬停/活动状态 #

如果标签元素是

  • 锚元素 <a class="tag">
  • 按钮元素 <button class="tag">
  • 它具有 is-hoverable 修饰符类 <div class="tag is-hoverable">

示例

悬停我
悬停我

HTML 

<a class="tag">Hover me</a>
<button class="tag">Hover me</button>
<div class="tag is-hoverable">Hover me</div>

修饰符 #

您可以添加 is-rounded 修饰符以制作圆角标签。
圆角 
<span class="tag is-rounded">Rounded</span>
您可以添加 is-delete 修饰符将标签变成删除按钮。 
<a class="tag is-delete"></a>

组合 #

您可以创建可悬停的彩色标签。
悬停我
悬停我
悬停我
悬停我
<a class="tag is-link">Hover me</a>
<button class="tag is-primary">Hover me</button>
<div class="tag is-hoverable is-success">Hover me</div>
<a class="tag is-info">Hover me</a>
<button class="tag is-warning">Hover me</button>
<div class="tag is-hoverable is-danger">Hover me</div>
您可以附加删除按钮。

条

你好

世界 

<span class="tag is-success">
  Bar
  <button class="delete is-small"></button>
</span>
<span class="tag is-warning is-medium">
  Hello
  <button class="delete is-small"></button>
</span>
<span class="tag is-danger is-large">
  World
  <button class="delete"></button>
</span>

标签列表 #

现在，您可以使用 tags 容器创建标签列表。

一 二 三 
<div class="tags">
  <span class="tag">One</span>
  <span class="tag">Two</span>
  <span class="tag">Three</span>
</div>

如果列表很长，它将自动换行到多行，同时保持所有标签均匀间距。

一 二 三 四 五 六 七 八 九 十 十一 十二 十三 十四 十五 十六 十七 十八 十九 二十 
<div class="tags">
  <span class="tag">One</span>
  <span class="tag">Two</span>
  <span class="tag">Three</span>
  <span class="tag">Four</span>
  <span class="tag">Five</span>
  <span class="tag">Six</span>
  <span class="tag">Seven</span>
  <span class="tag">Eight</span>
  <span class="tag">Nine</span>
  <span class="tag">Ten</span>
  <span class="tag">Eleven</span>
  <span class="tag">Twelve</span>
  <span class="tag">Thirteen</span>
  <span class="tag">Fourteen</span>
  <span class="tag">Fifteen</span>
  <span class="tag">Sixteen</span>
  <span class="tag">Seventeen</span>
  <span class="tag">Eighteen</span>
  <span class="tag">Nineteen</span>
  <span class="tag">Twenty</span>
</div>

标签附加组件 #

你可以使用 has-addons 修饰符将标签附加在一起。

包 Bulma 
<div class="tags has-addons">
  <span class="tag">Package</span>
  <span class="tag is-primary">Bulma</span>
</div>

你可以将文本标签与删除标签附加在一起。

Alex Smith 
<div class="tags has-addons">
  <span class="tag is-danger">Alex Smith</span>
  <a class="tag is-delete"></a>
</div>

如果你想将标签容器附加在一起，只需使用具有 is-grouped 和 is-grouped-multiline 修饰符的 field 元素。

npm 1.0.0
构建 通过
聊天 在 gitter 上 
<div class="field is-grouped is-grouped-multiline">
  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">npm</span>
      <span class="tag is-info">1.0.0</span>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">build</span>
      <span class="tag is-success">passing</span>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">chat</span>
      <span class="tag is-primary">on gitter</span>
    </div>
  </div>
</div>

这对于博客标签的长列表很有用。

技术
CSS
Flexbox
网页设计
开源
社区
文档 
<div class="field is-grouped is-grouped-multiline">
  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Technology</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">CSS</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Flexbox</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Web Design</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Open Source</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Community</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Documentation</a>
      <a class="tag is-delete"></a>
    </div>
  </div>
</div>

Sass 和 CSS 变量 #

Sass 变量
CSS 变量
值 
$tag-radius
 
var(--bulma-tag-radius)
 
var(--bulma-radius)
 
$tag-delete-margin
 
var(--bulma-tag-delete-margin)
 
1px

如何支持 Bulma

一次性捐赠

访问我们的赞助商

每月捐赠

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