自强学堂
自强学堂:学习、分享、让你更强!
Bootstrap 教程HTMLCSSJAVASCRIPTJQUERYSQLPHPBOOTSTRAPANGULARXML
 

Bootstrap 内联标签和徽章

简介

使用 Bootstrap,您可以创建内联标签(即 Label 和注释的文本)和徽章(即指标和未读计数)。

内联标签

通过内联标签您可以创建醒目的标签和注释文本。

实例

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap inline label Example</title> 
<meta name="description" content="Bootstrap inline label Example">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<p><span class="label">Default</span></p>
<p><span class="label label-success">Success</span></p>
<p><span class="label label-warning">Warning</span></p>
<p><span class="label label-important">Important</span></p>
<p><span class="label label-info">Info</span></p>
<p><span class="label label-inverse">Inverse</span></p>
</div>
</div>
</div>
</body>
</html> 

在线查看

bootstrap.css 中,从行号 3162 到行号 3200,呈现的是 label、label-success、label-warning、label-important、label-info 和 label-inverse 的样式。

徽章

就像 Bootstrap 提到的,

徽章是用于显示指标或一些分类的计数的小而简单的组件。它们通常可以在用于推送通知的电子邮件客户端比如 Mail.app 或移动 app 上找到。

实例

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap badges Example</title> 
<meta name="description" content="Bootstrap badges Example">
<link href="../bootstrap/bootstrap-2.0.3.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<p><span class="badge">1</span></p>
<p><span class="badge badge-success">2</span></p>
<p><span class="badge badge-warning">4</span></p>
<p><span class="badge badge-important">6</span></p>
<p><span class="badge badge-info">8</span></p>
<p><span class="badge badge-inverse">10</span></p>
</div>
</div>
</div>
</body>
</html>

请注意,在该实例中,我们使用了 bootstrap-2.0.3.css,因为在 Bootstrap v2.0.1 中没有定义徽章的样式。

在线查看

点击这里,下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。

为什么有广告?:广告收入是作者继续投入更多业余时间的动力,也可以补贴服务器等的花费,本站也不会阻止屏蔽广告插件,请大家理解!