Foundation 标签

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

基本用法

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

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

颜色变体

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

  • 默认(primary)
  • .secondary:灰色/次要
  • .success:绿色(成功)
  • .alert.danger:红色(警告/错误)
  • .warning:橙色/黄色(警示)

圆角样式

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

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

与 Badges 的区别

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

<span class="badge">5</span>
<span class="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 框架),请提供更多上下文!

文章已创建 3216

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部