Bootstrap/docs/4.5/components/breadcrumb
来自菜鸟教程
面包屑
指示当前页面在导航层次结构中的位置,该层次结构会通过CSS自动添加分隔符。
例
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li aria-current="page" class="breadcrumb-item active"> Home </li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"> Home </a></li>
<li aria-current="page" class="breadcrumb-item active"> 图书馆 </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="#"> 图书馆 </a></li>
<li aria-current="page" class="breadcrumb-item active"> Data </li>
</ol>
</nav>更换隔板
分隔符通过以下方式自动添加到CSS中 ::before and content 。他们可以通过改变来改变 $breadcrumb-divider 。该 引用 需要函数来生成字符串周围的引号,因此如果需要 > 作为分隔符,您可以使用以下命令：
也可以使用 base64嵌入式SVG图标 :
分隔符可以通过设置来移除 $breadcrumb-divider to none:
无障碍
由于面包屑可提供导航,因此最好添加有意义的标签,例如 aria-label="breadcrumb" 描述在 <nav> 元素,以及应用 aria-current="page" 到集合的最后一项,以表示它代表当前页面。
有关更多信息,请参见 面包屑模式的WAI-ARIA创作实践 .
