news 2026/6/10 18:10:15

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/10 9:09:27

Dify本地部署指南:基于Docker快速搭建

Dify本地部署指南&#xff1a;基于Docker快速搭建 在大模型技术席卷全球的今天&#xff0c;越来越多开发者和企业开始探索如何将 LLM&#xff08;大语言模型&#xff09;真正落地为可用的应用。然而&#xff0c;从零搭建一个支持 Prompt 工程、知识库检索、Agent 能力的系统&a…

作者头像 李华
网站建设 2026/6/10 10:49:34

EmotiVoice文本转语音API的Python调用实践

EmotiVoice文本转语音API的Python调用实践 在为一个虚拟角色设计语音系统时&#xff0c;我遇到了一个普遍却棘手的问题&#xff1a;大多数TTS&#xff08;文本转语音&#xff09;工具听起来都像“机器人”——字正腔圆&#xff0c;但毫无情绪。用户需要的是能表达喜悦、愤怒、悲…

作者头像 李华
网站建设 2026/6/10 10:49:07

用defaultdict快速构建JSON数据原型

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个快速原型工具&#xff0c;使用defaultdict实现&#xff1a;1) 动态构建多级嵌套JSON结构 2) 支持从扁平数据自动生成层级结构 3) 提供便捷的节点访问接口 4) 实现数据合并功…

作者头像 李华
网站建设 2026/6/10 10:51:42

小白也能懂的MySQL字符集冲突解决方案

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 制作一个面向新手的MySQL字符集教学工具&#xff0c;包含&#xff1a;1. 基础概念讲解动画 2. 错误重现演示 3. 分步解决向导 4. 交互式练习环境 5. 常见问题解答。要求使用简单明了…

作者头像 李华
网站建设 2026/6/10 10:53:29

Dify平台日志系统分析与运维监控建议

Dify平台日志系统分析与运维监控建议 在AI应用快速落地的今天&#xff0c;企业不再满足于“能用”的模型服务&#xff0c;而是追求“可靠、可观测、可维护”的生产级系统。尤其是在基于大语言模型&#xff08;LLM&#xff09;构建复杂工作流的场景下——比如一个智能客服需要完…

作者头像 李华