news 2026/5/14 5:59:46

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/5/13 18:42:10

告别“单点智能”:AI Agent如何重构企业生产力与流程?

当AI能够理解目标、自主规划并调用工具完成任务闭环时&#xff0c;企业竞争的维度已悄然改变。这场变革的核心&#xff0c;是从孤立工具的堆砌&#xff0c;转向由**流程驱动的、智能体间的系统化协同。 凌晨两点&#xff0c;一家医疗器械公司的销售总监在海外谈判窗口前&#…

作者头像 李华
网站建设 2026/5/13 15:26:26

AI如何自动解析DBC文件?3种智能代码生成方案

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个DBC文件解析工具&#xff0c;能够自动解析DBC文件中的报文、信号定义&#xff0c;并生成对应的C/C数据结构代码。要求支持解析Message、Signal、Node等关键信息&#xff0c…

作者头像 李华
网站建设 2026/5/8 6:37:21

ANSI 和 ASCII 区别

核心区别在于&#xff1a;ASCII 是单字节字符编码标准&#xff0c;ANSI 不是独立编码&#xff0c;而是 Windows 系统对 “本地默认编码” 的统称&#xff08;通常指扩展 ASCII 的多字节编码&#xff0c;如 GBK、Big5&#xff09;。 ASCII 的局限性 ASCII 仅用 1 字节的后 7 位&…

作者头像 李华
网站建设 2026/5/10 9:42:05

零基础教程:5分钟学会用auto-py-to-exe打包第一个程序

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个面向新手的交互式学习工具&#xff0c;功能包括&#xff1a;1. 内置简单Python示例脚本(如计算器、记事本) 2. 分步引导界面解释每个打包选项 3. 实时显示命令执行过程和解…

作者头像 李华
网站建设 2026/5/13 13:39:54

AI自动生成MySQL数据清理脚本:TRUNCATE TABLE实战

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 请生成一个完整的MySQL数据清理解决方案&#xff0c;包含以下功能&#xff1a;1) 自动检测目标表结构 2) 生成带条件判断的TRUNCATE TABLE安全脚本 3) 包含备份检查机制 4) 提供执行…

作者头像 李华