前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用 class .label 来显示标签用于计数

使用 class .label 来显示标签用于计数

原创
作者头像
好派笔记
修改2021-09-18 14:44:46
6370
修改2021-09-18 14:44:46
举报
文章被收录于专栏:好派笔记好派笔记

Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签,如下面的实例所示:

实例

<h1>Example Heading <span class="label label-default">Label</span></h1> <h2>Example Heading <span class="label label-default">Label</span></h2> <h3>Example Heading <span class="label label-default">Label</span></h3> <h4>Example Heading <span class="label label-default">Label</span></h4>

结果如下所示:

标签
标签

您可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观,如下面的实例所示:

实例

<span class="label label-default">默认标签</span> <span class="label label-primary">主要标签</span> <span class="label label-success">成功标签</span> <span class="label label-info">信息标签</span> <span class="label label-warning">警告标签</span> <span class="label label-danger">危险标签</span>

结果如下所示:

标签的变体
标签的变体

标签更多实例

描述

实例

.label label-default

默认的灰色标签

尝试一下

.label label-primary

"primary" 类型的蓝色标签

尝试一下

.label label-success

"success" 类型的绿色标签

尝试一下

.label label-info

"info" 类型的浅蓝色标签

尝试一下

.label label-warning

"warning" 类型的黄色标签

尝试一下

.label label-danger

"danger" 类型的红色标签

尝试一下

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实例
  • 实例
  • 标签更多实例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档