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">

Ajout de deux lignes

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.

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

Ajout de liens de navigation

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.

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

Résultat

Voici la barre de navigation résultante avec deux lignes :

  Navbar
  
    
  

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!