Bootstrap- 面包屑

1.1 面包屑是什么

面包屑是一种导航，可以在网站或应用程序中向用户指示当前页面的位置。面包屑导航可以增强网页的层次结构

可以在有序列表上使用 .breadcrumb类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">主页</a></li>
            <li class="breadcrumb-item"><a href="#">教程</a></li>
            <li class="breadcrumb-item active">Bootstrap5</li>
        </ol>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

上面示例创建的面包屑导航的样式如下

image-20220919210224308

1.1.1 修改面包屑的分隔符

默认的面包屑分隔符是 /。 然而，我们可以使用一些自定义 CSS 对其进行更改，例如，如果想使用 > 作为分隔符，则可以应用以下样式规则：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>改变Bootstrap5面包屑导航分隔符 - 迹忆客(jiyik.com)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Custom style for changing separator  */
    .breadcrumb-item + .breadcrumb-item::before {
        content: "-";
    }
</style>
</head>
<body>
<div class="m-4">
    <nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">主页</a></li>
        <li class="breadcrumb-item"><a href="#">教程</a></li>
        <li class="breadcrumb-item active">Bootstrap5</li>
    </ol>
</nav>
</div>
</body>
</html>

用style标签就能改掉了，想要改的话，建议参考上面的代码

提示 ：面包屑组件内的分隔符是通过 CSS 通过 ::before 伪元素和 content 属性自动添加的。