Ajout d'une Navbar
Objectifs
Les objectifs de cette vidéo sont de :
- Créer une navbar responsif en utilisant Bootstrap
- Comprendre comment structurer le HTML pour une meilleure compatibilité mobile
- Savoir ajouter des composants comme des formulaires et des menus déroulants
Résumé
Découvrez comment ajouter une navbar responsif à votre site web en utilisant Bootstrap.
Description
Dans cette leçon, nous allons voir comment enrichir notre page web avec une navbar responsif en utilisant les composants de Bootstrap. Cette navbar pourra contenir des liens, du texte, des formulaires, et des menus déroulants. Nous placerons la navbar juste en dessous du body pour pouvoir la rendre pleine largeur (100% de la fenêtre). Nous utiliserons la balise avec les classes navbar et navbar-default pour styliser notre menu.
Nous ajouterons ensuite un container pour centrer le contenu interne de notre navbar tout en permettant au background de s'étendre de gauche à droite. A l'intérieur de ce container, nous placerons une div avec la classe navbar-header, qui contiendra un bouton (avec les classes navbar-toggle collapsed) pour afficher ou cacher le menu sur les petits écrans.
Le menu principal sera construit en utilisant une liste (
- ) avec des items (
- ) contenant des liens (e.g., présentation, membres, mon compte, contact). Pour les petits écrans, le bouton sera configuré pour ouvrir et fermer le menu en utilisant les attributs data-toggle et data-target.
Nous verrons également comment ajouter des composants additionnels comme des formulaires avec une classe navbar-form et des menus déroulants avec dropdown, dropdown-toggle, et caret.