Bootstrap4 面包屑导航（Breadcrumb）

shengyin714959

于 2023-08-18 09:47:02 发布

阅读量475

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/shengyin714959/article/details/132355372

版权

笔记专栏收录该内容

2377 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了Bootstrap4中的面包屑导航，它用于显示网站层次结构中的当前位置。Bootstrap4的面包屑导航使用无序列表实现，可以通过CSS自定义分隔符。文章提供了多个实例，包括基础的面包屑导航和非列表形式的导航。

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

面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。

Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加，下面所示的 class 自动被添加：

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

Bootstrap4 面包屑导航实例

<ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library&l

了解本专栏

超级会员免费看