Foundation 标签

Foundation 标签（Labels）是一种小型的 UI 元素，用于突出显示信息、标记状态或分类内容。本章将介绍 Foundation 标签的各种用法。

基本标签

使用 .label 类创建基本标签：

html

<span class="label">默认标签</span>

标签颜色

Foundation 提供了多种预定义的标签颜色：

html

<span class="label primary">Primary</span>
<span class="label secondary">Secondary</span>
<span class="label success">Success</span>
<span class="label warning">Warning</span>
<span class="label alert">Alert</span>

颜色用途说明

类名	颜色	常见用途
`.primary`	蓝色	主要信息、默认状态
`.secondary`	灰色	次要信息、中性状态
`.success`	绿色	成功、已完成、在线
`.warning`	黄色	警告、待处理、注意
`.alert`	红色	错误、危险、紧急

标签在文本中的使用

标签可以嵌入到段落或标题中：

html

<h1>产品名称 <span class="label">新品</span></h1>

<h2>版本 2.0 <span class="label success">稳定版</span></h2>

<p>
    这个功能目前处于 <span class="label warning">测试中</span> 状态，
    请谨慎使用。
</p>

徽章（Badge）

徽章是标签的变体，通常用于显示数字或计数：

html

<span class="badge">1</span>
<span class="badge primary">5</span>
<span class="badge secondary">10</span>
<span class="badge success">99+</span>
<span class="badge warning">3</span>
<span class="badge alert">!</span>

徽章与导航结合

html

<ul class="menu">
    <li><a href="#">收件箱 <span class="badge primary">5</span></a></li>
    <li><a href="#">草稿箱 <span class="badge secondary">2</span></a></li>
    <li><a href="#">垃圾箱 <span class="badge alert">10</span></a></li>
</ul>

徽章与按钮结合

html

<a class="button" href="#">
    消息 <span class="badge">3</span>
</a>

<a class="button alert" href="#">
    通知 <span class="badge" style="background: white; color: #cc4b37;">99+</span>
</a>

自定义标签样式

圆角标签

html

<style>
    .label.rounded {
        border-radius: 50px;
        padding-left: 12px;
        padding-right: 12px;
    }
</style>

<span class="label rounded">圆角标签</span>
<span class="label rounded primary">Primary</span>
<span class="label rounded success">Success</span>

空心标签

html

