Bootstrap 简明教程
Bootstrap - Breadcrumb
本章将讨论 Bootstrap 面包屑。面包屑是一种导航方法，它向用户显示他们在网站或应用程序上相对于当前页面所在的位置。具有许多页面或复杂层次结构的可访问网站可以从面包屑导航中受益匪浅。
Basic breadcrumbs
通过将类 .breadcrumb 添加到 有序或无序列表，Bootstrap 允许用户轻松创建静态面包屑布局，如下例所示。可以用实用程序类装饰面包屑。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Breadcrumb</title>
</head>
<body>
<div class="m-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Services</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="#">Services</a></li>
<li class="breadcrumb-item active" aria-current="page">Contact</li>
</ol>
</nav>
</div>
</body>
</html>Dividers
当您想用 > 作为分隔符修改默认面包屑分隔符 / 时，可以使用一些自定义 CSS 样式规则，如下例所示：
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Breadcrumb</title>
</head>
<body>
<div class="m-4">
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Services</li>
</ol>
</nav>
</div>
</body>
</html>修改 Sass 时， quote 函数需要引用字符串。例如，如果你使用 > 作为分隔符，则可以使用 $breadcrumb-divider: quote(">");
你还可以使用嵌入式 SVG 图标。通过自定义 CSS 属性或如下所示使用 Sass 变量来应用图标：
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Breadcrumb</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">About us</li>
</ol>
</nav>
</body>
</html>如果你不想要带超链接的列表项中的面包屑分隔符，则将 --bs-breadcrumb-divider 的值设为空字符串 (' ') 或将 Sass 变量设为 $breadcrumb-divider: none;
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Breadcrumb</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">About us</li>
</ol>
</nav>
</body>
</html>