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.
Questions fréquentes
Programme détaillé
Module 1 - Introduction
Module 2 - Explication de la grille
Module 3 - Mettre du style
Module 4 - Utiliser les composants prêt à l’emploi
Module 5 - Utiliser les composants JavaScript
on parle de jquery alors que dans la version il n'y est plus
on nous parle de phpstorm comme editeur qui est payant voir lez bloc note (au secours !!!)
il y a vscode qui maintenant est utiliser par quasi tous les développeurs et qui est gratuit.
sur la video : Maîtriser les Grilles et Colonnes dans Bootstrap
1 - le cours annonce la modification pour passer sur 4 colonne puis de changer les titres,
a ce moment la on reviens en arrière à la modification pour passer en 4 colonnes... et ça recommence
grosse erreur de montage.
2 - ensuite push et pull ont été supprimé pour utiliser le système flexbox sur la version 5
avec les classes order pour gérer l'ordre des colonnes.
3 - l'explication sur le offset n'est absolument pas claire :
on a une première explication, puis une deuxième qui est la même mais avec le résultat directe avec offset.
bref je vais être franc j'ai trouver une formation sur udemy sur bootstrap 5 bien plus intéressante, je ne trouve pas normal d'avoir une formation sur bootstrap 3 qui nous induit en erreur.
ayant passer ce premier chapitre j’arrête car je ne vois aucun intérêt à continuer.