Benutzerdefinierte Bootstrap-Readcrumbs – Version 2

Benutzerdefinierte Breadcrumbs für das Bootstrap 5-Framework

Zusammenfassung: Wir präsentieren Code (CSS) für benutzerdefinierte Bootstrap 5-Breadcrumbs. Dies ist eine verbesserte Version des zuvor veröffentlichten Artikels.

1 Der Bedarf an besseren Breadcrumbs

Das Bootstrap 5-Framework wird mit einer sehr einfachen Breadcrumbs-Implementierung geliefert. Ich brauchte etwas viel Besseres, sowohl optisch als auch funktionaler. Im Laufe der Zeit fand ich es in meinen Anwendungen sehr nützlich, Breadcrumbs zu verwenden, um dem Benutzer die Rückkehr zur höheren Ebene zu ermöglichen, nachdem er sich die Details des jeweiligen Elements/Objekts genauer angesehen hat.

Für mich war die Möglichkeit, TEXTDATEN IN ZWEI REIHEN darzustellen, sehr wichtig, insbesondere in Fällen, in denen ich einige Daten und eine ID zeige, z. B. einen Hinweis darauf, dass es sich um Daten für ein Konto handelt, und gleichzeitig bereitstelle die Kontonummer.

Ich war mit den Lösungen, die ich im Internet sah, nicht zufrieden, also habe ich meine eigenen entwickelt.

Während der Titel besagt, dass es sich um eine „Bootstrap 5“-Bibliothek handelt, ist sie völlig unabhängig vom Bootstrap-CSS und nur ausgewählte Farben wurden aus dem Bootstrap-CSS übernommen, um sie an das Bootstrap-5-Thema anzupassen. Wenn Sie möchten, können Sie es unabhängig von Bootstrap verwenden.

1.1 Änderungen in dieser Version

Diese Version enthält Vorschläge und Code von Graeme_Grant@codeproject.com, um den Code kürzer zu machen. Ich bin nicht unbedingt mit allen Vorschlägen einverstanden, da ich denke, dass die Lesbarkeit des Codes für Menschen wichtiger ist als kürzerer Code. Also habe ich meine eigene neue Version erstellt.

Außerdem verwendet diese Version Bootstrap Icons [1] anstelle von Font Awesome Icons.

2 Endergebnis

Hier sehen Sie, wie das Endergebnis aussieht, zusammen mit dem Democode, der es generiert. Ich habe Semmelbröselstreifen in drei Größen (groß, mittel, klein) erstellt, mit optionaler Verwendung von Symbolen. Die Farben können nach Belieben ausgewählt werden und der Hover-Effekt ist standardmäßig vorhanden, sofern er nicht ausdrücklich deaktiviert ist. Der Hover-Effekt ist normalerweise für den letzten Breadcrumb deaktiviert, da dies die aktuell wirksame Auswahl ist.

Hier ist der HTML-Code, der das obige Rendering generiert. Jeder Webentwickler sollte in der Lage sein, den HTML-Code zu lesen und ihn dem obigen Bild zuzuordnen, um die Variante zu finden, die ihm gefällt.

Wenn Sie Symbole verwenden möchten, können Sie die kostenlose Version von Bootstrap Icons [1] installieren und darauf zugreifen, ähnlich wie in diesem Beispiel. Der HTML-Code für die Verwendung von Symbolen ist etwas kompliziert, da wir Symbole und Text in zwei separate Elemente aufteilen mussten, damit sie unabhängig voneinander gestaltet werden konnten.

    <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%5Cfont%5Cbootstrap-icons.min.css">



    <!--Large size --------------------------------------------------------------->
    <h5 id="Large-size-info-case">Large size, info case</h5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <h5 id="Large-size-info-case-with-no-hover-effect-on-the-last-button">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 number99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <h5 id="Large-size-Rainbow">Large size, Rainbow</h5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumbinfo</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumbprimary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumbwarning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumbsuccess</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumbsecondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumblight</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumbdanger</a>
    </div>
    <h5 id="Large-size-icons-usage">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 number123456</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 id="Medium-size-info-case">Medium size, info case</h5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <h5 id="Medium-size-info-case-with-no-hover-effect-on-the-last-button">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 number99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <h5 id="Medium-size-Rainbow">Medium size, Rainbow</h5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumbinfo</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumbprimary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumbwarning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumbsuccess</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumbsecondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumblight</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumbdanger</a>
    </div>
    <h5 id="Medium-size-icons-usage">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 number123456</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 id="Small-size-info-case">Small size, info case</h5>
    <div class="breadcrumb3-sm ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <h5 id="Small-size-info-case-with-no-hover-effect-on-the-last-button">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 number99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <h5 id="Small-size-Rainbow">Small size, Rainbow</h5>
    <div class="breadcrumb3-sm  ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumbinfo</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumbprimary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumbwarning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumbsuccess</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumbsecondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumblight</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumbdanger</a>
    </div>
    <h5 id="Small-size-icons-usage">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 number123456</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>

