news 2026/6/15 14:30:17

Foundation 标签

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Foundation 标签

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 框架),请提供更多上下文!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/14 21:00:48

Foundation 提醒框

Foundation 提醒框&#xff08;Alert Boxes 或 Callouts&#xff09;是 ZURB Foundation 前端框架中的一个常用 UI 组件&#xff0c;用于显示重要提示、信息、警告或成功消息等提醒内容。 旧版 Foundation&#xff08;例如 Foundation 5&#xff09;&#xff1a;直接称为 Alert…

作者头像 李华
网站建设 2026/6/15 14:03:46

Foundation 面板

Foundation 面板&#xff08;Callout&#xff09;详解&#xff08;超级完整版&#xff0c;一次讲透&#xff09; 我们继续你的 Foundation 系列&#xff0c;今天把面板&#xff08;Callout&#xff09;讲得清清楚楚&#xff01;它就是之前提醒框的“升级版”&#xff0c;在 Fou…

作者头像 李华
网站建设 2026/6/15 12:25:03

苹果紧急修复两个已遭利用的 0day 漏洞

聚焦源代码安全&#xff0c;网罗国内外最新资讯&#xff01; 编译&#xff1a;代码卫士 苹果公司紧急修复了被用于“极其复杂攻击活动”中的两个 0day 漏洞CVE-2025-43529和CVE-2025-14174。 苹果公司发布安全通告提到&#xff0c;漏洞利用“针对 iOS 26 之前的 iOS 版本用户”…

作者头像 李华
网站建设 2026/6/15 13:54:03

Linux命令实战:5个运维必会的组合技

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个Linux命令实战模拟器&#xff0c;包含5个典型运维场景&#xff1a;1) 日志分析&#xff08;grepawksort&#xff09;2) 批量文件处理&#xff08;findxargs&#xff09;3) …

作者头像 李华
网站建设 2026/6/15 14:03:24

Python小白必看:map函数从入门到放弃?

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个面向初学者的Python教学代码&#xff1a;1) 用比喻解释map函数(如流水线工厂) 2) 分步演示数字列表加倍处理 3) 常见错误示例(如忘记list转换) 4) 包含3个难度递增的练习题…

作者头像 李华
网站建设 2026/6/14 18:14:35

效率提升90%:一键解决Spring Boot启动错误的智能方案

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个效率对比工具&#xff0c;展示处理无法访问org.springframework.boot.springapplication错误的两种方式&#xff1a;1. 传统手动调试方法步骤&#xff1b;2. 使用AI辅助工具…

作者头像 李华