Une barre de navigation est comme un en-tête de navigation placé en haut de la page. Vous pouvez le réduire ou l’étendre en fonction de la taille de l’écran.
Vous pouvez créer une barre de navigation standard en haut de la page avec <nav class = "navbar navbar-default">
Voir cet exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">SiteWeb</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Exemple basique de br de navigation</h3>
<p>Une barre de navigation est un en-tête de navigation placé en haut de la page.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Bootstrap barre de navigation inversée
La barre de navigation inversée fournit une barre de navigation noire . Il peut être utilisé pour styler la barre de navigation par défaut en remplaçant la classe .navbar-default par la classe .navbar-inverse.
Voir cet exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">SiteWeb</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Inverted Navbar</h3>
<p>Une barre de navigation inversée est noire au lieu de gris.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Barre de navigation Bootstrap avec menu déroulant
Vous pouvez également ajouter un menu déroulant avec des barres de navigation. L’exemple suivant ajoute un menu déroulant pour le bouton « page 1 ».
Voir cet exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">SiteWeb</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accueil</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Navbar avec menu déroulant</h3>
<p>Cet exemple ajoute un menu déroulant pour le bouton "Page 1" dans la barre de navigation.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Bootstrap Barre de navigation alignée à droite
Utilisez la classe .navbar-right pour aligner à droite les boutons de la barre de navigation. Dans l’exemple suivant, nous ajoutons les boutons « Inscription » et « Connexion » à droite dans la barre de navigation.
Voir cet exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Tutoriels.com</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accueil</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Barre de navigation alignée à droite</h3>
<p>La classe .navbar-right est utilisée pour aligner à droite les boutons de la barre de navigation.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Bootstrap navbar de base
Dans Bootstrap 4, vous pouvez agrandir ou réduire une barre de navigation en fonction de la taille de l’écran. Une barre de navigation standard est créée avec la classe .navbar, suivie d’une classe de réduction sensible: .navbar-expand-xl | lg | md | sm (empile la barre de navigation verticalement sur des écrans très grands, grands, moyens ou petits).
Pour ajouter des liens dans la barre de navigation, utilisez un élément <ul> avec class = "navbar-nav"
. Ajoutez ensuite des éléments <li> avec une classe .nav-item suivie d’un élément <a> avec une classe .nav-link.
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Exemple de base d’un bar de navigation</h3>
<p>Une barre de navigation est un en-tête de navigation placé en haut de la page.</p>
</div>
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Lien 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien 3</a>
</li>
</ul>
</nav>
<br>
</body>
</html>
Résultat :
Barre de navigation verticale
Si vous souhaitez créer une barre de navigation verticale, supprimez la classe .navbar-expand-xl | lg | md | sm.
Exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Exemple Navbar Verticale</h3>
<p>Une barre de navigation est un en-tête de navigation placé en haut de la page.</p>
</div>
<nav class="navbar bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Lien 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien 3</a>
</li>
</ul>
</nav>
<br>
</body>
</html>
Résultat :
Barre de navigation colorée
Vous pouvez utiliser n’importe laquelle des classes .bg-color pour modifier la couleur d’arrière-plan de la barre de navigation (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark et .bg-light).
Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Exemple de navbar coloré</h3>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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" href="#">Disabled</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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" href="#">Disabled</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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" href="#">Disabled</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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" href="#">Disabled</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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" href="#">Disabled</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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" href="#">Disabled</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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" href="#">Disabled</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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" href="#">Disabled</a>
</li>
</ul>
</nav>
</body>
</html>
Résultat :
Formulaires et boutons dans le Navbar
L’élément <form> avec class = "form-inline"
est utilisé pour regrouper les entrées et les boutons côte à côte.
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control" type="text" placeholder="Chercher">
<button class="btn btn-success" type="submit">Chercher</button>
</form>
</nav>
<br>
<div class="container">
<h3>Navbar Formulaire</h3>
<p>Utilisez la classe .form-inline pour aligner les éléments de formulaire côte à côte dans la barre de navigation.</p>
</div>
</body>
</html>
Résultat :
Vous pouvez également utiliser un champ de texte, telles que .input-group-addon .
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="nom d'utilisateur">
</div>
</form>
</nav>
<br>
<div class="container">
<h3>Navbar Formulaire</h3>
<p>Utilisez la classe .form-inline pour aligner les éléments de formulaire côte à côte dans la barre de navigation.</p>
</div>
</body>
</html>
Résultat :
Navbar fixé
Une barre de navigation reste fixe en haut de la page lorsque vous la faites défiler. Vous pouvez voir l’effet en faisant défiler cette page.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">
<div class="container-fluid">
<br>
<h3>Navbar fixé en tete de page</h3>
<p>Vous pouvez voir l'effet en faisant défiler cette page.</p>
<p><strong>Note:</strong> Cette installation ne fonctionne pas dans IE11 et les versions antérieures. </p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
</ul>
</nav>
<div class="container-fluid"><br>
<p>Exemple de text. Exemple de text.Exemple de text.Exemple de text.Exemple de text.Exemple de text.Exemple de text.Exemple de text.</p>
<p>Exemple de text. Exemple de text.Exemple de text.Exemple de text.Exemple de text.Exemple de text.Exemple de text.Exemple de text.</p><p>Exemple de text. Exemple de text.Exemple de text.Exemple de text.Exemple de text.Exemple de text.Exemple de text.Exemple de text.</p>
</div>
</body>
</html>
Résultat :
