Bootstrap 4 : Barre de Navigation partie 1

bootstrap 4

Plan du cours

Que serait un menu sans barre de navigation ? Cette leçon va porter plus loin tout ce qu’on a vu précédemment et va vous permettre de donner un vrai design professionnel à votre site internet.

Barre de navigation basique (navbar)

Avec bootstrap 4, la barre de navigation peut s’étendre ou se plier en fonction de la taille de l’écran.
Une barre de navigation basique est créée avec la classe .navbar suivie par la classe responsive à partir de laquelle la barre de navigation va passer de l’horizontale à la verticale .navbar-expand-xl|lg|md|sm.
En général, on rajoute aussi une classe pour la couleur de fond (bg-light pour un fond gris par exemple).
<nav class=”navbar navbar-expand-sm bg-light justify-content-center”><nav>

Pour ajouter des liens dans la barre de navigation, on utilise la balise de liste <ul> avec la classe .navbar-nav

<ul class=”navbar-nav“><ul>

Puis on rajoute les balises <li> avec la classe .navbar-item.

<li class=”nav-item“><li>

Et pour finir, on place nos balises <a> avec la classe .navbar-link.

<a class=”nav-link” href=”#”>Lien 1<a>

navbar
navbar-expand-sm

Barre de navigation verticale

Pour faire une barre de navigation verticale plutôt qu’horizontale, il suffit simplement de supprimer la classe .navbar-expand-xl|lg|md|sm de la balise .nav.

Horizontal : <nav class= “navbar navbar-expand-sm bg-light justify-content-center”><nav>
Vertical : <nav class=”navbar bg-light”><nav>

Vertical navbar

Barre de navigation avec une couleur de fond

Un petit rappel des classes qui permettent de choisir une couleur pour le Background :

<p class=”bg-primary text-white”>Fond d’ecran bleu.>p>
<p class=”bg-success text-white”>Fond d’ecran vert.>p>
<p class=”bg-info text-white”>Fond d’ecran turquoise.>p>
<p class=”bg-warning text-white”>Fond d’ecran orange.>p>
<p class=”bg-danger text-white”>Fond d’ecran rouge.>p>
<p class=”bg-secondary text-white”>Fond d’ecran gris.>p>
<p class=”bg-dark text-white”>Fond d’ecran noir.>p>
<p class=”bg-light text-dark”>Fond d’ecran gris clair.>p>
Background-color

Exemple :

Barre de navigation avec un fond noir une couleur de texte blanc, le menu centré et le premier lien désignant la page active :

navbar background color
Barre de navigation couleur de fond

Si on veut un fond vert avec un texte blanc, on change les classes correspondantes dans la balise <nav>

<nav class=”navbar navbar-expand-sm bg-success navbar-dark justify-content-center><nav>

barre de navigation couleur de fond vert

Barre de navigation avec Logo

Nous allons voir maintenant comment rajouter une marque ou un logo sur une barre de navigation.
Pour ce faire nous allons placer la classe suivante sur une balise <a>

Classe : .navbar-brand

Logo navbar
navbar-brand

A la place du logo vous pouvez aussi utiliser une image, la classe .navbar-brand ajustera automatiquement la barre de navigation dans sa verticalité (hauteur) pour contenir correctement l’image.

navbar

Barre de navigation responsive

Cette barre va cacher les liens du menu sur petit écran et les incruster dans un bouton qui se déploiera lorsque vous cliquerez dessus et fera apparaitre les liens qui se trouvent à l’intérieur.
Avec l’explosion des tablettes et smartphones, la Barre de navigation responsive est presque devenue indispensable si voulez que votre site soit facile d’utilisation sur petit écran.

Les classes et attributs (mises à l’intérieur du bouton):

.navbar-toggler
data-toggle=”collapse”
data-target=”#id”
.navbar-toggler-icon

La liste des liens du menu <ul> seront mis à l’intérieur d’une balise <div> qui contiendra la classe : .collapse navbar-collapse et l’id correspondant à l’id inclus dans data-target=”#id”.

Barre de navigation responsive

Affichage au-dessus de 768px

navbar

Affichage en-dessous de 768px

Navbar responsive
menu responsive

Barre de navigation responsive avec menu déroulant

Ceci est un peu le récapitulatif de tout ce qu’on a vu jusqu’à présent.

Avant de regarder la solution j’aimerais que vous essayiez de créer la même barre de navigation responsive qu’au-dessus mais que vous rajoutiez en plus au lien Contact un menu déroulant avec 3 liens à l’intérieur (adresse, email, téléphone).

Je vous rappelle les classes et l’attribut pour le menu déroulant :

.nav-item dropdown
.nav-link dropdown-toggle
.dropdown-menu
.dropdown-item
data-toggle=”dropdown” (attribut).

Affichage au-dessus de 768px

Barre navigation responsive menu deroulant

Affichage en-dessous de 768px

Navabar responsive with dropdown
Solution
Solution

Laisser un commentaire