Semantic UI通过ui labels容器创建标签列表,支持颜色类(如red、green)、尺寸类(如large、mini)及basic、ribbon等样式,实现语义化、响应式的标签展示,适用于分类、状态提示等场景。

在Semantic UI中,标签(Labels)是一种轻量级的界面元素,常用于显示分类、状态或计数信息。通过使用内置的labels类,你可以快速创建美观且响应式的标签列表,并通过附加类控制其颜色和大小。
基本标签列表结构
Semantic UI 使用 class="ui labels" 容器包裹多个 label 元素,形成一个水平排列的标签列表。
每个单独的标签使用 class="ui label" 创建。
前端后端设计
使用颜色类改变标签外观
Semantic UI 提供多种颜色类来调整标签视觉效果,适用于不同语义场景:
立即学习“前端免费学习笔记(深入)”;
-
红色:
red label— 表示错误或警告 -
绿色:
green label— 表示成功或在线状态 -
蓝色:
blue label— 表示主要信息 -
黄色:
yellow label— 表示提醒或待处理 -
灰色:
grey label或black label— 中性或禁用状态 -
橙色:
orange等颜色词也可直接使用
错误已验证新功能审核中










