开发者学堂课程【前端开发框架Bootstrap使用教程：29_Bootstrap 组件_路径导航，标签，徽章】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4248
29_Bootstrap 组件_路径导航，标签，徽章
目录
一、路径导航
二、标签
三、徽章
一、路径导航
在一个带有层次的导航结构中标明当前页面的位置。
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
范例1：
< !DOCTYPE html>
<html lang="en">
< head >
<meta charset="UTF-8">
<title>路径导航</title>
<link href="bootstrap.min.css" rel="stylesheet"/>
< /head>
<body>
<div class-"container-fluid">
<ol class="breadc rumb">
<li>a href="#">尚学堂</a> </li>
<lio<a href="#">Bootstrap</a> </li>
<lio<a href="#">组件</a> </li>
<li><a href="#">路径导航</a> </li>
</ol>
</div>
< /body>
< /html >
二、标签
1.实例
<h3>Example heading <span class="label label-default">New</span></h3>
范例1：
< ! DOCTYPE html>
<html lang= "en">
< head >
<meta charset="UTF-8">
<title>袮笠</title>
<link href="bootstrap.min.css" rel="stylesheet"/>
< /head>
< body>
<h3>今天空气质量<span class-"label label-default">最新< /span></h3>
< /body>
< /html>
如果标签数量很多怎么办？
如果你有大量的设置为 inline 属性的标签全部放在一个较窄的容器元素内，在页面上展示这些标签就会出现问题，每个标签就会有自己的一个 inline-block 元素（就像图标一样）。解决的办法是为每个标签都设置为 display: inline-block; 属性。关于这个问题以及实例，请参考 #13219 。
2.可用的变体
用下面的任何一个类即可改变标签的外观。
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
三、徽章
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
范例1：
< ! DOCTYPE html >
<html lang="en">
< head>
<meta charset="UTF-8">
<title>徽章</title>
<link href="bootstrap.min.css" rel="stylesheet"/>
< /head>
<body>
<div class="container">
<a href="#">wechat<span class="badge">10</span> </a>
</div>
< / body>
< /html>
1.Self collapsing
如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏（通过CSS的 :empty 选择符实现) 。
2.适配导航元素的激活状态
Bootstrap 提供了内置的样式，让胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式。
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>