<style>
    .label.hollow {
        background: transparent;
        border: 1px solid currentColor;
    }
    .label.hollow.primary { color: #1779ba; }
    .label.hollow.success { color: #3adb76; }
    .label.hollow.warning { color: #ffae00; }
    .label.hollow.alert { color: #cc4b37; }
</style>

<span class="label hollow primary">Primary</span>
<span class="label hollow success">Success</span>
<span class="label hollow warning">Warning</span>
<span class="label hollow alert">Alert</span>

带图标的标签

html

<span class="label success">
    <i class="fi-check"></i> 已完成
</span>

<span class="label warning">
    <i class="fi-clock"></i> 进行中
</span>

<span class="label alert">
    <i class="fi-x"></i> 已取消
</span>

标签尺寸

自定义不同尺寸的标签：

html

<style>
    .label.tiny {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
    }
    .label.small {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    .label.large {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
</style>

<span class="label tiny">Tiny</span>
<span class="label small">Small</span>
<span class="label">Default</span>
<span class="label large">Large</span>

可移除标签

创建可以关闭的标签：

html

<style>
    .label.removable {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .label.removable .remove-btn {
        cursor: pointer;
        opacity: 0.7;
        font-weight: bold;
    }
    .label.removable .remove-btn:hover {
        opacity: 1;
    }
</style>

<span class="label removable primary">
    JavaScript
    <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
</span>

<span class="label removable success">
    HTML
    <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
</span>

<span class="label removable warning">
    CSS
    <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
</span>

标签组

创建一组相关的标签：

html

<style>
    .label-group {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
</style>

<div class="label-group">
    <span class="label">前端开发</span>
    <span class="label">React</span>
    <span class="label">Vue</span>
    <span class="label">Angular</span>
    <span class="label">Node.js</span>
</div>

状态标签示例

订单状态

html

<table>
    <thead>
        <tr>
            <th>订单号</th>
            <th>金额</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ORD001</td>
            <td>¥199</td>
            <td><span class="label success">已完成</span></td>
        </tr>
        <tr>
            <td>ORD002</td>
            <td>¥299</td>
            <td><span class="label warning">配送中</span></td>
        </tr>
        <tr>
            <td>ORD003</td>
            <td>¥99</td>
            <td><span class="label primary">待付款</span></td>
        </tr>
        <tr>
            <td>ORD004</td>
            <td>¥599</td>
            <td><span class="label alert">已取消</span></td>
        </tr>
    </tbody>
</table>

用户角色

html

<ul class="no-bullet">
    <li>
        张三 <span class="label alert">管理员</span>
    </li>
    <li>
        李四 <span class="label primary">编辑</span>
    </li>
    <li>
        王五 <span class="label secondary">普通用户</span>
    </li>
</ul>

完整示例

html

<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 标签示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 30px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 15px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .label { margin-right: 5px; margin-bottom: 5px; }

        /* 自定义样式 */
        .label.rounded { border-radius: 50px; padding-left: 12px; padding-right: 12px; }
        .label.hollow { background: transparent; border: 1px solid currentColor; }
        .label.hollow.primary { color: #1779ba; }
        .label.hollow.success { color: #3adb76; }
        .label.hollow.warning { color: #ffae00; }
        .label.hollow.alert { color: #cc4b37; }

        .label.tiny { font-size: 0.6rem; padding: 0.2rem 0.4rem; }
        .label.small { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
        .label.large { font-size: 1rem; padding: 0.5rem 0.75rem; }

        .label.removable {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .label.removable .remove-btn {
            cursor: pointer;
            opacity: 0.7;
        }
        .label.removable .remove-btn:hover { opacity: 1; }

        .label-group { display: flex; flex-wrap: wrap; gap: 5px; }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 标签展示</h1>

        <div class="demo-section">
            <h3>基本标签</h3>
            <span class="label primary">Primary</span>
            <span class="label secondary">Secondary</span>
            <span class="label success">Success</span>
            <span class="label warning">Warning</span>
            <span class="label alert">Alert</span>
        </div>

        <div class="demo-section">
            <h3>徽章</h3>
            <span class="badge">1</span>
            <span class="badge primary">5</span>
            <span class="badge secondary">10</span>
            <span class="badge success">99+</span>
            <span class="badge warning">3</span>
            <span class="badge alert">!</span>
        </div>

        <div class="demo-section">
            <h3>标签尺寸</h3>
            <span class="label tiny primary">Tiny</span>
            <span class="label small primary">Small</span>
            <span class="label primary">Default</span>
            <span class="label large primary">Large</span>
        </div>

        <div class="demo-section">
            <h3>圆角标签</h3>
            <span class="label rounded primary">Primary</span>
            <span class="label rounded success">Success</span>
            <span class="label rounded warning">Warning</span>
            <span class="label rounded alert">Alert</span>
        </div>

        <div class="demo-section">
            <h3>空心标签</h3>
            <span class="label hollow primary">Primary</span>
            <span class="label hollow success">Success</span>
            <span class="label hollow warning">Warning</span>
            <span class="label hollow alert">Alert</span>
        </div>

        <div class="demo-section">
            <h3>带图标标签</h3>
            <span class="label success"><i class="fi-check"></i> 已完成</span>
            <span class="label warning"><i class="fi-clock"></i> 进行中</span>
            <span class="label alert"><i class="fi-x"></i> 已取消</span>
            <span class="label primary"><i class="fi-star"></i> 推荐</span>
        </div>

        <div class="demo-section">
            <h3>可移除标签</h3>
            <span class="label removable primary">
                JavaScript <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
            </span>
            <span class="label removable success">
                HTML <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
            </span>
            <span class="label removable warning">
                CSS <span class="remove-btn" onclick="this.parentElement.remove()">&times;</span>
            </span>
        </div>

        <div class="demo-section">
            <h3>在标题中使用</h3>
            <h2>Foundation 6 <span class="label success">最新版</span></h2>
            <h4>功能预览 <span class="label warning">Beta</span></h4>
        </div>

        <div class="demo-section">
            <h3>标签组</h3>
            <div class="label-group">
                <span class="label">HTML</span>
                <span class="label">CSS</span>
                <span class="label">JavaScript</span>
                <span class="label">React</span>
                <span class="label">Vue</span>
                <span class="label">Node.js</span>
            </div>
        </div>

        <div class="demo-section">
            <h3>导航中的徽章</h3>
            <ul class="menu">
                <li><a href="#">收件箱 <span class="badge primary">5</span></a></li>
                <li><a href="#">草稿箱 <span class="badge secondary">2</span></a></li>
                <li><a href="#">已发送</a></li>
                <li><a href="#">垃圾箱 <span class="badge alert">10</span></a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>状态标签示例</h3>
            <table class="hover">
                <thead>
                    <tr>
                        <th>订单号</th>
                        <th>客户</th>
                        <th>金额</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>ORD001</td>
                        <td>张三</td>
                        <td>¥199</td>
                        <td><span class="label success">已完成</span></td>
                    </tr>
                    <tr>
                        <td>ORD002</td>
                        <td>李四</td>
                        <td>¥299</td>
                        <td><span class="label warning">配送中</span></td>
                    </tr>
                    <tr>
                        <td>ORD003</td>
                        <td>王五</td>
                        <td>¥99</td>
                        <td><span class="label primary">待付款</span></td>
                    </tr>
                    <tr>
                        <td>ORD004</td>
                        <td>赵六</td>
                        <td>¥599</td>
                        <td><span class="label alert">已取消</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

标签最佳实践

颜色语义化：使用合适的颜色表达状态含义
简洁文字：标签文字应该简短明了
适量使用：避免在页面上使用过多标签造成视觉混乱
对比度：确保标签文字和背景有足够的对比度
可访问性：对于重要信息，不要仅依赖颜色传达含义

html

<!-- 好的实践：颜色 + 图标 + 文字 -->
<span class="label success">
    <i class="fi-check" aria-hidden="true"></i> 已完成
</span>

<!-- 避免：仅用颜色区分 -->
<span class="label success"></span>
<span class="label alert"></span>

总结

本章我们学习了：

基本标签的创建和颜色变体
徽章的使用
自定义标签样式（圆角、空心、带图标）
标签尺寸控制
可移除标签和标签组
标签在实际场景中的应用

下一章，我们将学习 Foundation 提醒框。

提示：标签是一种有效的信息标记方式，但要注意不要过度使用，保持页面的整洁和可读性。

Foundation 标签 ​

基本标签 ​

标签颜色 ​

颜色用途说明 ​

标签在文本中的使用 ​

徽章（Badge） ​

徽章与导航结合 ​

徽章与按钮结合 ​

自定义标签样式 ​

圆角标签 ​

空心标签 ​

带图标的标签 ​

标签尺寸 ​

可移除标签 ​

标签组 ​

状态标签示例 ​

订单状态 ​

用户角色 ​

完整示例 ​

标签最佳实践 ​

总结 ​

Foundation 标签

基本标签

标签颜色

颜色用途说明

标签在文本中的使用

徽章（Badge）

徽章与导航结合

徽章与按钮结合

自定义标签样式

圆角标签

空心标签

带图标的标签

标签尺寸

可移除标签

标签组

状态标签示例

订单状态

用户角色

完整示例

标签最佳实践

总结