Comment créer une barre de navigation à deux lignes à l'aide de Bootstrap 4 ?

Barre de navigation Bootstrap 4 avec deux lignes

Dans ce didacticiel Bootstrap 4, nous allons vous montrer comment créer une barre de navigation avec deux lignes. Il s'agit d'un modèle de conception courant pour les sites Web qui disposent de nombreuses options de navigation ou qui souhaitent séparer différents types de navigation.

Prérequis

Pour suivre, vous aurez besoin de :

• Une compréhension de base du HTML et du CSS
• Bootstrap 4 installé sur votre system

Création de la barre de navigation

1. Commencez par créer un nouveau fichier HTML.
2. Ajoutez le code suivant à votre fichier pour créer la structure de base de la barre de navigation :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">
<h3 id="Ajout-de-deux-lignes">Ajout de deux lignes</h3>
<p>Pour ajouter deux lignes à la barre de navigation, nous utiliserons la classe flex-column sur le div navbar-collapse. Cela entraînera l'empilement vertical des éléments enfants du div navbar-collapse.</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="Ajout-de-liens-de-navigation">Ajout de liens de navigation</h3>
<p>Maintenant que nous avons deux lignes, nous pouvons y ajouter les liens de navigation. Nous allons créer deux éléments ul, un pour chaque ligne.</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="Résultat">Résultat</h3>
<p>Voici la barre de navigation résultante avec deux lignes :</p>
<pre class="brush:php;toolbar:false"><nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse flex-column"></div></nav>