Barre de navigation d'amorçage
Barres de navigation
Une barre de navigation est un en-tête de navigation placé en haut de la page :
Avec Bootstrap, une barre de navigation peut s'étendre ou se réduire, selon la taille de l'écran.
Une barre de navigation standard est créée avec <nav class="navbar navbar-default">.
L'exemple suivant montre comment ajouter une barre de navigation en haut de la page :
Exemple
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</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>
...
Remarque : Tous les exemples de cette page afficheront une barre de navigation qui prend trop de place sur les petits écrans (cependant, la barre de navigation sera sur une seule ligne sur les grands écrans - car Bootstrap est réactif). Ce problème (avec les petits écrans) sera résolu dans le dernier exemple de cette page.
Barre de navigation inversée
Si vous n'aimez pas le style de la barre de navigation par défaut, Bootstrap propose une barre de navigation noire alternative :
Changez simplement la .navbar-defaultclasse en .navbar-inverse:
Exemple
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</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>
Barre de navigation avec liste déroulante
Les barres de navigation peuvent également contenir des menus déroulants.
L'exemple suivant ajoute un menu déroulant pour le bouton "Page 1" :
Exemple
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</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>
Barre de navigation alignée à droite
La .navbar-rightclasse est utilisée pour aligner à droite les boutons de la barre de navigation.
Dans l'exemple suivant, nous insérons un bouton "S'inscrire" et un bouton "Connexion" à droite dans la barre de navigation. Nous ajoutons également un glyphicon sur chacun des deux nouveaux boutons :
Exemple
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</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>
Boutons de la barre de navigation
Pour ajouter des boutons dans la barre de navigation, ajoutez la .navbar-btnclasse sur un bouton Bootstrap :
Exemple
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Formulaires de la barre de navigation
Pour ajouter des éléments de formulaire dans la barre de navigation, ajoutez la .navbar-formclasse à un élément de formulaire et ajoutez une ou plusieurs entrées. Notez que nous avons ajouté une .form-groupclasse au conteneur div contenant l'entrée. Cela ajoute un rembourrage approprié si vous avez plus d'une entrée (vous en apprendrez plus à ce sujet dans le chapitre Formulaires).
Exemple
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
Vous pouvez également utiliser les classes .input-groupet .input-group-addonpour joindre une icône ou un texte d'aide à côté du champ de saisie. Vous en apprendrez plus sur ces classes dans le chapitre Bootstrap Inputs.
Exemple
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Texte de la barre de navigation
Utilisez la .navbar-textclasse pour aligner verticalement tous les éléments à l'intérieur de la barre de navigation qui ne sont pas des liens (garantit un rembourrage et une couleur de texte appropriés).
Exemple
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
Barre de navigation fixe
La barre de navigation peut également être fixée en haut ou en bas de la page.
Une barre de navigation fixe reste visible dans une position fixe (en haut ou en bas) indépendamment du défilement de la page.
La .navbar-fixed-topclasse fixe la barre de navigation en haut :
Exemple
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</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>
La .navbar-fixed-bottomclasse fait en sorte que la barre de navigation reste en bas :
Exemple
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</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>
Réduire la barre de navigation
La barre de navigation prend souvent trop de place sur un petit écran.
Nous devrions masquer la barre de navigation ; et ne le montrer que lorsque c'est nécessaire.
Dans l'exemple suivant, la barre de navigation est remplacée par un bouton dans le coin supérieur droit. Uniquement lorsque le bouton est cliqué, la barre de navigation s'affiche :
Exemple
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></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>
</div>
</nav>