Les barres d’outils standard Bootstrap

• 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

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>

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