Réaliser une barre de navigation avec Bootstrap

Dans ce cours vous découvrirez qu’avec Bootstrap vous serez capable de réaliser une barre de navigation professionnelle et épatante dans un temps relativement court. Nous étudierons comment grâce à bootstrap4 réaliser une barre de navigation, définir le placement de la barre de navigation sur une page web et comment intégrer les contenus tels que le logo, les liens et un petit formulaire dans la barre de navigation.

Comment créer sa barre de navigation avec Bootstrap4 ?

Bootstrap4 fournit les classes .navbar et .navbar-expand-(suffixe) qu’il faut attribuer obligatoirement à une balise nav pour concevoir une barre de navigation. Les valeurs possibles du suffixe sont : sm, md, lg, xl ; c’est-à-dire que vous pouvez attribuez comme classe à la balise nav soit .navbar-expand-sm, .navbar-expand-md, .navbar-expand-lg ou encore .navbar-expand-xl. .navbar-expand-(suffixe) permet à la barre de navigation d’être responsive, le suffixe à la fin indique au programme sur quel type d’écran la barre de navigation doit changer de comportement. Exemple :

<nav class= "navbar navbar-expand-md" ></nav>

Intégrer du contenu dans sa barre de navigation:

Intégrer un logo Pour intégrer un logo qui soit est une icône ou un nom dans votre barre de navigation proprement à l’aide de Bootstrap4, il faut utiliser la classe .navbar-brand qui permet de bien disposer le logo par rapport aux autres éléments de la barre de navigation. Bootstrap place le logo à gauche de la barre de navigation. Exemple :

<!-- Barre de navigation avec comme logo une icône -->
<nav class="navbar navbar-expand-md bg-primary mb-1">
    <a href="#" class="navbar-brand"><img width="40" src="btstrap.jpg"></a>
</nav>
<!-- Barre de navigation avec comme logo un mot -->
<nav class="navbar navbar-expand-md bg-dark">
   	  <a href="#" class="navbar-brand">Bootstrap</a>
</nav>

Résultat : Intégrer les liens de navigation : Nous aurons besoin d’une div qui sera le conteneur principal d’une balise ul qui lui va servir de conteneur des liens. Nous utiliserons les classes suivantes :

• .navbar-collapse : c’est la classe qui est attribuée à la div conteneur principal, cette classe permet de grouper et d’aligner les liens contenus dans le conteneur principal
• .navbar-nav : C’est la balise ul qui porte cette classe, elle permet de disposer les liens proprement selon le modèle flexbox au lieu d’une disposition de liste prévue au préalable par la balise ul
• .nav-item : portée par les balises li, elle permet de centrer l’élément contenu dans li
• .nav-link : elle est portée par les liens pour qu’ils respectent le design prévu par bootstrap pour les liens de la barre de navigation

Exemple :

<nav class="navbar navbar-expand-md bg-dark">
   	  <a href="#" class="navbar-brand">Bootstrap</a> 
   	  <div class=" navbar-collapse">
   	  	<ul class="navbar-nav m-auto">
   	  		<li class="nav-item active">
   	  			<a href="#" class="nav-link">Accueil</a>
   	  		</li>
   	  		<li class="nav-item">
   	  			<a href="#" class="nav-link">A propos</a>
   	  		</li>
   	  		<li class="nav-item">
   	  			<a href="#" class="nav-link">Contact</a>
   	  		</li>
   	  	</ul>
   	  </div>
   </nav>

Résultat :

Intégrer le bouton hamburger faisant apparaitre les liens de navigation lors d’un clic :

Sur les écrans des smartphones et tablettes il est judicieux de cacher les liens de navigation et les afficher lors d’un clic sur un menu hamburger que vous intégrerez, voici comment procéder avec Bootstrap :

• Attribuer la classe .collapse à la div porteur des liens de la barre de navigation. La classe .collapse permet de cacher les éléments à partir du type d’écran spécifié à la barre de navigation. Il va falloir aussi faire porter un identifiant (id) à la div.
• Insérer une balise button dans la barre de navigation c’est-à-dire dans la balise nav. La balise button portera la classe .navbar-toggler, les attributs data-toggle et data-target.

