Foundation 标签（Label） - Foundation教程

一、标签概述

.label 类用于为内容提供附加信息，常见用途包括在文章标题中为某些文字增加凸显效果、显示数量徽章、状态标记等。

标签支持多种颜色变体和圆角样式。

二、在标题中使用标签

标签常用于标题中，用于标记”New”、”Hot”等状态：

<h2>Example <span class="label">New</span></h2>
<h3>Example <span class="label">New</span></h3>
<h4>Example <span class="label">New</span></h4>Code language: HTML, XML (xml)

三、标签颜色变体

与按钮类似，标签也提供 6 种颜色方案：

类名	说明
`.label`	默认蓝色
`.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">Success Label</span>
<span class="label alert">Alert Label</span>Code language: HTML, XML (xml)

四、圆角标签

使用 .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>Code language: HTML, XML (xml)

.round 类常用于数字徽章，如未读消息数量提示。

五、完整可运行示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 标签示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</head>
<body>

<div class="row">
    <div class="medium-12 columns">

        <h3>在标题中使用标签</h3>
        <h2>Example <span class="label">New</span></h2>
        <h3>Example <span class="label">New</span></h3>
        <h4>Example <span class="label">New</span></h4>

        <hr />

        <h3>标签颜色变体</h3>
        <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">Success Label</span>
        <span class="label alert">Alert Label</span>

        <hr />

        <h3>圆角与数字徽章</h3>
        <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>

    </div>
</div>

</body>
</html>Code language: HTML, XML (xml)