TP01 Menus de navigation Bootstrap

• Etre capable de créer un menu en Bootstrap

Énoncé

• Utiliser le framework Bootstrap 5 pour réaliser le menu responsive illustré par le schémas ci-dessous
• Le menu s’étale sur la totalité de largeur de l’écran
• Le menu se colle en haut de l’écran
• Ajouter une ligne de séparation dans la liste déroulante avant le dernier élément

Éléments de correction

1. À la base, une barre nécessite juste les classes navbar et navbar-expand pour la réduction du point d’arrêt requis afin de créer l’icône hamburger:

<nav class="navbar navbar-expand-md navbar-light bg-dark fixed-top">
</nav>

• L’arrière plan de menu est noir pour cela on utilise la classe: bg-dark
• La couleur de texte est blanc pour cela on utilise la classe: navbar-light
• Pour rendre la barre de navigation fixée en haut de la page utiliser la classe .fixed-top

Conseil:

Utiliser l’ une des classes .bg-color pour changer la couleur de fond de la barre de navigation ( .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darket .bg-light)

Ajouter une couleur de texte blanche à tous les liens de la barre de navigation avec la classe .navbar-dark ou utiliser la classe .navbar-light pour ajouter une couleur de texte noire.

2. Utiliser une classe correspondante pour mettre automatiquement les textes de menu en majuscules
3. Ajouter le Logo la marque
• Pour ajouter ce logo utiliser la classe .navbar-brand
• La classe .navbar-brand est utilisée pour mettre en évidence la marque ,le logo ou le nom de votre site.

<a href="#" class="navbar-brand">
    <span class="fa fa-child text-warning fa-2x"></span>
</a>

• Ce qui donne



• Utiliser la classe .fa dans l’élément <span>
• Pour connaitre comment utiliser les symboles bootstrap lire l’article les symboles
4. Pour créer un menu réductible, utiliser un bouton avec celui.

<button type="button"
     class="navbar-toggler bg-light" 
     data-toggle="collapse"
     data-target="#Centenunav">
     <span class="navbar-toggler-icon"></span>
</button>

• La classe .collapse indique un élément réductible (un <div> dans notre cas); c’est le contenu qui sera affiché ou caché avec le bouton.
• Le contenu qui sera affiché ou masqué est celui qui sera indiqué par data-target="#Centenunav">
• Ce qui donne:



5. Pour créer les éléments de menu, utiliser un élément div ou nav qui contient les classes .collapse et navbar-collapse
• La classe justify-content-between dispose le premier objet au début de l’axe et le dernier à la fin de l’axe.
• On peut utiliser la classe justify-content-around pour distribuer l’espace de façon équitable. Tous les objets ont le même espace de chaque côté.
• Attribuer un Id à cet élément si un bouton a été crée à l’étape 3

 <div class="collapse navbar-collapse justify-content-between"
         id="Centenunav">
</div>

6. Pour créer l’élément de recherche,commencer par l’élément formulaire

<form class="form-inline ml-3">
     <div class="input-group">
        <input type="text" class="form-control"
         placeholder="Rechercher">
        <div class="input-group-append">
             <button type="button" class="btn">
               <span class="fa fa-search text-muted"></span>
             </button>
         </div>
      </div>
</form>

• La classe .input-group est un conteneur permettant d’améliorer une entrée en ajoutant une icône, un texte ou un bouton devant ou derrière le champ de saisie en tant que « texte d’aide ».
• Utiliser la classe .input-group-prepend pour ajouter le texte d’aide devant l’entrée
• Utiliser la classe .input-group-append pour l’ajouter derrière l’entrée.
• Ajouter la classe .input-group-text pour styler le texte d’aide spécifié.
• Utiliser la classe .input-group-sm pour les petits groupes d’entrées
• Utiliser la classe .input-group-lg pour les grands groupes d’entrées

Correction