【Bootstrap V4系列】学习入门教程之 组件-徽章（Badge）和面包屑导航（Breadcrumb）

徽章（Badge）

徽章（badge）是一种小型的用于计数和打标签的组件。

一、示例

徽章（badge）组件通过使用相对字体大小和 em 单位来实现缩放以匹配其直接父元素的大小。

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

页面展示：

徽章（badge）组件可以作为链接或按钮的一个组成部分，以提供计数功能。

<button type="button" class="btn btn-primary">Notifications <span class="badge badge-light">4</span>
</button>

页面展示效果：

请注意，根据使用方式的不同，徽章（badge）组件可能会给使用屏幕阅读器及类似辅助技术的用户带来困惑。虽然徽章（badge）组件通过样式传达了有关其用途的视觉提示，但视觉受限的用户则只能获取到徽章（badge）组件内所包含的文本内容。

除非上下文是清晰的（例如，在 “Notifications” 示例中，数字 “4” 被理解为通知的条数），否则请考虑附上一段额外的文本并在视觉上设置为隐藏以提供一个额外的上下文。

<button type="button" class="btn btn-primary">Profile <span class="badge badge-light">9</span><span class="sr-only">unread messages</span>
</button>

页面展示效果：

二、根据情境改变外观

添加下面列出的任何一个修饰符类来更改徽章（badge）组件的外观。

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

页面展示效果：

三、胶囊式徽章（Pill badges）

使用 .badge-pill 修饰符类能够让徽章（badge）组件的边角变得更圆滑（这是通过设置更大的 border-radius， 并在水平方向添加额外的 padding 来实现的）。

<!--胶囊式徽章 使用 .badge-pill 修饰符类能够让徽章（badge）组件的边角变得更圆滑-->
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

页面展示效果：

四、链接

在 <a> 元素上使用具有情境模式的 .badge-* 类可以快速为 可相应动作的 徽章（badge）组件赋予鼠标悬停和焦点状态。

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

页面展示效果：

面包屑导航（Breadcrumb）

面包屑导航（Breadcrumb）用于指示当前页面在导航层级中的位置，并通过 CSS 为各导航条目之间自动添加分隔符。

示例

<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active" aria-current="page">Home</li></ol>
</nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Library</li></ol>
</nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol>
</nav>

页面展示效果：

改变分隔符

分隔符是通过 CSS 的::before 和 content 两个属性自动添加的。因此，如果你希望用 >字符作为分隔符的话，你可以这样做：

添加 改变分隔符 CSS样式

    <!--改变分隔符 css样式--><style type="text/css">.breadcrumb-item + .breadcrumb-item::before {display: inline-block;padding-right: 0.5rem;color: #6c757d;content: ">";}</style>

HTML代码

<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active" aria-current="page">Home</li></ol>
</nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Library</li></ol>
</nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol>
</nav>

页面展示效果：

可访问性

由于面包屑导航（breadcrumb）组件提供了导航功能，因此，最好添加一个有意义的标签（例如 aria-label="breadcrumb"）来描述 <nav> 元素中提供的导航的类型，并且为最后一个条目添加 aria-current="page" 以表示其代表的是当前页面。