Spécifie des informations supplémentaires sur un élément
Une barre de navigation est un en-tête de navigation qui est placé en haut de la page....créer les en-têtes de navigation fixes et statiques en utilisant
Une barre de navigation est un en-tête de navigation qui est placé en haut de la page
Dans ce tutoriel, vous apprendrez comment créer les en-têtes de navigation fixes et statiques en utilisant le composant navbar de Bootstrap.
Pour créer un en-tête de navigation réactive pour votre site ou application, vous devez utiliser le composant navbar de Bootstrap. Ces navbar sensible étaient au départ créés pour des dispositifs ayant de petites écrans comme les téléphones cellulaires qui se développe quand l'utilisateur clique sur le bouton Activer/désactiver. Toutefois, il auront une configuration horizontale comme d'habitude sur les dispositifs de moyennes et grandes taille d’écran comme les ordinateurs portables ou de bureau.
Plusieurs variantes de barres de navigation sot disponibles dans bootstrap que vous pouvez crées et positionnées avec beaucoup moins d'effort.
Ainsi des navbars fixe ou non avec menus déroulants ou simple sont contenues dans bootstrap.
L'exemple suivant vous montrera comment créer une barre de navigation statique simple avec les liens de navigation.
Code : HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de Navbar Static de Bootstrap 3 </title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.exemple{
margin: 10px;
}
</style>
</head>
<body>
<div class="exemple">
<nav role="navigation" class="navbar navbar-default">
<!-- Pour un affichage sur les mobiles -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Nom du site</a>
</div>
<!-- Collection de liens de navigatioon -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Espace membre</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
Pour placer un ou plusieurs éléments à droite de la barre de navigation utiliser la classe navbar -right comme nous l’avons fait pour l’élément login dans notre exemple.
Vous pouvez aussi inclure des menus déroulants et si vous le voulez un formulaire de recherche dans la navbars.
Code : HTML
<div class="barre"> <nav role="navigation" class="navbar navbar-default"> <!-- Pour un affichage sur les mobiles --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Nom du site</a> </div> <!-- Collection de liens de navigatioon --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Accueil</a></li> <li><a href="#">Profil</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Espace membre <b class="caret"></b></a> <ul role="menu" class="dropdown-menu"> <li><a href="#">Vos articles</a></li> <li><a href="#">Statistiques</a></li> <li><a href="#">Autres</a></li> <li class="divider"></li> <li><a href="#">Historique</a></li> </ul> </li> </ul> <form role="search" class="navbar-form navbar-left"> <div class="form-group"> <input type="text" placeholder="Search" class="form-control"> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Login</a></li> </ul> </div> </nav> </div>
Voici une version de l’exemple précédent avec des icones de glyphicon
Code : HTML
<nav role="navigation" class="navbar navbar-default"> <!-- Pour un affichage sur les mobiles --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Nom du site</a> </div> <!-- Collection de liens de navigatioon --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Accueil</a></li> <li><a href="#"><span class="glyphicon glyphicon-book"></span> Profil</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Espace membre <b class="caret"></b></a> <ul role="menu" class="dropdown-menu"> <li><a href="#">Vos articles</a></li> <li><a href="#">Statistiques</a></li> <li><a href="#">Autres</a></li> <li class="divider"></li> <li><a href="#">Historique</a></li> </ul> </li> </ul> <form role="search" class="navbar-form navbar-left"> <div class="form-group"> <span class="glyphicon glyphicon-search"></span> <input type="text" placeholder="chercher" class="form-control"> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-log-in"> Login</a></li> </ul> </div> </nav>
Bootstrap fournit aussi un mécanisme pour créer une barre de navigation fixé en haut ou en bas de la fenêtre donc qui ne fait pas défiler avec le contenu de la page.
Utiliser la classe .navbar-fixed-top en plus de la classe de base .navbar et .navbar-default et vous créez ainsi des navbars qui sont fixées en haut de la page.
Code : HTML
<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> <!-- les éléments de votre menu ici comme on vient de le voir ci dessus --> </nav>
De même pour créer des navbars fixés en bas ajouter la classe .navbar -fixed-bottom.
Code : HTML
<nav role="navigation" class="navbar navbar-default navbar-fixed-bottom"> <!-- les éléments de votre menu ici comme on vient de le voir ci dessus --> </nav>
Vous pouvez également créer des variate inversée de la barre de navigation « bootstrap » simplement en ajoutant la classe .navbar-inverse à la classe de base .navbar , sans aucun autre changement dans ce que nous avons vu en haut.
Code : HTML
<nav role="navigation" class="navbar navbar-inverse"> <!-- les éléments de votre menu ici comme on vient de le voir ci dessus --> </nav>
Remarque : Vous pouvez utiliser votre propre feuille de style. Dans ce cas il faut l’ajouter juste avant la balise de fermeture du head (</head>).
chapitre précédent chapitre suivant
Par carabde 02 janvier 2016