Bulma标签是一个小但多功能的元素。作为一种将信息附加到块或其他组件的方法,它非常有用。它的大小也使得它很容易显示为数字,这使得它适合于长长的项目列表。
标签(Tags)
可在任何位置插入的小标签
<span class="tag">
Tag label
</span>
1.颜色
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
HTML
<div class="tags are-medium">
<span class="tag">All</span>
<span class="tag">Medium</span>
<span class="tag">Size</span>
</div>
Example
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
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
修饰符可以做圆形标签 。
<span class="tag is-rounded">Rounded</span>
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
创建一个标签列表容器。
<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>
6.标签附加
可以使用has-addons
修饰符将多个标记附加在一起。
<div class="tags has-addons">
<span class="tag">Package</span>
<span class="tag is-primary">Bulma</span>
</div>
可以将文本标记与删除标记附加在一起。
<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
多行修饰符一起使用即可。
<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标签非常有用。
<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.变量
$tag-background-color
$background
hsl(0, 0%, 96%)
$tag-color
$text
hsl(0, 0%, 29%)
$tag-radius
$radius
4px
$tag-delete-margin
1px
$tag-colors
$colors
Bulma colors