2019

Bootstrap 4 : Barre de Navigation partie 2

bootstrap 4

Plan du cours

Dans cette seconde partie nous allons voir comment améliorer un peu notre barre de navigation (navbar).

Barre de navigation avec formulaire de recherche

Pour créer un formulaire de recherche dans la barre de navigation nous allons tout simplement y rajouter un élément <form> et nous servir de la classe .form-inline pour regrouper côte à côte la barre de recherche et le bouton correspondant.

navbar search
Barre de recherche

Barre de navigation avec du texte

Ici nous allons rajouter du texte en plus des liens du menu.
Nous utiliserons la classe .navbar-text pour aligner correctement le texte (même marge intérieure que les liens du menu) dans la barre de navigation.

Navbar with text
Barre de navigation avec du texte

Barre de navigation fixe

Cette barre de navigation va rester apparente même lorsqu’on descendra à l’intérieur de la page.

Classe: .fixed-top

Très important : vous devrez rajouter à l’élément se situant juste en-dessous de votre barre de navigation une marge haute ( margin-top) pour éviter que l’élément et le menu ne se chevauchent.

navbar fixed
Barre de navigation fixe
Barre de navigation fixe

*Notez que vous pouvez aussi fixer la barre en bas de la page en remplaçant la classe : .fixed-top par la classe : .fixed-bottom.

Barre de navigation épinglée (sticky)

Pour finir, voyons cette barre un peu spéciale qui ne va rester collée (fixée) en haut de la page qu’une fois que le scroll de la souris sera passé à sa hauteur.

Classe: .sticky-top

barre de navagation
Barre de navigation épinglée
Barre de navigation épinglée

Laisser un commentaire