Ce tutoriel Bootstrap 5 vous montre comment faire un menu de navigation avec le composant navbar. Celui-ci permet de réaliser un menu « responsive ».
Bienvenue dans cette vidéo de formation sur Bootstrap. Si vous découvrez cette série par hasard, il est recommandé de commencer par le début en accédant à la playlist disponible en haut à droite, surtout si vous n’êtes pas familier avec Bootstrap.
Abonnement et Introduction au Sujet du Jour
N’oubliez pas de vous abonner pour rester informé des prochaines vidéos et à aimer cette vidéo pour soutenir la chaîne. Aujourd’hui, nous nous concentrerons sur le composant Navbar, qui permet de créer une barre de navigation avec un menu responsive.
Création de la Navbar et du Fichier HTML
Nous allons créer une icône « Menu Burger » pour les versions smartphone et un menu complet pour les grands écrans. Commencez par créer le fichier 20-composant-navbar.html et incluez la bibliothèque JavaScript de Bootstrap avec la balise script.
Ajout de la Balise nav et des Classes
Insérez une balise nav avec les classes nécessaires. Utilisez « navbar » et « navbar-expand » avec un préfixe pour gérer les tailles d’écran, afin de faire disparaître le menu et afficher l’icône en version mobile.
Définition des Tailles d’Écran et de la Couleur de Fond
Par exemple, utilisez « LG » pour afficher le menu jusqu’à 992 pixels de large. En dessous, le « Menu Burger » s’affichera. Ajoutez une couleur de fond avec la classe « bg-light ».
Création des Conteneurs et Configuration de la Classe Collapse
À l’intérieur de la balise nav, créez une div de classe « container » et une autre div avec les classes « collapse » et « navbar-collapse » pour gérer l’affichage du menu.
Construction du Menu avec des Listes et des Liens
Créez le menu dans une balise ul avec des éléments li. Ajoutez des liens avec la classe « nav-link » et définissez les classes « navbar-nav » pour ul et « nav-item » pour li.
Ajout de Plusieurs Éléments de Menu
Recopiez le code pour ajouter d’autres éléments comme « Accueil », « Blog », « À propos » et « Contact » pour construire votre barre de menu.
Test et Ajustement du Menu pour le Mode Responsive
Testez la barre de menu dans le navigateur. Vous verrez le menu complet en grand écran et le « Menu Burger » en dessous de 992 pixels. Ajustez la taille d’affichage selon vos préférences.
Ajout du Bouton « Menu Burger »
Ajoutez un bouton avec la classe « navbar-toggler » et une balise span avec « navbar-toggler-icon » au-dessus de la div de classe collapse.
Vérification du Fonctionnement du Bouton
Vérifiez dans le navigateur que le bouton « Menu Burger » remplace correctement le menu en version mobile. Ajoutez du JavaScript pour ouvrir et fermer le menu en utilisant la bibliothèque JavaScript de Bootstrap.
Configuration des Attributs JavaScript
Ajoutez des attributs au bouton, comme « data-bs-toggle » égal à « collapse » et un ID « menu ». Assurez-vous que le bouton cible cet ID avec « data-bs-target » pour activer le menu.
Test Final et Conclusion
Testez de nouveau pour vérifier que le menu s’ouvre et se ferme correctement. Pour des écrans plus larges, le menu se comporte normalement. Consultez la documentation de Bootstrap pour plus d’exemples et fonctionnalités avancées. Merci d’avoir suivi cette vidéo, et à bientôt pour une nouvelle session.
