news 2026/4/13 12:20:01

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/4/12 22:46:31

AI原生应用情境感知的技术选型指南

AI原生应用情境感知的技术选型指南 关键词&#xff1a;AI原生应用、情境感知、技术选型、上下文理解、多模态融合 摘要&#xff1a;随着AI技术的普及&#xff0c;“AI原生应用”&#xff08;AI-Native Apps&#xff09;正在重塑软件形态——这类应用从设计之初就深度嵌入AI能力…

作者头像 李华
网站建设 2026/4/3 1:14:10

基于国标的头部厂商数据流转监测平台评析:一键化部署能力与通用

随着《数据安全法》《个人信息保护法》及《网络数据安全管理条例》的全面推进&#xff0c;数据安全已从合规要求演变为企业核心竞争力的组成部分。2025年&#xff0c;数据安全平台市场进一步整合&#xff0c;平台化、智能化、全生命周期化成为主流趋势。在众多技术路径中&#…

作者头像 李华
网站建设 2026/4/4 2:31:56

Linux网络管理入门:5分钟学会使用NetworkManager

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个交互式NetworkManager学习工具&#xff0c;功能包括&#xff1a;1. 基础命令模拟器(nmcli) 2. 常见网络场景示例(连接WiFi、配置静态IP等) 3. 实时错误诊断 4. 可视化网络状…

作者头像 李华
网站建设 2026/4/10 5:44:07

GPT-SoVITS API开发:本地到云端部署全指南

GPT-SoVITS API开发&#xff1a;本地到云端部署全指南 在语音合成技术飞速发展的今天&#xff0c;个性化音色克隆已不再是实验室里的“黑科技”&#xff0c;而是逐渐走向大众应用的现实能力。你是否曾想过&#xff0c;仅凭一分钟的录音&#xff0c;就能让AI完美复刻你的声音&a…

作者头像 李华
网站建设 2026/4/10 19:22:37

如何用AI自动修复MIME类型错误?快马平台实战

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个Node.js中间件&#xff0c;自动检测HTTP响应的Content-Type头。如果发现返回HTML内容但MIME类型设置为text/html且未正确标记为可执行&#xff0c;则自动修正为正确的类型。…

作者头像 李华
网站建设 2026/4/11 22:37:17

Detect It Easy实战:恶意软件分析的利器

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个恶意软件分析工具&#xff0c;利用Detect It Easy的核心功能&#xff0c;自动解析可疑文件的头部信息、导入表和资源段。工具应提供可视化界面&#xff0c;展示文件的详细结…

作者头像 李华