自定义Bootstrap 5面包屑——Ver 2

寒冰屋

于 2024-08-27 21:37:49 发布

点赞数

分类专栏： web前端文章标签： bootstrap 前端 html

原文链接：https://www.codeproject.com/Articles/5384350/Custom-Bootstrap-5-Breadcrumbs-Ver-2

版权

web前端专栏收录该内容

233 篇文章 4 订阅

订阅专栏

下载源码

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.getbootstrap.com/#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个三角形并在另一个三角形上渲染一个三角形，同时留出最小的偏移量。这样，我们就可以创建边框外观。

您可以在选择器（.breadcrumb3-item:after）和（.breadcrumb3-item:before）中查看CSS代码，您会看到我们在其上创建了2个三角形，一个是灰色的，一个是信息颜色的。仔细查看第一个（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>

这是执行的结果：