La barre de navigation peut être construite à l'aide d'une liste non numérotée, chaque item correspondant
à un élément de navigation. Cette liste est placée dans un éément nav. La mise en forme est
ensuite obtenue en appliquant les styles Bootstrap adéquats.
...
</head>
<body>
<!-- La bare de navigation -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="maPage2.html">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="maPage3.html">Page 3</a>
</li>
</ul>
</nav>
<!-- le contenu de la page est dans un grille bootstrap -->
<div class="container-fluid">
<!-- h1 qui suit est un élément bloc, il occupera toute la largeur du container -->
<h1>Ma première page bootstrap</h1>Dans les autres pages, on reportera également cette barre de navigation en modifiant simplement l'élément actif et les liens hypertexes. Par exemple pour maPage2.html on aura :
...
</head>
<body>
<!-- La bare de navigation -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="maPage1.html">Page 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="maPage3.html">Page 3</a>
</li>
</ul>
</nav>
<!-- le contenu de la page est dans un grille bootstrap -->
<div class="container-fluid">
<!-- h1 qui suit est un élément bloc, il occupera toute la largeur du container -->
<h1>Ma première page bootstrap</h1>