Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Benutzerdefinierte Bootstrap-Readcrumbs – Version 2

DDD
Freigeben： 2024-09-18 20:24:03
Original
1014 Leute haben es durchsucht

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.

Custom Bootstrap readcrumbs -Ver 2

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.

<!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>
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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:

<!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>
Nach dem Login kopieren

Und hier ist das Ergebnis der Ausführung:

Custom Bootstrap readcrumbs -Ver 2

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.

Custom Bootstrap readcrumbs -Ver 2

Custom Bootstrap readcrumbs -Ver 2

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!

Quelle：dev.to
Vorheriger Artikel：CSS Art Meets Space: Ein Kunstprojekt zum Thema Weltraum Nächster Artikel：Beherrschen der CSS-BEM-Benennung mit praktischen Beispielen: Pure HTML, Angular und Next.js
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
2
2026
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2188
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1845
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1737
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1758
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage