文档

当你使用 Bulma 创建一个网站 所需要的一切

Tags

一个可以插入任何地方的小标签

Colors Yes

Sizes Yes

Variables Yes

默认情况下，一个标签是 1.5rem 高度。

Tag label

<span class="tag">
  Tag label
</span>

Colors | 颜色 #

和按钮一样，有 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>

Sizes | 尺寸 #

有 2 种额外 的尺寸

Medium

Large

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

Modifiers | 修饰符 #

您可以添加 is-rounded 修饰符来产生一个圆形标签。

Rounded

<span class="tag is-rounded">Rounded</span>

You can add the is-delete modifier to turn the tag into a delete button.

<a class="tag is-delete"></a>

Combinations | 组合 #

您可以附加一个 删除按钮。

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>

List of tags | 标签列表 #

您现在可以使用 .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>
      

您还可以和 .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.5.0

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

这对于一长串的 博客标签 是很有用的。

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>

Variables | 变量 #

你可以使用这些变量来 自定义 这些 element。只需要在导入 Bulma 之前设置这些变量学习如何开始.

Name	Default value
Name	Default value
`$tag-background-color`	`$background`
`$tag-color`	`$text`
`$tag-radius`	`$radius`
`$tag-delete-margin`	`1px`

这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!