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>悬停/激活状态 #
如果满足以下条件，标签元素将对 :hover 和 :active 状态做出反应
- 它是一个锚元素
<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>组合 #
您可以创建 可悬停的彩色 标签。
<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>您可以附加一个 删除按钮。
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>标签列表 #
您现在可以使用 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 修饰符将 标签连接在一起。
<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 容器 连接在一起，只需使用带有 is-grouped 和 is-grouped-multiline 修饰符的 field 元素即可。
<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.4</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>这对于长的 博客标签 列表很有用。
<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 变量
|
值
|
|---|---|---|
|
|
|
|
|
|
