Le Tutoriel de Bootstrap NavBar

NavBar
Brand/ Logo
Collapsing Navbar
Navbar Left & Right
Dropdown Navbar
Navbar & Form
Fixed NavBar

1. NavBar

Navigation Bar (Barre de navigation) est une part de l'interface d'utilisateur, permettant des utilisateurs à être capable de sauter à différentes pages dans le website.

Bootstrap vous fournit des classes Css relatives, vous permet à créer une Navigation Bar facilêmnt et est compatible avec tous les appareils au différentes tailles de l'écran.

Navbar

Pour être compatible avec les appareils de différentes largeurs d'écran. La barre d'outils du Bootstrap peut être étendue (expand) ou réduite (collapse) en fonction de la taille de l'écran. Le comportement le plus simple est qu'il passe d'une barre d'outils horizontale à une barre verticale lorsque la largeur de l'écran est petite.

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

Keyword	Description	Width
sm	Small	>= 567px
md	Medium	>= 768px
lg	Large	>= 992px
xl	Extra Large	>=1200px

Below is the illustration of structure of a simple Navbar. One ".navbar" can contain one or more ".navbar-nav":

navbar-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>

      <h4>.navbar .navbar-expand-sm</h4>

      <!-- A horizontal navbar that becomes vertical on small screens -->
      <nav class="navbar navbar-expand-sm bg-dark">
         <!-- Links -->
         <ul class="navbar-nav">
            <li class="nav-item">
               <a class="nav-link" href="#">Javascript</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Css</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Bootstrap</a>
            </li>
         </ul>
      </nav>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Si vous n'utilisez pas de la classe .navbar-expand-xl|lg|md|sm, la barre d'outil sera toujours verticale avec toutes tailles de l'écran.

<!-- Vertical with every screen size -->
<nav class="navbar bg-dark">
   <!-- Links -->
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">Javascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

.justify-content-center

La classe .justify-content-center permet .navbar-nav à se localiser au milieu de la barre d'outil.

navbar-center-example.html

<nav class="navbar navbar-expand-sm bg-dark justify-content-center">
   <!-- Links -->
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">Javascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

Colored Navbar

Css Class	Description
.navbar-dark	Utilisez cette classe si vous informez Bootstrap que votre barre d'outils utilise un fond sombre. Le Bootstrap définira automatiquement la couleur du texte de tous les Nav-item en blanc.
.navbar-light	Utilisez cette classe si vous informez Bootstrap que votre barre d'outils utilise un fond clair. Le Bootstrap définira automatiquement la couleur du texte de tous les Nav-item en noir.

.navbar-light .navbar-dark

<nav class="navbar navbar-expand-sm bg-warning navbar-light">
   <!-- Links -->
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">Javascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

Css Class	Description
.active	Utilisez cette classe si vous voulez que le Bootstrap souligner (highlight) un Nav-item tel qu'il est sélectionné (ou activé).
.disabled	Utilisez cette classe si vous voulez que le Bootstrap désactive (disable) un Link. L'utilisateur ne pourra pas appuyer sur ce Link.

.active .disabled

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <!-- Links -->
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">Javascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item active">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
      <li class="nav-item">
         <a class="nav-link disabled" href="#">AngularJS (Disabled)</a>
      </li>
   </ul>
</nav>

2. Brand/ Logo

One of the indispensable components of a Navbar is a Brand. It is the place where you put a Logo or a name directly related to your website.

