企业官网建设流程全解析

Foundation 标签（Labels）是 ZURB 开发的Foundation前端框架中的一个 UI 组件，主要用于在网页中创建小型、内联的文本标签，常用于突出显示状态、类别、提示信息等（如“New”、“Hot”、“Sale”等）。它类似于 Bootstrap 中的 labels，但 Foundation 中更注重响应式和可访问性。

基本用法

使用<span class="label">来创建标签：

<spanclass="label">Default</span><spanclass="label success">Success</span><spanclass="label alert">Alert</span><spanclass="label warning">Warning</span><spanclass="label secondary">Secondary</span><spanclass="label info">Info</span><!-- 旧版可能有 info，新版基于 palette -->

颜色变体

Foundation 使用颜色类来快速改变标签外观：

• 默认（primary）
• .secondary：灰色/次要
• .success：绿色（成功）
• .alert或.danger：红色（警告/错误）
• .warning：橙色/黄色（警示）

圆角样式

添加.radius或.round类实现圆角效果：

<spanclass="label round success">Rounded Success</span>

与 Badges 的区别

Foundation 还有Badges组件（<span class="badge">），专门用于显示数字（如通知计数），外观类似圆形小徽章：

<spanclass="badge">5</span><spanclass="badge success">10</span>

以下是一些 Foundation Labels 和 Badges 的示例展示（包括不同颜色和样式）：

官方文档（Foundation 6）：https://get.foundation/sites/docs/label.html（Labels）和 https://get.foundation/sites/docs/badge.html（Badges）

如果您指的是其他含义的“Foundation 标签”（如化妆品标签或 Apple 的 Foundation 框架），请提供更多上下文！