Django - 4.4 Créer une barre de navigation Bootstrap (navbar)
La barre de navigation, ou navbar, se trouve en haut d'un site ou d'une application. Elle regroupe le logo, les liens principaux et parfois une recherche. Bootstrap fournit une navbar prête à l'emploi. Cette leçon montre comment l'ajouter, la modifier et remplacer le texte du nom par un logo.
Ajouter la barre de navigation
On copie le code de la navbar fourni par Bootstrap, puis on le place en haut du formulaire. La barre contient une zone de recherche et des liens, dont Home.
Par défaut, la navbar est responsive : elle s'adapte à la largeur de l'écran. Des classes utilitaires permettent de régler les espacements et l'alignement.
Modifier les éléments de la barre
Chaque élément de la barre peut être modifié. Bootstrap fournit des sous-composants comme la marque, les liens, les menus déroulants et la recherche.
La vidéo transforme le lien Produit en menu déroulant avec les choix Fruits, Légumes et Viande. Après actualisation, le menu s'affiche avec ces trois options.
Les sous-composants se combinent dans une même barre. Une navbar peut donc contenir une marque, des liens, un menu déroulant et une zone de recherche.
- Remplacer le texte d'un lien par un autre libellé.
- Transformer un lien en menu déroulant avec plusieurs choix.
- Garder la zone de recherche pour rechercher un élément.
Remplacer le nom par un logo
Le texte de la marque peut être remplacé par une image. La vidéo copie le lien d'une image trouvée sur Internet, puis la place à la place du texte.
Après suppression du texte restant et actualisation, le logo s'affiche à l'endroit de la marque, à côté des liens.
En résumé
Bootstrap fournit une navbar complète : marque, liens, menu déroulant et recherche. Elle se modifie facilement, en changeant les textes, les listes ou le logo. Elle s'adapte aux écrans par défaut.
Points clés
- La navbar se place en haut de la page.
- Elle est responsive par défaut.
- Les liens peuvent devenir des menus déroulants.
- Le texte de la marque peut être remplacé par un logo.
- Les classes utilitaires règlent les espacements et l'alignement.
Questions fréquentes
La navbar s'adapte-t-elle aux petits écrans ?
Oui, par défaut. Elle change sa mise en forme selon la largeur de l'écran.
Peut-on remplacer le nom du site par une image ?
Oui. La vidéo place une image à la place du texte de la marque, qui devient un logo.
Comment modifier les liens de la barre ?
Modifiez directement le code de la navbar. Chaque lien est un élément que l'on peut renommer, transformer ou supprimer.