Bootstrap 5 | 面包屑

什么是面包屑？

面包屑是一种导航方式，通常位于页面顶部，显示用户当前所处的位置和他们到达当前页面的路径。面包屑有助于用户了解页面所在的上下文环境，并快速返回到先前的页面。

Bootstrap 5 的面包屑

Bootstrap 5 的面包屑组件可以轻松地创建面包屑导航。该组件使用 ol 标签创建一个有序列表，并添加 .breadcrumb 类，使其适配 Bootstrap 样式。

基本结构

使用 Bootstrap 5 创建一个简单的面包屑，只需要在 .breadcrumb 中添加一个或多个 li 标签即可。

<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>

自定义分隔符

可以使用 separator 属性自定义面包屑中的分隔符。默认情况下，分隔符是一个斜杆 /。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb" separator="">
    <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>

可交互的面包屑

可以通过在面包屑自定义链接操作来实现面包屑的交互性。

<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"><a href="#">Data</a></li>
    <li class="breadcrumb-item"><a href="#">Edit</a></li>
  </ol>
</nav>

禁用链接

如果某个面包屑链接不存在，可以通过添加 .disabled 类来禁用它，同时删除链接并添加一个文本。aria-current="page" 属性用于强调当前页。

<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 disabled" aria-current="page">Data</li>
    <li class="breadcrumb-item active">Edit</li>
  </ol>
</nav>

自定义样式

可以通过引用 Bootstrap 样式来自定义面包屑样式。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb custom-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">Custom Style</li>
  </ol>
</nav>

.custom-breadcrumb {
  background-color: #f5f5f5;
  padding: 5px 10px;
  border-radius: 0.25rem;
}
.custom-breadcrumb .breadcrumb-item {
  font-size: 18px;
}
.custom-breadcrumb .breadcrumb-item.active {
  color: #5077b6;
  font-weight: 500;
}

总结

Bootstrap 5 的面包屑组件可以轻松地创建面包屑导航，并支持自定义样式和交互性。面包屑有助于提高用户体验，使用户能够更方便地浏览您的网站。