Créer un Menu Responsif avec Bootstrap

Construire un menu responsive
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Bootstrap
Revoir le teaser Je m'abonne
4,0
Transcription

49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,0
49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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

Découvrez comment ajouter une navbar responsif à votre site web en utilisant Bootstrap.

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.

Voir plus
Questions réponses
Pourquoi placer la navbar juste au-dessus du container?
Placer la navbar juste au-dessus du container permet de l'étendre sur toute la largeur de la fenêtre, contrairement au container qui est centré et limité en largeur.
Quelle est l'utilité du bouton avec la classe 'navbar-toggle collapsed'?
Ce bouton permet d'afficher ou de cacher le menu sur les petits écrans, offrant une meilleure expérience utilisateur sur mobile.
Quels éléments peuvent être ajoutés dans la navbar?
On peut ajouter des liens, des textes, des formulaires, et des menus déroulants, entre autres.
1 commentaire
4,0
1 vote
5
4
3
2
1
stephd
Il y a 4 ans
tres bonne formation c est une bonne decouverte generale.