自定义 Bootstrap 5 面包屑 - 版本 2
Bootstrap 5 框架的自定义面包屑。
1 改进面包屑导航的需求
Bootstrap 5 框架自带的面包屑导航功能非常基础。我需要一些视觉上更好、功能更强大的东西。随着时间的推移，在我的应用程序中，我发现使用面包屑导航使用户能够返回到更高的层次，在他们深入到特定项目/对象的细节后，这非常有用。
对我来说非常重要的是能够在两行中显示文本数据，尤其是在我显示一些数据和 ID 的情况下，比如指示这是某个帐户的数据，同时提供帐户号码。
我对我在互联网上看到的解决方案不满意，所以我开发了自己的解决方案。
虽然标题说这是一个“Bootstrap 5”库，但它完全独立于 Bootstrap CSS，只选择了 Bootstrap CSS 的颜色以与 Bootstrap 5 主题保持一致。 如果你喜欢，你可以独立于 Bootstrap 使用它。
1.1 此版本中的更改
此版本合并了 Graeme_Grant@codeproject.com 的建议和代码，以缩短代码。 我不一定同意所有建议，因为我认为代码的可读性比更短的代码更重要。 因此，我创建了自己的新版本。
此外，此版本使用 Bootstrap Icons [1] 而不是 Font Awesome Icons。
2 最终结果
这是最终结果的样子，以及生成它的演示代码。 我创建了 3 种尺寸（大、中、小）的面包屑导航条，可以选择使用图标。 可以随意选择颜色，并且默认情况下存在悬停效果，除非明确禁用。 悬停效果通常对最后一个面包屑导航禁用，因为那是当前生效的选择。
这是生成上述渲染的 HTML 代码。 任何 Web 开发人员都应该能够阅读 HTML 代码，并将其与上面的图片进行匹配，以找到他/她喜欢的变体。
如果要使用图标，可以安装免费版本的 Bootstrap Icons [1]，并像本例中那样引用它。 用于图标使用的 HTML 代码有点复杂，因为我们需要将图标和文本分成 2 个单独的元素，以便可以单独设置样式。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="breadcrumb3.css" />
<!-- Download bootstrap icons from https://icons.bootstrap.ac.cn/#install
and install -->
<link rel="stylesheet" href="bootstrap-icons-1.11.3\font\bootstrap-icons.min.css" />
</head>
<body>
<!--Large size --------------------------------------------------------------->
<H5>Large size, info case</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info">Accounts</a>
<a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
<a href="#" class="breadcrumb3-item primary">Details</a>
</div>
<H5>Large size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info">Contracts</a>
<a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
</div>
<H5>Large size, Rainbow</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
</div>
<H5>Large size, icons usage</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span>
<span class="breadcrumb3-text" >Users</span>
</a>
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
<span class="breadcrumb3-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb3-item primary">
<span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
<span class="breadcrumb3-text" >Details</span>
</a>
</div>
<!--Medium size --------------------------------------------------------------->
<H5>Medium size, info case</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info">Accounts</a>
<a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
<a href="#" class="breadcrumb3-item primary">Details</a>
</div>
<H5>Medium size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info">Contracts</a>
<a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
</div>
<H5>Medium size, Rainbow</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
</div>
<H5>Medium size, icons usage</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span>
<span class="breadcrumb3-text" >Users</span>
</a>
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
<span class="breadcrumb3-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb3-item primary">
<span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
<span class="breadcrumb3-text" >Details</span>
</a>
</div>
<!--Small size --------------------------------------------------------------->
<H5>Small size, info case</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info">Accounts</a>
<a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
<a href="#" class="breadcrumb3-item primary">Details</a>
</div>
<H5>Small size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info">Contracts</a>
<a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
</div>
<H5>Small size, Rainbow</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
</div>
<H5>Small size, icons usage</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span>
<span class="breadcrumb3-text" >Users</span>
</a>
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
<span class="breadcrumb3-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb3-item primary">
<span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
<span class="breadcrumb3-text" >Details</span>
</a>
</div>
</body>
</html>
3 面包屑导航 CSS
这是 CSS，不需要 JavaScript。 我特意使用了类名“breadcrumbs3”，以避免与 Bootstrap 5 原始类发生名称冲突。
/* breadcrumb3.css */
/* by Mark.Pelf@Codeproject.com,
using partly code from Graeme_Grant@codeproject.com */
.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm{
/* 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;
/* changeable colors */
--_bgcolor: var(--bs-info);
--_color: var(--bs-black);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
@media (max-width: 767px) {
/* making it responsive, using CSS Flexbox with column (vertical) direction*/
.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
display: flex;
flex-direction: column;
}
.breadcrumb3-lg .breadcrumb3-item {
width: 80% ;
border-radius: 4px 0 0 4px;
padding-left: 25px ;
}
.breadcrumb3-md .breadcrumb3-item {
width: 80% ;
border-radius: 3px 0 0 3px;
padding-left: 20px ;
}
.breadcrumb3-sm .breadcrumb3-item {
width: 80% ;
border-radius: 3px 0 0 3px;
padding-left: 18px ;
}
}
/* large size breadcrumb3-item -----------------------------------*/
.breadcrumb3-item {
position: relative;
display: table-cell;
vertical-align: middle;
color: var(--_color);
background-color: var(--_bgcolor);
height: 40px;
line-height: 18px;
font-size: 18px;
text-align: center;
padding-right: 10px;
padding-left: 25px;
text-decoration: none;
}
.breadcrumb3-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.breadcrumb3-icon {
display: table-cell;
text-align: center;
line-height: 25px;
font-size: 25px;
padding-right: 10px;
vertical-align: middle;
}
.breadcrumb3-item:first-child {
border-radius: 4px 0 0 4px;
padding-left: 15px;
}
.breadcrumb3-item:before,
.breadcrumb3-item:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
position: absolute;
margin-top: -20px;
border-bottom: 20px solid transparent;
left: 100%;
top: 50%;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-item:after {
border-left: 15px solid var(--_arrowbordercolor);
margin-left: 1px;
z-index: 2;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-item:before {
border-left: 15px solid var(--_bgcolor);
margin-left: 0px;
z-index: 3;
}
.breadcrumb3-item:hover:not(.no-hover-effect) ,
.breadcrumb3-item:focus:not(.no-hover-effect){
background-color: var(--_hover-bgcolor);
color: var(--_hover-color);
}
.breadcrumb3-item:hover:not(.no-hover-effect):before,
.breadcrumb3-item:focus:not(.no-hover-effect):before {
border-left-color: var(--_hover-bgcolor);
}
/* remove keyboard navigation focus rectangle */
.breadcrumb3-item:focus-visible {
outline: none;
}
/* medium size breadcrumb3-item -----------------------------------*/
.breadcrumb3-md .breadcrumb3-item {
height: 32px;
line-height: 15px;
font-size: 15px;
padding-left: 20px;
}
.breadcrumb3-md .breadcrumb3-icon {
line-height: 20px;
font-size: 20px;
padding-right: 7px;
}
.breadcrumb3-md .breadcrumb3-item:first-child {
border-radius: 3px 0 0 3px;
padding-left: 12px;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-md .breadcrumb3-item:after {
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 12px solid var(--_arrowbordercolor);
margin-top: -16px;
margin-left: 1px;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-md .breadcrumb3-item:before {
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 12px solid var(--_bgcolor);
margin-top: -16px;
}
/* small size breadcrumb3-item-sm -----------------------------------*/
.breadcrumb3-sm .breadcrumb3-item {
height: 24px;
line-height: 11px;
font-size: 11px;
padding-right: 8px;
padding-left: 18px;
}
.breadcrumb3-sm .breadcrumb3-icon {
line-height: 16px;
font-size: 16px;
padding-right: 5px;
}
.breadcrumb3-sm .breadcrumb3-item:first-child {
border-radius: 3px 0 0 3px;
padding-left: 10px;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-sm .breadcrumb3-item:after {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 8px solid var(--_arrowbordercolor);
margin-top: -12px;
margin-left: 1px;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-sm .breadcrumb3-item:before {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 8px solid var(--_bgcolor);
margin-top: -12px;
}
/*breadcrumb3-item colors ------------------------------------------*/
/* we like specificity, to avoid namespace collisions */
.breadcrumb3-lg .info, .breadcrumb3-md .info, .breadcrumb3-sm .info {
--_color: var(--bs-black);
--_bgcolor: var(--bs-info);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .primary , .breadcrumb3-md .primary , .breadcrumb3-sm .primary {
--_color: var(--bs-white);
--_bgcolor: var(--bs-primary);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-success);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .warning, .breadcrumb3-md .warning, .breadcrumb3-sm .warning {
--_color: var(--bs-black);
--_bgcolor: var(--bs-warning);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .success, .breadcrumb3-md .success, .breadcrumb3-sm .success {
--_color: var(--bs-black);
--_bgcolor: var(--bs-success);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .secondary, .breadcrumb3-md .secondary, .breadcrumb3-sm .secondary {
--_color: var(--bs-white);
--_bgcolor: var(--bs-secondary);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .light, .breadcrumb3-md .light, .breadcrumb3-sm .light {
--_color: var(--bs-black);
--_bgcolor: var(--bs-light);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .danger, .breadcrumb3-md .danger, .breadcrumb3-sm .danger {
--_color: var(--bs-white);
--_bgcolor: var(--bs-danger);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
4 CSS 如何工作
在这里，我们将给出一些关于 CSS 如何工作的提示，尽管这是非常简单的 CSS 代码，并且大部分是自解释的。
4.1 使用 CSS 创建三角形的技巧
这里使用了一个非常流行的用 CSS 创建三角形的技巧。 关键是滥用 CSS 渲染边框的能力，并使其渲染一个三角形形状的边框。 你可以通过创建一个零宽度和高度的块元素，并在一个边上使用彩色边框作为箭头，并在两个相邻边上使用两个透明边框来实现这一点。
4.2 创建 CSS 三角形边框的技巧
由于三角形本身就是边框，因此我们无法在其上创建边框。 因此，在三角形/箭头上创建边框的技巧是创建 2 个三角形，并将一个以最小偏移量渲染在另一个之上。 这样我们就创建了边框外观。
您可以查看 CSS 代码中的选择器 (.breadcrumb3-item:after) 和 (.breadcrumb3-item:before)，您会看到我们在那里创建了 2 个三角形，一个灰色，另一个是info-color。 仔细查看第一个 (margin-left: 1px; z-index: 2;) 和第二个 (margin-left: 0px; z-index: 3;) 的 CSS 规则。 你可以看到一个轻微的偏移，并将第二个三角形渲染在第一个之上。
伪元素 (:before, :after) 的目的只是将这些三角形附加到 .breadcrumb3-item 元素。
4.3 教程示例
在这里，我们将提供一个教程示例代码，只是为了展示如何创建三角形。 这是一个教程代码
<!DOCTYPE html>
<html>
<head>
<style>
.test1 {
position: relative;
display: table-cell;
vertical-align: middle;
color: blue;
background-color: yellow;
height: 40px;
line-height: 18px;
font-size: 18px;
text-align: center;
padding-right: 10px;
padding-left: 25px;
text-decoration: none;
}
.test1:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid red;
position: absolute;
margin-top: -20px;
border-bottom: 20px solid red;
left: 100%;
top: 50%;
border-left: 15px solid gray;
margin-left: 1px;
z-index: 2;
}
.test2 {
position: relative;
display: table-cell;
vertical-align: middle;
color: blue;
background-color: yellow;
height: 40px;
line-height: 18px;
font-size: 18px;
text-align: center;
padding-right: 10px;
padding-left: 25px;
text-decoration: none;
}
.test2:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
position: absolute;
margin-top: -20px;
border-bottom: 20px solid transparent;
left: 100%;
top: 50%;
border-left: 15px solid gray;
margin-left: 1px;
z-index: 2;
}
.test3 {
position: relative;
display: table-cell;
vertical-align: middle;
color: blue;
background-color: yellow;
height: 40px;
line-height: 18px;
font-size: 18px;
text-align: center;
padding-right: 10px;
padding-left: 25px;
text-decoration: none;
}
.test3:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
position: absolute;
margin-top: -20px;
border-bottom: 20px solid transparent;
left: 100%;
top: 50%;
border-left: 15px solid blue;
margin-left: 0px;
z-index: 3;
}
</style>
</head>
<body>
<div class="test1">
Note how gray arrow is created from red border
</div>
<br/>
<div >
Now we will change red to transparent to keep just arrow
</div>
<br/>
<div class="test2">
Now we have only gray arrow, with 1 pixel offset to the right
</div>
<br/>
<div class="test3">
Similarly we have blue arrow, without that offset
</div>
<br/>
<div class="test2 test3">
Now we overlap 2 arrows, to get border effect for the arrow
</div>
</body>
</html>
这是执行的结果
任何更好的程序员都应该能够将代码示例与生成的结果进行匹配。
5 Bootstrap 图标使用
为你的应用程序找到合适的 Bootstrap 图标可能看起来很复杂，但实际上非常容易。 图标按关键字索引，因此你需要先搜索你的关键字，然后选择（在本例中是免费的）感兴趣的图标，然后将其 ID 类复制到你的应用程序中。 以下是显示该过程的屏幕截图。
6 参考资料
[1] https://icons.bootstrap.ac.cn/#install