3 Breadcrumbs CSS

Hier ist das CSS, es wird kein JavaScript benötigt. Ich habe bewusst den Klassennamen „breadcrumbs3“ verwendet, um Namenskollisionen mit der ursprünglichen Bootstrap 5-Klasse zu vermeiden.

/* 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 Wie CSS funktioniert

Hier geben wir einige Hinweise zur Funktionsweise von CSS, obwohl es sich hierbei um einen recht einfachen CSS-Code handelt, der größtenteils selbsterklärend ist.

4.1 Trick, um Dreiecke mit CSS zu erstellen

Ein sehr beliebter Trick zum Erstellen von Dreiecken mit CSS wird hier verwendet. Es geht darum, die Fähigkeit von CSS, Ränder darzustellen, zu missbrauchen und einen Rahmen in Form eines Dreiecks darzustellen. Dazu erstellen Sie ein Blockelement mit einer Breite und Höhe von Null und einem farbigen Rand auf einer Seite, der als Pfeil fungiert, sowie zwei transparenten Rändern auf zwei angrenzenden Seiten.

4.2 Trick, um einen Rahmen zum CSS-Dreieck zu erstellen

Da das Dreieck selbst eine Grenze ist, können wir keine Grenze darauf erstellen. Der Trick zum Erstellen eines Rahmens auf dem Dreieck/Pfeil besteht also darin, zwei Dreiecke zu erstellen und diese mit minimalem Seitenversatz übereinander zu rendern. Auf diese Weise erzeugen wir das Randbild.

Sie können sich den CSS-Code in den Selektoren (.breadcrumb3-item:after) und (.breadcrumb3-item:before) ansehen und Sie werden sehen, dass wir dort zwei Dreiecke erstellen, ein graues und eine Infofarbe darüber. Schauen Sie sich die CSS-Regeln für die erste (Rand links: 1 Pixel; Z-Index: 2;) und für die zweite (Rand links: 0 Pixel; Z-Index: 3;) sorgfältig an. Sie können einen leichten Versatz und eine leichte Darstellung des zweiten Dreiecks gegenüber dem ersten erkennen.

Pseudoelemente (:before, :after) haben nur den Zweck, diese Dreiecke an das .breadcrumb3-item-Element anzuhängen.

4.3 Tutorial-Beispiel

Hier stellen wir einen Tutorial-Beispielcode zur Verfügung, um zu zeigen, wie Dreiecke erstellt werden. Hier ist ein Tutorial-Code:

    <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>



    <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>


   

Und hier ist das Ergebnis der Ausführung:

Jeder bessere Programmierer sollte in der Lage sein, Codebeispiele den erzeugten Ergebnissen zuzuordnen.

5 Verwendung der Bootstrap-Symbole

Es mag kompliziert aussehen, das richtige Bootstrap-Icons-Symbol für Ihre Anwendung zu finden, ist aber eigentlich ziemlich einfach. Symbole werden nach Schlüsselwörtern indiziert. Sie müssen also zuerst nach Ihrem Schlüsselwort suchen, dann das gewünschte Symbol auswählen (in diesem Beispiel kostenlos) und dann seine ID-Klasse in Ihre App kopieren. Hier sind Screenshots, die diesen Vorgang zeigen.

6 Referenzen

[1] https://icons.getbootstrap.com/#install

Das obige ist der detaillierte Inhalt vonBenutzerdefinierte Bootstrap-Readcrumbs – Version 2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!