Easy-Micro


LOGICIEL Bootstrap
Bootstrap NavBar

Barre de navigation Bootstrap V4

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

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 :
<div class="container">

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

  1. Création de la barre : navbar
  2. Barre horizontale (expand) ou verticale (collapse)
  3. Largeur de barre : navbar-expand ou 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)

<div class="container">

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

<!-- 1 - Marque en highlight -->
<a class="navbar-brand" href="#">Logo</a>

<!-- 2 - Bouton burger -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Manavbaramoi" aria-controls="Manavbaramoi" aria-expanded="false" aria-label="Navigation basculante">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Début du menu -->
<!-- navbar-collapse : regroupement des items du menu -->
<div class="collapse navbar-collapse" id="Manavbaramoi">
<!-- 3 - Auto margin right -->
<ul class="navbar-nav mr-auto">

<!-- 4 - Active item -->
<li class="nav-item active">

<!-- 5 - Screen Readers Only -->
<a class="nav-link" href="#">Accueil <span class="sr-only">(actuel)</span></a>
</li>

<!-- 6 - Bouton bascule (toggle) - Attention: librairie JQuery nécessaire -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Nos produits
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Produit 1</a>
<a class="dropdown-item" href="#">Produit 2</a>
<!-- 7 - Diviseur de sous menu -->
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Nouveaux produits</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>

<!-- 8 - Formulaire de recherche -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Recherche" aria-label="Recherche">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Recherche</button>
</form>
</div>
</nav>

</div>
Exemple issu de W3Schools

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 .mr-auto (margin-right auto) pour pousser deux items vers la droite de la barre. Sinon .ml-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)
    • 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 de type Search avec la class form-control avec la classe placeholder pour le texte gris dans le input et la classe pour SMall tablette (sm) mr-sm-2, soit margin-right à 2 px


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mercredi 20 mars 2019 - Semaine 12 - Saint Herbert (Demain: Sainte Clémence)
Aujourd'hui, c'est l'anniversaire de Danièle Gilbert (1943-76 ans), animatrice de télévision française et de Marthe Villalonga (1932), actrice française. Autre 20 mars: 1815 : de retour de l'île d'Elbe et après une marche triomphale sur Paris, Napoléon entre dans la capitale. 1965 : France Gall gagne l'Eurovision pour le Luxembourg avec Poupée de cire poupée de son.
Haut de page Easy-Micro