Bootstrap—标签label和徽章badge

label
.label label-default    默认的灰色标签
.label label-primary   "primary" 类型的蓝色标签
.label label-success   "success" 类型的绿色标签
.label label-info  "info" 类型的浅蓝色标签
.label label-warning   "warning" 类型的黄色标签
.label label-danger    "danger" 类型的红色标签用法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>label</title><link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body><div class="container" style="margin-top: 10px"><span class="label label-default">label-default</span></div>
</body>
</html>

效果：

badge:徽章（Badges）主要用于突出显示新的或未读的项，效果：使用方法：

<a href="#"><span class="badge">20</span></a>


本文参考资料来自：http://www.runoob.com/bootstrap/bootstrap-labels.html，http://www.runoob.com/bootstrap/bootstrap-badges.html

Bootstrap—标签label和徽章badge相关推荐

Bootstrap 标签 label
标签 Bootstrap提供的标签,主要用来显示提示信息等内容,它的基本样式通过 .label类实现,默认以圆角矩形呈现.如: <h1>Example heading <span c ...
amazeui学习笔记--css（常用组件1）--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
小tips：JS之按位取反，语法标签label，正则表达式中replace的0,1是什么？
JS按位取反 Javascript 按位取反运算符 (~) ,对一个表达式执行位非(求非)运算.如 ~1 = -2; ~2 = -3; 来看看~1的计算步骤: 将1(这里叫:原码)转二进制＝ 000 ...
Bootstrap 标签页Tab插件的事件
事件 Bootstrap标签页Tab插件有两个事件,分别是 show 和 shown,这两个事件的含义见表 5‑3. 表 5‑3 标签页事件及含义事件含义 show 标签页显示之前,触发该事件.使 ...
Bootstrap 标签页Tab插件使用方法
标签页 Bootstrap标签页Tab插件需要 bootstrap-tab.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-tab.js 文件. 调用方式 1.dat ...
Bootstrap 标签导航的布局
默认情况下,标签的位于顶部.为了灵活控制标签的位置,Bootstrap额外提供了 3 个类,分别是 .tabs-left..tabs-right..tabs-below,它们分别让标签位于左侧.右侧. ...
bootstrap标签页
bootstrap标签页导航需要注意href="#home",这个home对应下面标签内容的的id的home名字要一样,不然不会切换 <ul id="myTa ...
java label 标签_Java标签(Label)
本篇文章帮大家学习java标签(Label),包含了Java标签(Label)使用方法.操作技巧.实例演示和注意事项,有一定的学习价值,大家可以用来参考. Java 中的标签是为循环设计的,是为了在多 ...
k8s标签(label)的使用
1.在yaml文件里添加标签 apiVersion: v1 kind: Pod metadata:labels:app: test02run: kubia ...... ...... 2.查看列表时显 ...

Bootstrap—标签label和徽章badge

Bootstrap—标签label和徽章badge相关推荐

最新文章

热门文章