Easy-Micro [ BOOTSTRAP - Bootstrap NavBar ] - Formations informatiques pour entreprises

Bootstrap
Bootstrap NavBar
Barre de navigation Bootstrap V4

Télécharger et installer Javascript

Pour pouvoir utiliser les composants Bootstrap, vous devez télécharger le fichier bootstrap.min.js. Celui-ci se trouve dans le package de base (dossier dist). Faites ensuite un lien comme ceci :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mes-styles.css" rel="stylesheet">
</head>
<body>

Ici le contenu de votre site

<script src="js/bootstrap.min.js"></script>
</body>
</html>

A noter que Bootstrap depuis sa version 5 n'utilise plus la bibliothèque JQuery et propose dorénavant du pur JavaScript (voir le concept de Vanilla JS) mais JQuery reste accessible dans Bootstrap pour ceux qui le veulent.

Barre de navigation Bootstrap

Une barre de navigation Bootstrap utilise au minimum :

Une balise nav avec les classes navbar, navbar-expand-** (** avec lg pour LarGe desktop) et la couleur bg-light
Une balise <ul> avec la class="navbar-nav"
Des balises <li> avec la classe .nav-item
Des balises <a> avec la classe .nav-link


<div class="container">
<!-- Début de la barre -->
<nav class="navbar 
                 navbar-expand-lg 
                         navbar-light 
                              bg-light">

Propriétés d'une barre de navigation Bootstrap

Les propriétés d'une barre de navigation Bootstrap sont spécifiées avec des classes CSS dans la balise nav :

Création de la barre : navbar
Barre horizontale (expand) ou verticale (collapse)
Largeur de barre : navbar-expand-** avec xs(eXtraSmall smartphone), sm (SMall tablette), md (MeDium desktop) ou lg (LarGe desktop)
Rajoutez la classe sticky-top pour fixer la navbar en haut de l'écran après utilisation du scroll (cette technique de Sticky Navbar remplace la technique Affix devenue obsolète depuis la version 4 de Bootstrap)
Couleur de fond : bg-primary, bg-success, bg-info, bg-warning, bg-danger, bg-secondary, bg-dark et bg-light
Couleur des liens : navbar-light (liens noir) ou navbar-dark (liens blanc)

Source: Bootstrap Navbar

<!-- Début de la barre -->
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light">
  <div class="container-fluid">
  
   <!-- 1 - Logo Marque en highlight -->
   <a class="navbar-brand" href="#"><img src="logo.svg" alt="Bootstrap" width="30" height="24" class="d-inline-block align-top"></a>
   
    <!-- 2 - Bouton burger -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"><span class="navbar-toggler-icon"></span></button>
    
    <!-- Début du menu -->
    <!-- navbar-collapse : regroupement des items du menu -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <!-- 3 - Auto margin right -->
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
         <!-- 4 - Active item -->
          <a class="nav-link active" aria-current="page" href="#">Accueil</a>
        </li>
        <li class="nav-item">
         <!-- 5 - Nav Link -->
          <a class="nav-link" href="#">Lien</a>
        </li>
        <!-- 6 - Bouton bascule (toggle) -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
            Nos produits</a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Produit 1</a>v/li>
            <li><a class="dropdown-item" href="#">Produit 2</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Autres produits</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1">Désactivé</a>
        </li>
      </ul>
      <!-- 8 - Formulaire de recherche -->
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Recherche">
        <button class="btn btn-outline-success" type="submit">Recherche</button>
      </form>
    </div>
  </div>
</nav>