自定义 Bootstrap 5 面包屑
Bootstrap 5 框架的自定义面包屑（CSS）。
1. 需要更好的面包屑
Bootstrap 5 框架自带非常基础的面包屑实现。我需要一些更好的，无论是在视觉上还是功能上。随着时间的推移，在我的应用程序中，我发现使用面包屑让用户在深入研究特定项目/对象的细节后能够返回到更高级别非常有用。
对我来说非常重要的是能够**用两行呈现文本数据，**特别是在我显示一些数据和 ID 的情况下，例如表示这是某个帐户的数据，同时提供帐号。
我对我在互联网上看到的解决方案不满意，所以我开发了自己的解决方案。
虽然标题说这是一个“Bootstrap 5”库，但它完全独立于 Bootstrap CSS，并且仅从 Bootstrap CSS 中选择了颜色以与 Bootstrap 5 主题对齐。如果您愿意，可以独立于 Bootstrap 使用它。
如果您想使用图标，您可以使用 Font Awesome [1] 的免费版本，如示例所示。
2. 最终结果
这是最终结果的外观，以及生成它的演示代码。我创建了 3 种尺寸（常规、中等、小）的面包屑条，并可以选择使用图标。可以随意选择颜色，并且默认情况下存在悬停效果，除非显式禁用。悬停效果通常被禁用，因为这是当前选定的效果。
以下是生成上述渲染的 HTML 代码。任何 Web 开发人员都应该能够阅读 HTML 代码并与上面的图片匹配，以找到他/她喜欢的变体。
如果您想使用图标，您可以安装 Font Awesome [1] 的免费版本，并像本例中一样引用它。图标使用的 HTML 代码有点复杂，因为我们需要将图标和文本分成 2 个单独的元素，以便可以独立设置它们的样式。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="breadcrumb2.css" />
<!-- Download free web fonts from https://fontawesome.com/download
and install into /fonts/ folder-->
<link rel="stylesheet" href="fonts/fontawesome-free-6.5.1-web/css/all.min.css" />
</head>
<body>
<H5>Regular size, info case</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item info">Accounts</a>
<a href="#" class="breadcrumb2-item info">Account number</br>123456</a>
<a href="#" class="breadcrumb2-item primary">Details</a>
</div>
<H5>Regular size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item info">Contracts</a>
<a href="#" class="breadcrumb2-item info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb2-item primary no-hover-effect">Contract Info</a>
</div>
<H5>Regular size, Rainbow</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb2-item primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb2-item warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb2-item success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb2-item secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb2-item light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb2-item danger ">Breadcrumb</br>danger</a>
</div>
<H5>Regular size, icons usage</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item info">
<span class="breadcrumb2-icon" ><i class="fa-solid fa-users"></i></span>
<span class="breadcrumb2-text" >Users</span>
</a>
<a href="#" class="breadcrumb2-item info">
<span class="breadcrumb2-icon" ><i class="fa-solid fa-user"></i></span>
<span class="breadcrumb2-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb2-item primary">
<span class="breadcrumb2-icon" ><i class="fa-solid fa-circle-info"></i></span>
<span class="breadcrumb2-text" >Details</span>
</a>
</div>
<H5>Medium size, info case</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item-md info">Accounts</a>
<a href="#" class="breadcrumb2-item-md info">Account number</br>123456</a>
<a href="#" class="breadcrumb2-item-md primary">Details</a>
</div>
<H5>Medium size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item-md info">Contracts</a>
<a href="#" class="breadcrumb2-item-md info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb2-item-md primary no-hover-effect">Contract Info</a>
</div>
<H5>Medium size, Rainbow</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item-md info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb2-item-md primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb2-item-md warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb2-item-md success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb2-item-md secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb2-item-md light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb2-item-md danger ">Breadcrumb</br>danger</a>
</div>
<H5>Medium size, icons usage</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item-md info">
<span class="breadcrumb2-icon" ><i class="fa-solid fa-users"></i></span>
<span class="breadcrumb2-text" >Users</span>
</a>
<a href="#" class="breadcrumb2-item-md info">
<span class="breadcrumb2-icon" ><i class="fa-solid fa-user"></i></span>
<span class="breadcrumb2-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb2-item-md primary">
<span class="breadcrumb2-icon" ><i class="fa-solid fa-circle-info"></i></span>
<span class="breadcrumb2-text" >Details</span>
</a>
</div>
<H5>Small size, info case</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item-sm info">Accounts</a>
<a href="#" class="breadcrumb2-item-sm info">Account number</br>123456</a>
<a href="#" class="breadcrumb2-item-sm primary">Details</a>
</div>
<H5>Small size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item-sm info">Contracts</a>
<a href="#" class="breadcrumb2-item-sm info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb2-item-sm primary no-hover-effect">Contract Info</a>
</div>
<H5>Small size, Rainbow</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item-sm info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb2-item-sm primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb2-item-sm warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb2-item-sm success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb2-item-sm secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb2-item-sm light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb2-item-sm danger ">Breadcrumb</br>danger</a>
</div>
<H5>Small size, icons usage</H5>
<div class="breadcrumb2 ">
<a href="#" class="breadcrumb2-item-sm info">
<span class="breadcrumb2-icon" ><i class="fa-solid fa-users"></i></span>
<span class="breadcrumb2-text" >Users</span>
</a>
<a href="#" class="breadcrumb2-item-sm info">
<span class="breadcrumb2-icon" ><i class="fa-solid fa-user"></i></span>
<span class="breadcrumb2-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb2-item-sm primary">
<span class="breadcrumb2-icon" ><i class="fa-solid fa-circle-info"></i></span>
<span class="breadcrumb2-text" >Details</span>
</a>
</div>
</body>
</html>
3. 面包屑 CSS
这是 CSS，不需要 JavaScript。我故意使用类名“breadcrumbs2”以避免与 Bootstrap 5 原始类名发生冲突。
/* breadcrumb2.css */
.breadcrumb2 {
/* colors taken from bootstrap.css Bootstrap v5.1.0 */
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-gray: #6c757d;
--bs-white: white;
--bs-black: black;
}
@media (max-width: 700px) {
/* making it responsive, using CSS Flexbox with column (vertical) direction*/
.breadcrumb2 {
display: flex;
flex-direction: column;
}
.breadcrumb2-item {
width: 80% !important;
border-radius: 4px 0 0 4px;
padding-left: 25px !important;
}
.breadcrumb2-item-md {
width: 80% !important;
border-radius: 3px 0 0 3px;
padding-left: 20px !important;
}
.breadcrumb2-item-sm {
width: 80% !important;
border-radius: 3px 0 0 3px;
padding-left: 18px !important;
}
}
/* regular size breadcrumb2-item -----------------------------------*/
.breadcrumb2 .breadcrumb2-item {
position: relative;
display: table-cell;
vertical-align: middle;
background-color: var(--bs-info);
height: 40px;
line-height: 18px;
font-size: 18px;
text-align: center;
padding-right: 10px;
padding-left: 25px;
text-decoration: none;
}
.breadcrumb2 .breadcrumb2-item .breadcrumb2-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.breadcrumb2 .breadcrumb2-item .breadcrumb2-icon {
display: table-cell;
text-align: center;
line-height: 25px;
font-size: 25px;
padding-right: 10px;
vertical-align: middle;
}
.breadcrumb2 .breadcrumb2-item:first-child {
border-radius: 4px 0 0 4px;
padding-left: 15px;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb2 .breadcrumb2-item:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 15px solid var(--bs-gray);
position: absolute;
margin-top: -20px;
margin-left: 1px;
left: 100%;
z-index: 2;
top: 50%;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb2 .breadcrumb2-item:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 15px solid var(--bs-info);
position: absolute;
margin-top: -20px;
margin-left: 0px;
left: 100%;
z-index: 3;
top: 50%;
}
/* medium size breadcrumb2-item -----------------------------------*/
.breadcrumb2 .breadcrumb2-item-md {
position: relative;
display: table-cell;
vertical-align: middle;
background-color: var(--bs-info);
height: 32px;
line-height: 15px;
font-size: 15px;
text-align: center;
padding-right: 10px;
padding-left: 20px;
text-decoration: none;
}
.breadcrumb2 .breadcrumb2-item-md .breadcrumb2-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.breadcrumb2 .breadcrumb2-item-md .breadcrumb2-icon {
display: table-cell;
text-align: center;
line-height: 20px;
font-size: 20px;
padding-right: 7px;
vertical-align: middle;
}
.breadcrumb2 .breadcrumb2-item-md:first-child {
border-radius: 3px 0 0 3px;
padding-left: 12px;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb2 .breadcrumb2-item-md:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 12px solid var(--bs-gray);
position: absolute;
margin-top: -16px;
margin-left: 1px;
left: 100%;
z-index: 2;
top: 50%;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb2 .breadcrumb2-item-md:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 12px solid var(--bs-info);
position: absolute;
margin-top: -16px;
margin-left: 0px;
left: 100%;
z-index: 3;
top: 50%;
}
/* small size breadcrumb2-item-sm -----------------------------------*/
.breadcrumb2 .breadcrumb2-item-sm {
position: relative;
display: table-cell;
vertical-align: middle;
background-color: var(--bs-info);
height: 24px;
line-height: 11px;
font-size: 11px;
text-align: center;
padding-right: 8px;
padding-left: 18px;
text-decoration: none;
}
.breadcrumb2 .breadcrumb2-item-sm .breadcrumb2-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.breadcrumb2 .breadcrumb2-item-sm .breadcrumb2-icon {
display: table-cell;
text-align: center;
line-height: 16px;
font-size: 16px;
padding-right: 5px;
vertical-align: middle;
}
.breadcrumb2 .breadcrumb2-item-sm:first-child {
border-radius: 3px 0 0 3px;
padding-left: 10px;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb2 .breadcrumb2-item-sm:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 8px solid var(--bs-gray);
position: absolute;
margin-top: -12px;
margin-left: 1px;
left: 100%;
z-index: 2;
top: 50%;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb2 .breadcrumb2-item-sm:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 8px solid var(--bs-info);
position: absolute;
margin-top: -12px;
margin-left: 0px;
left: 100%;
z-index: 3;
top: 50%;
}
/*breadcrumb2-item info color -----------------------------------*/
.breadcrumb2 .info.breadcrumb2-item,
.breadcrumb2 .info.breadcrumb2-item-md,
.breadcrumb2 .info.breadcrumb2-item-sm {
background-color: var(--bs-info);
color: var(--bs-black);
}
.breadcrumb2 .info.breadcrumb2-item:before,
.breadcrumb2 .info.breadcrumb2-item-md:before,
.breadcrumb2 .info.breadcrumb2-item-sm:before {
border-left-color: var(--bs-info);
}
.breadcrumb2 .info.breadcrumb2-item:hover:not(.no-hover-effect),
.breadcrumb2 .info.breadcrumb2-item:focus:not(.no-hover-effect),
.breadcrumb2 .info.breadcrumb2-item-md:hover:not(.no-hover-effect),
.breadcrumb2 .info.breadcrumb2-item-md:focus:not(.no-hover-effect),
.breadcrumb2 .info.breadcrumb2-item-sm:hover:not(.no-hover-effect),
.breadcrumb2 .info.breadcrumb2-item-sm:focus:not(.no-hover-effect) {
background-color: var(--bs-primary);
color: var(--bs-white);
}
.breadcrumb2 .info.breadcrumb2-item:hover:not(.no-hover-effect):before,
.breadcrumb2 .info.breadcrumb2-item:focus:not(.no-hover-effect):before,
.breadcrumb2 .info.breadcrumb2-item-md:hover:not(.no-hover-effect):before,
.breadcrumb2 .info.breadcrumb2-item-md:focus:not(.no-hover-effect):before,
.breadcrumb2 .info.breadcrumb2-item-sm:hover:not(.no-hover-effect):before,
.breadcrumb2 .info.breadcrumb2-item-sm:focus:not(.no-hover-effect):before {
border-left-color: var(--bs-primary);
}
/*breadcrumb2-item primary color -----------------------------------*/
.breadcrumb2 .primary.breadcrumb2-item,
.breadcrumb2 .primary.breadcrumb2-item-md,
.breadcrumb2 .primary.breadcrumb2-item-sm {
background-color: var(--bs-primary);
color: var(--bs-white);
}
.breadcrumb2 .primary.breadcrumb2-item:before,
.breadcrumb2 .primary.breadcrumb2-item-md:before,
.breadcrumb2 .primary.breadcrumb2-item-sm:before {
border-left-color: var(--bs-primary);
}
.breadcrumb2 .primary.breadcrumb2-item:hover:not(.no-hover-effect),
.breadcrumb2 .primary.breadcrumb2-item:focus:not(.no-hover-effect),
.breadcrumb2 .primary.breadcrumb2-item-md:hover:not(.no-hover-effect),
.breadcrumb2 .primary.breadcrumb2-item-md:focus:not(.no-hover-effect),
.breadcrumb2 .primary.breadcrumb2-item-sm:hover:not(.no-hover-effect),
.breadcrumb2 .primary.breadcrumb2-item-sm:focus:not(.no-hover-effect) {
background-color: var(--bs-success);
color: var(--bs-white);
}
.breadcrumb2 .primary.breadcrumb2-item:hover:not(.no-hover-effect):before,
.breadcrumb2 .primary.breadcrumb2-item:focus:not(.no-hover-effect):before,
.breadcrumb2 .primary.breadcrumb2-item-md:hover:not(.no-hover-effect):before,
.breadcrumb2 .primary.breadcrumb2-item-md:focus:not(.no-hover-effect):before,
.breadcrumb2 .primary.breadcrumb2-item-sm:hover:not(.no-hover-effect):before,
.breadcrumb2 .primary.breadcrumb2-item-sm:focus:not(.no-hover-effect):before {
border-left-color: var(--bs-success);
}
/*breadcrumb2-item warning color -----------------------------------*/
.breadcrumb2 .warning.breadcrumb2-item,
.breadcrumb2 .warning.breadcrumb2-item-md,
.breadcrumb2 .warning.breadcrumb2-item-sm {
background-color: var(--bs-warning);
color: var(--bs-black);
}
.breadcrumb2 .warning.breadcrumb2-item:before,
.breadcrumb2 .warning.breadcrumb2-item-md:before,
.breadcrumb2 .warning.breadcrumb2-item-sm:before {
border-left-color: var(--bs-warning);
}
.breadcrumb2 .warning.breadcrumb2-item:hover:not(.no-hover-effect),
.breadcrumb2 .warning.breadcrumb2-item:focus:not(.no-hover-effect),
.breadcrumb2 .warning.breadcrumb2-item-md:hover:not(.no-hover-effect),
.breadcrumb2 .warning.breadcrumb2-item-md:focus:not(.no-hover-effect),
.breadcrumb2 .warning.breadcrumb2-item-sm:hover:not(.no-hover-effect),
.breadcrumb2 .warning.breadcrumb2-item-sm:focus:not(.no-hover-effect) {
background-color: var(--bs-primary);
color: var(--bs-white);
}
.breadcrumb2 .warning.breadcrumb2-item:hover:not(.no-hover-effect):before,
.breadcrumb2 .warning.breadcrumb2-item:focus:not(.no-hover-effect):before,
.breadcrumb2 .warning.breadcrumb2-item-md:hover:not(.no-hover-effect):before,
.breadcrumb2 .warning.breadcrumb2-item-md:focus:not(.no-hover-effect):before,
.breadcrumb2 .warning.breadcrumb2-item-sm:hover:not(.no-hover-effect):before,
.breadcrumb2 .warning.breadcrumb2-item-sm:focus:not(.no-hover-effect):before {
border-left-color: var(--bs-primary);
}
/*breadcrumb2-item success color -----------------------------------*/
.breadcrumb2 .success.breadcrumb2-item,
.breadcrumb2 .success.breadcrumb2-item-md,
.breadcrumb2 .success.breadcrumb2-item-sm {
background-color: var(--bs-success);
color: var(--bs-black);
}
.breadcrumb2 .success.breadcrumb2-item:before,
.breadcrumb2 .success.breadcrumb2-item-md:before,
.breadcrumb2 .success.breadcrumb2-item-sm:before {
border-left-color: var(--bs-success);
}
.breadcrumb2 .success.breadcrumb2-item:hover:not(.no-hover-effect),
.breadcrumb2 .success.breadcrumb2-item:focus:not(.no-hover-effect),
.breadcrumb2 .success.breadcrumb2-item-md:hover:not(.no-hover-effect),
.breadcrumb2 .success.breadcrumb2-item-md:focus:not(.no-hover-effect),
.breadcrumb2 .success.breadcrumb2-item-sm:hover:not(.no-hover-effect),
.breadcrumb2 .success.breadcrumb2-item-sm:focus:not(.no-hover-effect) {
background-color: var(--bs-primary);
color: var(--bs-white);
}
.breadcrumb2 .success.breadcrumb2-item:hover:not(.no-hover-effect):before,
.breadcrumb2 .success.breadcrumb2-item:focus:not(.no-hover-effect):before,
.breadcrumb2 .success.breadcrumb2-item-md:hover:not(.no-hover-effect):before,
.breadcrumb2 .success.breadcrumb2-item-md:focus:not(.no-hover-effect):before,
.breadcrumb2 .success.breadcrumb2-item-sm:hover:not(.no-hover-effect):before,
.breadcrumb2 .success.breadcrumb2-item-sm:focus:not(.no-hover-effect):before {
border-left-color: var(--bs-primary);
}
/*breadcrumb2-item secondary color -----------------------------------*/
.breadcrumb2 .secondary.breadcrumb2-item,
.breadcrumb2 .secondary.breadcrumb2-item-md,
.breadcrumb2 .secondary.breadcrumb2-item-sm {
background-color: var(--bs-secondary);
color: var(--bs-white);
}
.breadcrumb2 .secondary.breadcrumb2-item:before,
.breadcrumb2 .secondary.breadcrumb2-item-md:before,
.breadcrumb2 .secondary.breadcrumb2-item-sm:before {
border-left-color: var(--bs-secondary);
}
.breadcrumb2 .secondary.breadcrumb2-item:hover:not(.no-hover-effect),
.breadcrumb2 .secondary.breadcrumb2-item:focus:not(.no-hover-effect),
.breadcrumb2 .secondary.breadcrumb2-item-md:hover:not(.no-hover-effect),
.breadcrumb2 .secondary.breadcrumb2-item-md:focus:not(.no-hover-effect),
.breadcrumb2 .secondary.breadcrumb2-item-sm:hover:not(.no-hover-effect),
.breadcrumb2 .secondary.breadcrumb2-item-sm:focus:not(.no-hover-effect) {
background-color: var(--bs-primary);
color: var(--bs-white);
}
.breadcrumb2 .secondary.breadcrumb2-item:hover:not(.no-hover-effect):before,
.breadcrumb2 .secondary.breadcrumb2-item:focus:not(.no-hover-effect):before,
.breadcrumb2 .secondary.breadcrumb2-item-md:hover:not(.no-hover-effect):before,
.breadcrumb2 .secondary.breadcrumb2-item-md:focus:not(.no-hover-effect):before,
.breadcrumb2 .secondary.breadcrumb2-item-sm:hover:not(.no-hover-effect):before,
.breadcrumb2 .secondary.breadcrumb2-item-sm:focus:not(.no-hover-effect):before {
border-left-color: var(--bs-primary);
}
/*breadcrumb2-item light color -----------------------------------*/
.breadcrumb2 .light.breadcrumb2-item,
.breadcrumb2 .light.breadcrumb2-item-md,
.breadcrumb2 .light.breadcrumb2-item-sm {
background-color: var(--bs-light);
color: var(--bs-black);
}
.breadcrumb2 .light.breadcrumb2-item:before,
.breadcrumb2 .light.breadcrumb2-item-md:before,
.breadcrumb2 .light.breadcrumb2-item-sm:before {
border-left-color: var(--bs-light);
}
.breadcrumb2 .light.breadcrumb2-item:hover:not(.no-hover-effect),
.breadcrumb2 .light.breadcrumb2-item:focus:not(.no-hover-effect),
.breadcrumb2 .light.breadcrumb2-item-md:hover:not(.no-hover-effect),
.breadcrumb2 .light.breadcrumb2-item-md:focus:not(.no-hover-effect),
.breadcrumb2 .light.breadcrumb2-item-sm:hover:not(.no-hover-effect),
.breadcrumb2 .light.breadcrumb2-item-sm:focus:not(.no-hover-effect) {
background-color: var(--bs-primary);
color: var(--bs-white);
}
.breadcrumb2 .light.breadcrumb2-item:hover:not(.no-hover-effect):before,
.breadcrumb2 .light.breadcrumb2-item:focus:not(.no-hover-effect):before,
.breadcrumb2 .light.breadcrumb2-item-md:hover:not(.no-hover-effect):before,
.breadcrumb2 .light.breadcrumb2-item-md:focus:not(.no-hover-effect):before,
.breadcrumb2 .light.breadcrumb2-item-sm:hover:not(.no-hover-effect):before,
.breadcrumb2 .light.breadcrumb2-item-sm:focus:not(.no-hover-effect):before {
border-left-color: var(--bs-primary);
}
/*breadcrumb2-item danger color -----------------------------------*/
.breadcrumb2 .danger.breadcrumb2-item,
.breadcrumb2 .danger.breadcrumb2-item-md,
.breadcrumb2 .danger.breadcrumb2-item-sm {
background-color: var(--bs-danger);
color: var(--bs-white);
}
.breadcrumb2 .danger.breadcrumb2-item:before,
.breadcrumb2 .danger.breadcrumb2-item-md:before,
.breadcrumb2 .danger.breadcrumb2-item-sm:before {
border-left-color: var(--bs-danger);
}
.breadcrumb2 .danger.breadcrumb2-item:hover:not(.no-hover-effect),
.breadcrumb2 .danger.breadcrumb2-item:focus:not(.no-hover-effect),
.breadcrumb2 .danger.breadcrumb2-item-md:hover:not(.no-hover-effect),
.breadcrumb2 .danger.breadcrumb2-item-md:focus:not(.no-hover-effect),
.breadcrumb2 .danger.breadcrumb2-item-sm:hover:not(.no-hover-effect),
.breadcrumb2 .danger.breadcrumb2-item-sm:focus:not(.no-hover-effect) {
background-color: var(--bs-primary);
color: var(--bs-white);
}
.breadcrumb2 .danger.breadcrumb2-item:hover:not(.no-hover-effect):before,
.breadcrumb2 .danger.breadcrumb2-item:focus:not(.no-hover-effect):before,
.breadcrumb2 .danger.breadcrumb2-item-md:hover:not(.no-hover-effect):before,
.breadcrumb2 .danger.breadcrumb2-item-md:focus:not(.no-hover-effect):before,
.breadcrumb2 .danger.breadcrumb2-item-sm:hover:not(.no-hover-effect):before,
.breadcrumb2 .danger.breadcrumb2-item-sm:focus:not(.no-hover-effect):before {
border-left-color: var(--bs-primary);
}
4. CSS 的工作原理
在这里，我们将给出一些关于 CSS 工作原理的提示，尽管这只是一个非常简单的 CSS 代码，并且大部分都是不言自明的。
4.1. 用 CSS 制作三角形的技巧
这里使用了关于如何用 CSS 制作三角形的一个非常流行的技巧。关键是滥用 CSS 渲染边框的能力，并使其渲染一个形状为三角形的边框。您可以通过创建一个宽度和高度为零的块元素并在其中一侧使用彩色边框作为箭头，并在两个相邻侧使用两个透明边框来实现这一点。
如果您查看 CSS 选择器 (.breadcrumb2 .breadcrumb2-item:before)，那么您将看到我们正是这样做的，使用了以下 CSS 规则 (border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 15px solid var(--bs-info);)。您可以尝试将透明颜色更改为类似红色，这样您就可以看到整个边框。
4.2. 为 CSS 三角形创建边框的技巧
由于三角形本身就是边框，我们无法在它上面创建边框。因此，在三角形/箭头上创建边框的技巧是创建 2 个三角形，并将一个三角形渲染在另一个三角形之上，并有最小的偏移。这样，我们就可以创建边框外观。
您可以查看 CSS 代码中的选择器 (.breadcrumb2 .breadcrumb2-item:after) 和 (.breadcrumb2 .breadcrumb2-item:before)，您将看到我们在那里创建了 2 个三角形，一个灰色，一个信息颜色在其之上。仔细查看第一个 CSS 规则 (margin-left: 1px; z-index: 2;) 和第二个 CSS 规则 (margin-left: 0px; z-index: 3;)。您可以看到第二个三角形略微偏移并渲染在第一个三角形之上。
伪元素 (:before, :after) 仅用于将这些三角形附加到 .breadcrumb2-item 元素。
5. Font Awesome 的用法
为您的应用程序找到合适的 Font Awesome 图标可能看起来很复杂，但实际上非常简单。图标按关键字索引，因此您首先需要搜索您的关键字，然后选择（在本例中为免费）感兴趣的图标，然后将其 ID 类复制到您的应用程序中。以下是显示该过程的屏幕截图。
6. 参考文献
7. 历史
- 2024 年 2 月 2 日：初始版本