Fil de lecture Bootstrap personnalisé -Ver 2

Fil d'Ariane personnalisé pour le framework Bootstrap 5

Résumé : Nous présentons le code (CSS) pour le fil d'Ariane Bootstrap 5 personnalisé. Il s'agit d'une version améliorée de l'article publié précédemment.

1 Le besoin d'un meilleur fil d'Ariane

Le framework Bootstrap 5 est livré avec une implémentation très basique de Breadcrumbs. J'avais besoin de quelque chose de bien meilleur, à la fois visuellement et plus fonctionnel. Au fil du temps, dans mes applications, j'ai trouvé très utile d'utiliser le fil d'Ariane pour permettre à l'utilisateur de revenir au niveau supérieur, après avoir approfondi les détails de l'élément/objet particulier.

Ce qui était très important pour moi était la possibilité de présenter des DONNÉES TEXTES SUR DEUX LIGNES, en particulier dans les cas où j'affiche des données et un identifiant, comme une indication que ce sont les données d'un compte, et en même temps fournissant le numéro de compte.

Je n'étais pas satisfait des solutions que j'ai vues sur Internet, j'ai donc développé les miennes.

Bien que le titre indique qu'il s'agit d'une bibliothèque « Bootstrap 5 », elle est complètement indépendante du CSS Bootstrap et seules les couleurs choisies ont été extraites du CSS Bootstrap pour s'aligner sur le thème Bootstrap 5. Vous pouvez l'utiliser indépendamment de Bootstrap si vous le souhaitez.

1.1 Modifications dans cette version

Cette version intègre des suggestions et du code de Graeme_Grant@codeproject.com pour rendre le code plus court. Je ne suis pas nécessairement d'accord avec toutes les suggestions, car je pense que la lisibilité humaine du code est plus importante qu'un code plus court. J'ai donc créé ma propre nouvelle version.

De plus, cette version utilise des Icônes Bootstrap [1] au lieu des Icônes Font Awesome.

2 Résultat final

Voici à quoi ressemble le résultat final, ainsi que le code de démonstration qui le génère. J'ai créé des bandes de chapelure en 3 tailles (grande, moyenne, petite), avec utilisation facultative d'icônes. Les couleurs peuvent être choisies à volonté et l'effet de survol est présent par défaut, à moins qu'il ne soit explicitement désactivé. L'effet de survol est généralement désactivé pour le dernier fil d'Ariane, car il s'agit de la sélection actuelle en vigueur.

Voici le code HTML qui génère le rendu ci-dessus. Tout développeur Web devrait être capable de lire le code HTML et de le faire correspondre à l'image ci-dessus pour trouver la variante qu'il aime.

Si vous souhaitez utiliser des icônes, vous pouvez installer la version gratuite de Bootstrap Icons [1] et vous y référer, de la même manière que dans cet exemple. Le code HTML pour l'utilisation des icônes est un peu compliqué car nous devions séparer les icônes et le texte en 2 éléments distincts afin qu'ils puissent être stylisés indépendamment.

    <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 Fil d'Ariane CSS

Voici le CSS, aucun JavaScript n'est nécessaire. J'ai délibérément utilisé le nom de la classe « breadcrumbs3 » pour éviter une collision de nom avec la classe d'origine 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 Comment fonctionne CSS

Ici, nous donnerons quelques conseils sur le fonctionnement du CSS, bien qu'il s'agisse d'un code CSS assez simple et pour la plupart explicite.

4.1 Astuce pour créer des triangles avec CSS

Une astuce très populaire sur la façon de créer des triangles avec CSS est utilisée ici. Le but est d'abuser de la capacité de CSS à restituer les bordures et de lui faire restituer une bordure en forme de triangle. Pour ce faire, créez un élément de bloc avec une largeur et une hauteur nulles et une bordure colorée sur un côté qui agit comme une flèche, et deux bordures transparentes sur deux côtés adjacents.

4.2 Astuce pour créer une bordure au triangle CSS

Puisque le triangle lui-même est une bordure, nous ne pouvons pas créer de bordure dessus. Ainsi, l'astuce pour créer une bordure sur le triangle/la flèche est de créer 2 triangles et de les rendre l'un sur l'autre avec un décalage minimal de côté. De cette façon, nous créons l’apparence de la bordure.

Vous pouvez examiner le code CSS dans les sélecteurs (.breadcrumb3-item:after) et (.breadcrumb3-item:before) et vous verrez que nous y créons 2 triangles, un gris et une info-couleur dessus. Examinez attentivement les règles CSS pour le premier (marge-gauche : 1px ; z-index : 2 ;) et pour le second (marge-gauche : 0px ; z-index : 3 ;). Vous pouvez voir un léger décalage et un rendu du deuxième triangle par rapport au premier.

Les pseudo-éléments (:before, :after) ont juste pour but d'attacher ces triangles à l'élément .breadcrumb3-item.

4.3 Exemple de didacticiel

Ici, nous fournirons un exemple de code de didacticiel, juste pour montrer comment les triangles sont créés. Voici un code tutoriel :

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


   

Et voici le résultat de l'exécution :

Tout meilleur programmeur devrait être capable de faire correspondre les échantillons de code aux résultats produits.

5 Utilisation des icônes Bootstrap

Il peut sembler compliqué de trouver l'icône d'icônes Bootstrap appropriée pour votre application, mais c'est vraiment assez simple. Les icônes sont indexées par mots-clés, vous devez donc d'abord rechercher votre mot-clé, puis choisir (dans cet exemple gratuit) l'icône qui vous intéresse, puis copier sa classe d'identification dans votre application. Voici des captures d'écran montrant ce processus.

6 références

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!