L’attribut data-target aura pour valeur l’identifiant de la div conteneur des liens précédé de diez (#)  car c’est la div que nous allons afficher quand on clique sur le bouton, l’attribut data-toggle aura pour valeur collapse c’est-à-dire d’afficher les éléments cachés. Exemple concret :

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
   	  <a href="#" class="navbar-brand">Bootstrap</a>
   	  <button class="navbar-toggler" data-toggle="collapse" data-target="#menuhamburger">
           <span class="navbar-toggler-icon"></span>
          </button>
   	  <div class="collapse navbar-collapse" id="menuhamburger">
   	  	<ul class="navbar-nav m-auto">
   	  		<li class="nav-item active">
   	  			<a href="#" class="nav-link">Accueil</a>
   	  		</li>
   	  		<li class="nav-item">
   	  			<a href="#" class="nav-link">A propos</a>
   	  		</li>
   	  		<li class="nav-item">
   	  			<a href="#" class="nav-link">Contact</a>
   	  		</li>
   	  	</ul>
   	  </div>
   </nav>

Résultat : Résultat lors du clic sur le menu hamburger :

Intégrer un formulaire dans la barre de navigation :

Dans cette partie du cours nous verrons comment intégrer un formulaire dans une barre de navigation grâce aux classes Bootstrap permettant de créer un formulaire. Nous allons réaliser un exemple premièrement puis après les explications vont suivre.

<nav class="navbar navbar-dark bg-dark">
     <a href="#" class="navbar-brand">Bootstrap</a>
     <form class="form-inline">
         <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-primary" type="submit">Envoyer</button>       
     </form>
</nav>

Explication: Premièrement nous avons utilisés la balise form qui permet de créer un formulaire, ensuite nous avons attribuer la classe .form-inline à la balise form, c’est une classe Bootstrap qui permet de disposer les éléments d’un formulaire horizontalement. Ensuite dans le formulaire nous avons intégrés un champ de recherche à l’aide de la balise input qui porte la classe .form-control. Cette classe est prévue par Bootstrap pour styliser les zones destinées à recevoir du texte. Vous remarquerez que nous avons ajoutés un petit bouton permettant d’envoyer la requête entrée dans le champ de recherche, elle porte la classe .btn, la classe Bootstrap qui donne l’apparence d’un bouton à un élément et la classe .btn-primary qui attribue une couleur de fond bleu à un bouton. Rendu :

Styliser votre barre de navigation et son contenu :

Maintenant que vous savez comment créer une barre de navigation et inclure des éléments de navigation, il faut rendre votre barre de navigation attrayante en la stylisant. Pour styliser les contenus c’est-à-dire les liens de navigation, le nom de votre logo, vous avez le choix entre la classe .navbar-light qui met le nom de votre logo en noir et les liens en gris foncée, ces derniers passent en noir lors du survol de la souris ou lorsqu’ils sont actifs, et la classe .navbar-dark qui met le nom de votre logo en blanc et les liens en gris clair qui passent en blanc lors du survol de la souris ou lorsqu’ils sont actif. Bootstrap4 met à votre disposition plusieurs couleurs bien définies  pour styliser le fond de votre barre de navigation, les classes de ces couleurs sont: .bg-danger(fond rouge), .bg-warning(fond orange), .bg-success(fond vert), .bg-primary(fond bleu claire), .bg-info(fond bleu ciel), .bg-dark(fond noir), .bg-white(fond blanc). Exemple :

<!-- Barre de menu avec fond bleu -->
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
    <a href="#" class="navbar-brand">Bootstrap</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#menuhamburger">
       <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menuhamburger">
	  	<ul class="navbar-nav m-auto">
	  		<li class="nav-item active">
	  			<a href="#" class="nav-link">Accueil</a>
	  		</li>
	  		<li class="nav-item">
	  			<a href="#" class="nav-link">A propos</a>
	  		</li>
	  		<li class="nav-item">
	  			<a href="#" class="nav-link">Contact</a>
	  		</li>
	  	</ul>
	</div>
</nav>
<!-- Barre de menu avec fond gris clair -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">Bootstrap</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#menuhamburger">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menuhamburger">
	  	<ul class="navbar-nav m-auto">
	  		<li class="nav-item active">
	  			<a href="#" class="nav-link">Accueil</a>
	  		</li>
	  		<li class="nav-item">
	  			<a href="#" class="nav-link">A propos</a>
	  		</li>
	  		<li class="nav-item">
	  			<a href="#" class="nav-link">Contact</a>
	  		</li>
	  	</ul>
	</div>
</nav>
<!-- Barre de menu avec fond orange -->
<nav class="navbar navbar-expand-md navbar-dark bg-warning">
	  <a href="#" class="navbar-brand">Bootstrap</a>
	  <button class="navbar-toggler" data-toggle="collapse" data-target="#menuhamburger">
              <span class="navbar-toggler-icon"></span>
       </button>
	  <div class="collapse navbar-collapse" id="menuhamburger">
	  	<ul class="navbar-nav m-auto">
	  		<li class="nav-item active">
	  			<a href="#" class="nav-link">Accueil</a>
	  		</li>
	  		<li class="nav-item">
	  			<a href="#" class="nav-link">A propos</a>
	  		</li>
	  		<li class="nav-item">
	  			<a href="#" class="nav-link">Contact</a>
	  		</li>
	  	</ul>
	  </div>
</nav>

Résultat :

Les placements possibles de la barre de navigation avec Bootstrap4 :

Par défaut la barre de navigation se place au début de la page  si rien ne lui ait spécifié. Mais Il existe trois classes Bootstrap4 pour gérer le placement de la barre de navigation Les trois classes mis à notre disposition par Bootstrap pour gérer le placement sont : .fixed-top, .fixed-bottom, .sticky-top .fixed-top : elle fixe la barre de navigation en haut de la page, cette dernière reste immobile même si vous défilez les contenus de la page. Son utilisation oblige que vous appliquez un padding-top au body pour éviter que les éléments de la page ne débordent et n’aillent se cacher sous la barre de navigation. .fixed-bottom : elle fixe la barre de navigation en dessous de la page .sticky-top : Par défaut la barre de navigation quel que soit sa position se défile au même moment que les autres éléments de la page si rien ne lui ai spécifié, mais si vous attribuez cette classe à la barre de navigation, elle se fixe en haut de la page lors du défilement des éléments de la page quel qu’en soit sa position initiale sur la page.

Exemple pratique d’une barre de navigation avec tous les éléments étudiés:

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
   	  <a href="#" class="navbar-brand">
   	  	  <img src="btstrap.jpg" width="50">
   	  </a>
   	  <button class="navbar-toggler" data-toggle="collapse" data-target="#menuhamburger">
           <span class="navbar-toggler-icon"></span>
          </button>
   	  <div class="collapse navbar-collapse" id="menuhamburger">
   	  	<ul class="navbar-nav m-auto">
   	  		<li class="nav-item active">
   	  			<a href="#" class="nav-link">Accueil</a>
   	  		</li>
   	  		<li class="nav-item">
   	  			<a href="#" class="nav-link">A propos</a>
   	  		</li>
   	  		<li class="nav-item">
   	  			<a href="#" class="nav-link">Gallerie</a>
   	  		</li>
   	  		<li class="nav-item">
   	  			<a href="#" class="nav-link">Tutoriels</a>
   	  		</li>
   	  		<li class="nav-item">
   	  			<a href="#" class="nav-link">Blog</a>
   	  		</li>
   	  		<li class="nav-item">
   	  			<a href="#" class="nav-link">Contact</a>
   	  		</li>
   	  	</ul>
   	  	<form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Search">
        <button class="btn btn-primary" type="submit">Envoyer</button>
          </form>
   	  </div>
   </nav>

Rendu : Cours précédent                                                                                        Cours suivant Voir la table des matières J’envoie régulièrement des astuces et techniques peu connus sur le développement web à un groupe privé de personnes… Je leur envoie des contenus gratuits, des tutoriels sur Bootstrap et ils bénéficient aussi de mes propres créations (thèmes premiums, composants et éléments d’interface). Ils sont aussi mis au courant dès que les thèmes premiums et plugins premiums sont au tarif promotionnel sur les meilleures marketplaces. Une fois inscrit, tu reçois gratuitement  mon livre Prise en main de Bootstrap 4 et un thème premium. Clique ici pour rejoindre le groupe privé et bénéficier de tous ces avantages.