Easy-Micro

LOGICIEL 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 :
  1. Création de la barre : navbar
  2. Barre horizontale (expand) ou verticale (collapse)
  3. Largeur de barre : navbar-expand-** avec xs(eXtraSmall smartphone), sm (SMall tablette), md (MeDium desktop) ou lg (LarGe desktop)
  4. 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)
  5. Couleur de fond : bg-primary, bg-success, bg-info, bg-warning, bg-danger, bg-secondary, bg-dark et bg-light
  6. 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>
> Voir cet exemple Easy-Micro

Détails des commentaires de cette barre de navigation Bootstrap
  1. Un logo ou le nom du site (avant le ul), avec un lien avec la classe navbar-brand (brand = marque de produit)
  2. Un bouton Burger (class="navbar-toggler", data-toggle="collapse" (bouton à bascule pliant) et data-target="#thetarget") pour le menu responsive ainsi que 3 attributs ARIA pour les spécifications WAI d'accessibilités suivit de l'icone du burger : navbar-toggler-icon
  3. Une classe .me-auto (margin-right auto) pour pousser deux items vers la droite de la barre. Sinon .ms-auto pour pousser vers la gauche. Par défaut, pas d'auto margin (voir l'utilisation de la FlexBox dans Bootstrap
  4. En plus de la classe nav-item, les liens peuvent avoir la classe .active pour faire ressortir (hightlight) le lien, ou la classe .disabled pour indiquer que le lien est non cliquable
  5. Classe sr-only pour Screen Readers Only : informations pour les lecteurs d'écran (mal voyant)
  6. Un bouton bascule (dropdown) pour afficher des sous menu dans une navbarDropdown avec, en plus, des attributs ARIA :
    Techniques_ARIA (spécifications WAI d'accessibilités)
    • L'attribut aria-haspopup="true" permet de spécifier qu'il s'agit d'un bouton menu et pas d'une fenêtre pop up (aria-haspopup="false" soit fenêtre modal)
    • L'attribut aria-expanded="false" permet de spécifier que ce bouton n'est pas étendu sur tout l'écran
    L'attribut role="button" permet de spécifier que le lien (a) se comporte comme un bouton
  7. Un sous menu (navbarDropdown) peut avoir un diviseur (dropdown-divider)
  8. Un formulaire Bootstrap avec
    • La classe form-inline (ou bien .form-horizontal) et la classe d-flex pour définir un conteneur flexbox (div-flex)
    • La classe Bootstrap de gestion d'espace : my-2 pour margin (m) top and bottom (y) de 2px et de 0px pour les LarGe desktop (lg)
    • Un input Search avec la class form-control et la classe placeholder pour le texte gris dans le input et la classe me-2, soit margin-right à 2 px

Bootstrap utilise la technique ARIA (Accessible Rich Internet Applications) qu'on pourrait traduire par "applications internet riches et accessibles". C'est un ensemble de classe qui permettent de rendre le contenu et les applications web accessibles.

Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]