<nav class="navbar navbar-default">
.<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
.navbar-brand
: pour le nom de votre entreprise, produit ou projet.
.navbar-nav, nav-item
et nav-link
:navbar-nav
qui se place sur la balise ul,nav-item
qui se place sur la balise li,nav-link
qui se place sur la balise a.nav-link
peut avoir deux autres classes : active
permet de préciser quel page est active, et la classe disabled
de désactiver un lien.<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
.navbar-expand-md
: Cela indique à quel point la barre de navigation se développe de l’icône verticale ou hamburger à une barre horizontale pleine taille. Dans ce cas, nous l’avons défini sur des écrans moyens, qui, dans Bootstrap, sont supérieurs à 768 pixels.navbar-toggler-icon
: Comme vous pouvez probablement le deviner, cela crée l’icône sur laquelle les utilisateurs cliquent pour ouvrir le menu sur des écrans plus petits..navbar-toggler
: à utiliser avec notre plugin collapse et d’autres comportements de navigation ..form-inline
: pour tous les contrôles de formulaire et les actions..navbar-text
: pour ajouter des chaînes de texte centrées verticalement..collapse.navbar-collapse
: pour regrouper et masquer le contenu de la barre de navigation par un point d’arrêt parent.dropdown
:
nav-link
recevra en plus la classe dropdown-toggle
et un attribut data-bs-toggle=”dropdown”.nav-link
, une balise ul avec la classe dropdown-menu
, contenant des dropdown-item
..navbar
".navbar
" avec le composant nav (.navbar-nav
) pour créer des éléments de menu de navigation et l’une des classes “.navbar-expand-sm | md | lg | xl
” pour la réduction du point d’arrêt requis afin de créer l’icône hamburger.role = "navigation"
au lieu de <nav>..navbar-expand
” à la classe “.navbar
“..navbar-brand
“..form-inline
“..navbar-text
“..navbar-toggler
” est utilisée pour contrôler le comportement de réduction de la barre de navigation sur des écrans plus petits..collapse
” et “.navbar-collapse
” permettent de regrouper des éléments de la barre de navigation pour des périphériques plus petits.flexbox
. Les éléments de la barre de navigation peuvent être alignés à l’aide de de celui-ci (flexbox).justify-content-end
dans le navbar pour justifier les éléments à droite.<!doctype html>
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>navbar bootstrap!</title>
</head>
<body>
<div class="container">
<h3>navbar bootstrap!</h3>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand " href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarExempleAlignement" aria-controls="navbarExempleAlignement"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-start" id="navbarExempleAlignement">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Gauche01</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gauche02</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse justify-content-center" id="navbarExempleAlignement">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Centre01</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Centre02</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navbarExempleAlignement">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Droite01</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Droite02</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
.ms-auto
et la classe .navbar-nav
pour aligner les éléments de navigation à droite.left
et right
ont été remplacées par start
et end
pour le support RTL . Par conséquent, les utilitaires de marge ont changé pour Bootstrap 5 beta :ml-auto=> ms-auto(start)
mr-auto=> me-auto(end)
start
et end
dans Bootstrap 5…ms-*
ps-*
me-*
pe-*
text-start
text-end
float-start
float-end
border-start
border-end
rounded-start
rounded-end
dropstart
dropend
dropdown-menu-start
dropdown-menu-end
carousel-item-start
carousel-item-end
navbar-light
: cette classe définira la couleur du texte sur sombre. Ceci est utilisé lors de l’utilisation d’une couleur d’arrière-plan claire.navbar-dark
: cette classe définira la couleur du texte sur clair. Ceci est utilisé lors de l’utilisation d’une couleur d’arrière-plan sombre..bg-primary
: Ceci définit la couleur sur la couleur primaire..bg-secondaire
: Ceci définit la couleur sur la couleur secondaire..bg-success
: Cela définit la couleur sur la couleur du succès..bg-danger
: Cela définit la couleur sur la couleur de danger..bg-warning
: Ceci définit la couleur sur la couleur d’avertissement..bg-info
: Ceci définit la couleur sur la couleur d’information..bg-light
: Ceci définit la couleur sur la couleur claire..bg-dark
: Ceci définit la couleur sur la couleur sombre..bg-white
: Ceci définit la couleur sur la couleur blanche..bg-transparent
: Ceci définit la barre de navigation pour qu’elle soit transparente..fixed-top
fixe la barre de navigation en haut :<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
.fixed-bottom
pour que la barre de navigation reste en bas de la page :<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>