Foundation 标签

前言

• Foundation 标签。

1、标签

• .label 类用于提供一些附加信息:

• 实例

  <h2>Example <span class="label">New</span></h2>
  <h3>Example <span class="label">New</span></h3>
  <h4>Example <span class="label">New</span></h4>

• 效果 🔗

  

2、标签颜色

• 以下类可以设置标签的颜色: .secondary, .success, .info, .warning 或 .alert:

• 实例

  <span class="label">Default Label</span>
  <span class="label secondary">Secondary Label</span>
  <span class="label success">Success Label</span>
  <span class="label info">Info Label</span>
  <span class="label warning">Warning Label</span>
  <span class="label alert">Alert Label</span>

• 效果 🔗

  

3、圆角标签

• .radius 与 .round 类可以为标签添加圆角：

• 实例

  <span class="label">Default Label</span>
  <span class="label radius">Radius Label</span>
  <span class="label round">Round Label</span>
  <span class="label success round">5</span>

• 效果 🔗

  

4、标签大小

• 可以使用 CSS 来修改标签的大小:

• 实例

  <h1>Example <span class="label" style="font-size: 36px;">New</span></h1>
  <h2>Example <span class="label" style="font-size: 30px;">New</span></h2>
  <h3>Example <span class="label" style="font-size: 20px;">New</span></h3>
  <h4>Example <span class="label">New</span></h4>

• 效果 🔗