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.
<!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 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 :
<!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>
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1665
14
1423
52
1321
25
1269
29
1249
24
Une preuve de concept pour rendre Sass plus rapidement
Apr 16, 2025 am 10:38 AM
Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge
Une comparaison des fournisseurs de formulaires statiques
Apr 16, 2025 am 11:20 AM
Essayons de savoir un terme ici: "fournisseur de formulaire statique". Vous apportez votre HTML
Actualités hebdomadaires de la plate-forme: attribut HTML Loading, les principales spécifications Aria et le passage de iframe à Shadow Dom
Apr 17, 2025 am 10:55 AM
Dans cette semaine, le Roundup des nouvelles de la plate-forme, Chrome présente un nouvel attribut pour le chargement, les spécifications d'accessibilité pour les développeurs Web et la BBC Moves
L'accord avec l'élément de section
Apr 12, 2025 am 11:39 AM
Deux articles ont publié exactement le même jour:
Certains pratiques avec l'élément de dialogue HTML
Apr 16, 2025 am 11:33 AM
C'est moi qui regarde l'élément HTML pour la première fois. J'en ai été conscient depuis un certain temps, mais il ne l'a pas encore pris pour un tour. Il a un peu cool et
Multipliers multiples: cas général
Apr 12, 2025 am 10:52 AM
La première partie de cette série en deux parties a expliqué comment nous pouvons obtenir un curseur à deux pouces. Maintenant, nous examinerons un cas multi-tronçon général, mais avec un autre et
Comment nous avons tagué Google Fonts et créé des goofont.com
Apr 12, 2025 pm 12:02 PM
Goofonts est un projet parallèle signé par un développeur-femme et un concepteur-mari, tous deux de grands fans de typographie. Nous avons marqué Google
C'est tout dans la tête: gérer la tête de document d'un site alimenté par réact avec un casque React
Apr 15, 2025 am 11:01 AM
Le chef de document n'est peut-être pas la partie la plus glamour d'un site Web, mais ce qui y va est sans doute tout aussi important pour le succès de votre site Web que son
