4 bootstrap4组件——面包屑导航

最新推荐文章于 2025-02-08 06:13:39 发布

2019camila

最新推荐文章于 2025-02-08 06:13:39 发布

阅读量2.5k

点赞数 1

分类专栏： BootStrap

本文链接：https://blog.youkuaiyun.com/weixin_45884768/article/details/104920056

版权

BootStrap 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了Bootstrap4中的面包屑导航组件。包括基本结构，如何使用`<nav>`、`<ol>`、`<li>`等元素创建面包屑导航，以及如何设置当前页面的高亮。同时，探讨了面包屑导航分隔符的工作原理，通过CSS的`:before`伪元素和`content`属性实现，默认使用斜杠作为分隔符，并提供了自定义分隔符的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在通过BootStrap的内置CSS样式，自动添加分隔符、并呈现导航层次和网页结构，从而指示当前页面的位置为访客创造优秀用户体验。

1、基本结构

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item"><a href="#">web前端</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
  </ol>
</nav>

.breadcrumb：标记为面包屑导航
.breadcrumb-item：标记为面包屑导航内容项
.active：表示当前页面（高亮）
aria-label="breadcrumb"：针对面包屑这样具备导航功能的模块，添加一个有意义的标签来描述
元素
aria-current=“page”：这组导航的最后一个项目，以标明当前页面名称（路径）

2、分隔符原理

分隔符通过::before和自动添加到CSS中content.

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

可以通过重置CSS中的content属性值，如果你想>为分隔符，你可以添加如下CSS样式：

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  }