news 2026/4/3 6:24:22

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/3/31 1:24:29

AutoDL部署Langchain-Chatchat 0.3.1实战指南

AutoDL部署Langchain-Chatchat实战指南 在企业知识管理日益智能化的今天&#xff0c;如何让AI真正理解并回答专属领域的复杂问题&#xff0c;成了技术落地的关键一环。市面上不少SaaS类问答工具虽然便捷&#xff0c;但数据上传到云端始终存在隐私泄露风险。于是&#xff0c;越…

作者头像 李华
网站建设 2026/4/1 19:06:51

Foundation 折叠列表

Foundation 折叠列表&#xff08;Accordion&#xff09;详解&#xff08;超级完整版&#xff0c;一次讲透&#xff09; 我们继续你的 Foundation 系列&#xff0c;今天把 折叠列表&#xff08;Accordion 和 Accordion Menu&#xff09;讲得明明白白&#xff01;Foundation 6 提…

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

Dify本地部署完整指南:源码与Docker双模式启动

Dify 本地部署完整指南&#xff1a;源码与 Docker 双模式启动 在 AI 应用开发日益普及的今天&#xff0c;如何快速搭建一个支持 RAG、Agent 编排和 Prompt 工程的可视化平台&#xff0c;成为许多开发者关心的问题。Dify 正是为此而生——它不仅开源、功能完整&#xff0c;还提…

作者头像 李华
网站建设 2026/3/31 7:25:52

Ubuntu使用别名封装复杂命令

Ubuntu使用别名封装复杂命令1. 封装方法2. 封装样例steamcmd一步启动1. 封装方法 使用场景&#xff1a;经常需要手动输入的命令&#xff0c;而命令本身又是很长很难记。 解决方法&#xff1a;使用alias别名功能。 将别名写入别名配置文件&#xff1a; sudo vim ~/.bash_ali…

作者头像 李华
网站建设 2026/3/21 13:49:27

朴素贝叶斯vs深度学习:小数据场景下的效率对比

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个模型对比工具&#xff0c;功能包括&#xff1a;1.支持上传小型数据集(1000条以内)&#xff1b;2.自动训练朴素贝叶斯和简单神经网络模型&#xff1b;3.对比两者的训练时间、…

作者头像 李华
网站建设 2026/3/27 10:07:35

USB设备VID与PID标识对照表

Wan2.2-T2V-5B 模型与部署镜像标识对照表 说明&#xff1a;本文档采用类比方式&#xff0c;将传统USB设备的VID/PID机制映射至AI视频生成系统中&#xff0c;用于唯一标识Wan2.2-T2V-5B系列模型的不同版本、用途及部署形态。该逻辑标识体系适用于容器化环境、边缘计算节点调度、…

作者头像 李华