L'utilisation de <a class="navbar-brand"> crée une Brand. Vous avez deux manière de mettre l'emplacement de Brand, elle soit un élément enfant direct de ".navbar" ou celui de ".nav-item". (Comme l'illustration ci-dessous).

.navbar-brand (Text)

<!-- Brand: Direct child of ".navbar" -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">o7planning</a>

   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">Javascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

<!-- Brand: Direct Child of ".nav-item" -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link navbar-brand" href="#">o7planning</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Javascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

L'exemple d'affichage d'une Logo sur Navbar :

.navbar-brand (Logo)

<!-- Brand: Direct Child of ".navbar" -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">
   <img src="../images/logo.png" style="width:64px;">
   </a>

   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link" href="#">Javascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

<!-- Brand: Direct Child of ".nav-item" -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <ul class="navbar-nav">
      <li class="nav-item">
         <a class="nav-link navbar-brand" href="#">
         <img src="../images/logo.png" style="width:64px;">
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Javascript</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Css</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#">Bootstrap</a>
      </li>
   </ul>
</nav>

3. Collapsing Navbar

Normalement, sur les appareils dotés de petits écrans, les website choisissent souvent l'action de fusionner la barre de navigation (navigation bar) en un bouton, lorsque l'utilisateur clique sur ce bouton là, la barre de navigation s'affiche verticalement.

Pour que la barre de navigation ait de l'action ci-dessus, vous devez l'utiliser en combinaison avec les classes css suivantes :

collapse
navbar-collapse
navbar-toggler

navbar-collapsing-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>

      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
         <!-- Brand -->
         <a class="navbar-brand" href="#">o7planning</a>

         <!-- Toggler/collapsibe Button -->
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
         </button>

         <!-- Navbar links -->
         <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
               <li class="nav-item">
                  <a class="nav-link" href="#">Javascript</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Css</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Bootstrap</a>
               </li>
            </ul>
         </div>
      </nav>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>

</html>

4. Navbar Left & Right

A Navbar can contain one or more ".navbar-nav". Below is an example, a Navbar with a Brand, and a ".navbar-nav" on the left and a ".navbar-nav" on the right.

navbar-leftright-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
         <a class="navbar-brand" href="#">o7planning</a>

         <!-- Left -->
         <ul class="navbar-nav mr-auto">
            <li class="nav-item">
               <a class="nav-link">Java</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">C/C++</a>
            </li>
         </ul>
         <!-- Right -->
         <ul class="navbar-nav ml-auto">
           <li class="nav-item">
              <a class="nav-link">Tom</a>
           </li>
           <li class="nav-item">
              <a class="nav-link">Logout</a>
           </li>
         </ul>
      </nav>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

mr-auto, ml-auto (?)
Le Tutoriel de Bootstrap Spacing Utility

5. Dropdown Navbar

navbar-dropdown-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">

         <!-- Brand -->
         <a class="navbar-brand" href="#">o7planning</a>

         <!-- Links -->
         <ul class="navbar-nav">
            <li class="nav-item">
               <a class="nav-link" href="#">Java</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">C/C++</a>
            </li>
            <!-- Dropdown -->
            <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
               Front-end
               </a>
               <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Javascript</a>
                  <a class="dropdown-item" href="#">Css</a>
                  <a class="dropdown-item" href="#">Bootstrap</a>
               </div>
            </li>
         </ul>

      </nav>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

6. Navbar & Form

Form can also appear on a Navbar, most commonly search Form, which allows users enter a keyword to search a content of website.

<!-- Navbar-nav with FORM -->
<ul class="navbar-nav">
   <form class="form-inline" action="/somepage">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-success" type="submit">Search</button>
   </form>
</ul>

navbar-form-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
     
      <nav class="navbar navbar-expand-sm navbar-dark bg-primary rounded">
         <a class="navbar-brand" href="#">o7planning</a>
         <ul class="navbar-nav mr-auto">
            <li class="nav-item">
               <a class="nav-link">Java</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">C/C++</a>
            </li>
         </ul>
         <!-- Navbar-nav with FORM -->
         <ul class="navbar-nav ml-auto">
            <form class="form-inline" action="/somepage">
               <input class="form-control mr-sm-2" type="text" placeholder="Search">
               <button class="btn btn-success" type="submit">Search</button>
            </form>
         </ul>
      </nav>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

7. Fixed NavBar

.fixed-top is a utility class in the Bootstrap. It is used to fix an element on the viewport side of browser. You can apply this class to Navbar.

navbar-fixed-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Navbar Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>

      <nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top">
         <a class="navbar-brand" href="#">o7planning</a>
         <ul class="navbar-nav mr-auto">
            <li class="nav-item">
               <a class="nav-link">Java</a>
            </li>
            <li class="nav-item">
               <a class="nav-link">C/C++</a>
            </li>
         </ul>
      </nav>

      <h1 class="mt-6">Content</h1>
      <h2>Content</h2>
      <h3>Content</h3>
      <h4>Content</h4>
      <h5>Content</h5>
      <h1>Content</h1>
      <h2>Content</h2>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Le Tutoriel de Bootstrap Position Utility