TP01 Menus de navigation Bootstrap

1. Objectifs

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

4. Ce qui donne

5. Utiliser la classe .fa dans l'élément <span>
6. Pour connaitre comment utiliser les symboles bootstrap lire l'article les symboles
7. 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>

8. 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.
9. Le contenu qui sera affiché ou masqué est celui qui sera indiqué par data-target="#Centenunav">
10. Ce qui donne:

11. 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>

12. 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>

13. 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".
14. Utiliser la classe .input-group-prepend pour ajouter le texte d'aide devant l'entrée
15. Utiliser la classe .input-group-append pour l'ajouter derrière l'entrée.
16. Ajouter la classe .input-group-text pour styler le texte d'aide spécifié.
17. Utiliser la classe .input-group-sm pour les petits groupes d'entrées
18. Utiliser la classe .input-group-lg pour les grands groupes d'entrées

Correction