rudless.

Les barres d’outils standard Bootstrap

1. Objectifs

• Connaitre les barres d’outils standard Bootstrap
• Etre capable de travailler avec les barres d’outils standard Bootstrap

2. Les barres d’outils standard (par défaut)

• Les barres d’outils standard sont créées avec les classes .navbar et la classe .navbar-expand-xl|lg|md|sm pour indiquer pour quelles largeurs d’écran la barre d’outils sera étendue (expand), au contraire, elle est réduite (collapse).
• Pour ajouter des liens à la barre de navigation, ajoutez simplement une liste non ordonnée avec la classe <code>.navbar-nav .
• Pour définir chaque élément de liste individuel, ajoutez la classe .nav-item à l’élément <li> et utilisez la classe .nav-link à un élément <a> pour des liens individuels.
• Pour passer à un point d’arrêt différent, nous devons simplement échanger navbar-expand-* avec l’un de ceux-ci.
• navbar-expand = ne s’effondre jamais verticalement (reste horizontal)
• navbar-expand-sm = s’effondre en dessous de sm largeurs <576px
• navbar-expand-md = se réduit en dessous de md largeurs <768px
• navbar-expand-lg = s’effondre en dessous de la largeur lg <992px
• navbar-expand-xl = se réduit en dessous de xl width <1200px

3. Créer une barre de navigation par défaut

• Pour créer une barre de navigation par défaut:
1. Ajoutez les classes .navbar, .navbar-default à la balise <nav>.

<nav class="navbar navbar-default">
    Je suis une barre de navigation
</nav>

2. Ajoutez role = "navigation" à l’élément <nav> pour faciliter l’accessibilité.

<nav class="navbar navbar-default" role = "navigation">
    Je suis une barre de navigation
</nav>

• Vous pouvez également utiliser <div> avec role = "navigation" au lieu de <nav>.
3. Ajoutez une classe d’en-tête .navbar-header à l’élément <div>.

<nav class="navbar navbar-default" role = "navigation">
 <div class = "navbar-header">
   </div>
</nav>

4. Incluez un élément <a> avec classnavbar-brand. Cela donnera au texte une taille légèrement plus grande. Pour ajouter des liens à la barre de navigation, ajoutez simplement une liste non ordonnée avec une classe de .nav, .navbar-nav.

<nav class="navbar navbar-default" role = "navigation">
 <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">apcpedagogie</a>
   </div>
</nav>

4. Etude d’un exemple

<nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" 
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>   
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Acceuil<span 
class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Les cours</a>
              </li>
              <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">
                  Liste déroulante
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Sous titre 01</a>
                  <a class="dropdown-item" href="#">Sous titre 02</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Sous titre 03</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="search" 
placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" 
type="submit">Chercher</button>
            </form>
          </div>
        </nav>

1. <nav class="navbar navbar-expand-lg navbar-light bg-light">

1. La classe ".navbar"
• La classe ".navbar" est requise pour identifier l’élément en tant que barre de navigation.
2. La classe ".navbar-light"
• La classe ".navbar-light" sert à ajouter une couleur claire pour le texte
3. La classe ".bg-light"
• La classe ".bg-light" à un fond plus clair.

2. <a class="navbar-brand" href="#">Navbar

1. .navbar-brand pour le nom de votre entreprise, produit ou projet.
2. C’est l’endroit où vous mettez un logo ou un nom directement lié à votre site Web.Il peut contenir uniquement un logo ou du texte d’image typique.
3. Cette classe (.navbar-brand) peut être attaché à la plupart des éléments, mais une ancre fonctionne mieux car certains éléments peuvent nécessiter des classes d’utilitaires ou des styles personnalisés

3. <button class="navbar-toggler"………..

• La classe ".navbar-toggler", ".navbar-toggler-right" sont utilisés pour activer le basculement de la navigation vers une icône hamburger à partir de périphériques de grande taille.
• Ce bouton permet de réduire le contenu de la barre de navigation sur les écrans mobiles . Tout ce que vous mettez dans votre barre de navigation (sauf la marque navbar) sera masqué par défaut sur les écrans mobiles. Ce bouton bascule vous les ramènera lorsque vous cliquerez dessus.
• Lorsque vous effectuez un transfert sur un écran mobile, les seules pièces visibles sont la marque navbar et le bouton à bascule . Lorsque vous cliquez sur le bouton bascule, les autres éléments apparaissent.
• Le bouton lui-même est caché sur des écrans plus grands. Par défaut, il est masqué sur les écrans plus grands que 768px . Vous pouvez changer cette valeur, nous en discuterons plus tard.
• Attributs du bouton bascule de la barre de navigation




• data-toggle="collapse"

• data-toggle="collapse", cet attribut indique à JavaScript qu’il contrôle le comportement de réduction.

• data-target=""

• L’attribut data-target="" doit contenir sur le id de la boîte envelopper les composants cachés.
• Donc, si vous allez emballer vos composants dans une boîte id="exemple", alors la cible de données du bouton devrait l’être data-target="#exemple".

• aria-expanded

• aria-expanded="" : cet attribut définit l’ état initial des composants masqués . Si c’est false ça veut dire que c’est caché, si true c’est visible.

• aria-haspopup

• Le aria-haspopup="true"indique que l’élément possède un menu contextuel ou un sous-niveau. Il informe les utilisateurs de lecteurs d’écran qu’un “Popup” est connecté.