Bootstrap 的面包屑导航（Breadcrumb）用于显示用户在网站中的位置路径。以下是一个简单的 Bootstrap 面包屑导航的示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Breadcrumb Example</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
    <h1>Bootstrap Breadcrumb Example</h1>
    
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Category</a></li>
            <li class="breadcrumb-item active" aria-current="page">Current Page</li>
        </ol>
    </nav>
</div>

<!-- 引入 Bootstrap JS 和 Popper.js（注意：需要先引入 Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>

</body>
</html>

在这个例子中，我们使用了 Bootstrap 的面包屑导航组件。面包屑导航包含在 breadcrumb 类中，每个路径段落使用 breadcrumb-item 类定义。最后一个路径段落通过 active 类来标识，并通过 aria-current="page" 属性指示为当前页面。

你可以根据需要添加更多的路径段落，也可以根据具体的设计要求进行样式的调整。Bootstrap 的面包屑导航还支持分隔符的定制、响应式设计等功能，详细信息可以参考 Bootstrap 文档。


转载请注明出处：http://www.zyzy.cn/article/detail/12616/Bootstrap