标签（Tags）

可在任何位置插入的小标签

1

Bulma标签是一个小但多功能的元素。作为一种将信息附加到块或其他组件的方法，它非常有用。它的大小也使得它很容易显示为数字，这使得它适合于长长的项目列表。

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

1.颜色

像按钮一样，tag也有10种不同的颜色。

Black

Dark

Light

White

Primary

Link

Info

Success

Warning

Danger 
<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>

同样，你也可以选择浅色版本的颜色。

Primary

Link

Info

Success

Warning

Danger 
<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>

2.大小

tag有3种不同的大小。

虽然，默认的normal 是正常大小, is-normal 修饰符可以让你重置为正常大小。

Normal

Medium

Large 

<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>

你可以在tags标签组中一次设置多个tag具有相同的大小。

Example

All Medium Size

HTML 

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

Example

All Large Size

HTML 

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

You can however keep the original size of a subset of tags, simply by applying one of its modifier class:

Example

Medium Normal Medium Large Medium

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>

3.修饰符

is-rounded 修饰符可以做圆形标签 。
Rounded 
<span class="tag is-rounded">Rounded</span>
is-delete 可以做带删除标记的标签。 
<a class="tag is-delete"></a>

4.组合

你可以在标签中附加一个删除按钮。

Bar

Hello

World 

<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>

5.标签列表容器

你可以用 tags 创建一个标签列表容器。

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

如果列表很长，它将自动换行，同时保持所有标记的间距相等。

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty 
<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>

6.标签附加

可以使用has-addons修饰符将多个标记附加在一起。

Package 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>

如果要将tags容器附着在一起，只需将field元素与 is-grouped和is-grouped-multiline多行修饰符一起使用即可。

npm 0.9.1
build passing
chat on 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">0.9.1</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>

这对于一长串的blog标签非常有用。

Technology
CSS
Flexbox
Web Design
Open Source
Community
Documentation 
<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>

7.变量

Name
Type
Value
Computed Value
Computed Type 
$tag-background-color
variable
$background
hsl(0, 0%, 96%)
color
$tag-color
variable
$text
hsl(0, 0%, 29%)
color
$tag-radius
variable
$radius
4px
size
$tag-delete-margin
size
1px
$tag-colors
variable
$colors
Bulma colors
map

返回头部

23222

问题反馈
返回顶部