====== Barre de Navigation (Navbar) ======
===== En résumé =====
===== Barre principale =====
Source vidéo : [[https://www.youtube.com/watch?v=23bpce-5s8I]]
Le conteneur principal est un élément **nav** ayant la classe **navbar** :
Ajoutons un lien de type **brand** :
Ajouter les classes **navbar-light** et **bg-light** pour donner un thème et une couleur de fond à la navbar. On aurait également pu utiliser **navbar-dark** et **bg-dark**.
Ajout d'une liste de liens. L'élément **UL** a la classe **navbar-nav**, les élements **LI** ont la classe **nav-item**, et les liens ont la classe **nav-link** :
Les liens sont alignés à droite de la barre. Pour les repousser vers la gauche (près du Brand), il faut ajouter la classe **mr-auto** à l'élément **UL**. Cette classe ajoute une marge automatique à droite, tandis que **ml-auto** ajouter une marge automatique à gauche.
La navbar affiche actuellement les liens les uns au-dessus des autres, plutôt que les uns à côté des autres. C'est parce que la navbar n'est pas encore "//collapsible//".
Entourer la liste de liens d'une **DIV** ayant les classes **collapse** et **navbar-collapse** :
Actuellement la navbar n'affiche plus les liens. Ajouter une classe **navbar-expand-{sm|md|lg|xl}** à l'élément **NAV** :
Les liens apparaîtront sur une taille d'écran supérieure ou égale à **576px (sm)**, à **768px (md)**, à **992px (lg)** ou à **1200px (xl)**.
De plus ils sont maintenant affichés en ligne (les uns à côté des autres).
Maintenant les liens apparaissent lorsque l'écran dépasse une certaine largeur. Lorsqu'il est plus petit, les liens n'apparaissent pas. À la place nous allons ajouter un bouton de menu (de type //hamburger//).
Cela se traduit par un élément **BUTTON** portant la classe **navbar-toggler** et contenant un élément **SPAN** portant la classe **navbar-toggler-icon** :
Pour le moment le bouton ne fait rien. Il faut encore lui ajouter une action (**data-toggle**) et une cible (**data-target**). La cible en question est un sélecteur CSS, en l'occurence l'**id** de l'élément **DIV** :
===== Sous-menu déroulant =====
Un élément du menu horizontal peut avoir des sous-éléments affichés verticalement.
Pour cela il suffit de lui ajouter la classe **dropdown** et son contenu doit être
structuré comme suit :