CATALOGUE Code & Data Formation Bootstrap Apprendre Bootstrap - Le Framework Front-End

Créer un Menu Responsif avec Bootstrap

Retour à la formation
Chapitre 4 Leçon 1
Précédent
Suivant

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

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé de :

  • Avoir des connaissances de base en HTML et CSS
  • Connaître les fondements de Bootstrap

Métiers concernés

Ce sujet est particulièrement utile pour les développeurs web, intégrateurs HTML, et designers UX/UI souhaitant offrir une expérience optimale sur mobile.

Alternatives et ressources

En plus de Bootstrap, d'autres frameworks CSS comme Foundation, Bulma, ou des solutions sur mesure en CSS peuvent être utilisés pour créer des menus responsifs.

Questions & Réponses

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.
Ce bouton permet d'afficher ou de cacher le menu sur les petits écrans, offrant une meilleure expérience utilisateur sur mobile.
On peut ajouter des liens, des textes, des formulaires, et des menus déroulants, entre autres.