Barres de navigation
Une barre de navigation est un en-tête de navigation qui est placé en haut de la page:
Avec Bootstrap , une barre de navigation peut étendre ou réduire, en fonction de la taille de l' écran.
Une barre de navigation standard est créé avec <nav class="navbar navbar-default"> .
L'exemple suivant montre comment ajouter une barre de navigation en haut de la page:
Exemple
<body>
<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>
...
Essayez - le vous - même » Tous les exemples sur cette page affiche 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 - parce Bootstrap est sensible). Ce problème (avec les petits écrans) sera résolu dans le dernier exemple sur cette page.
Inverted Barre de navigation
Si vous n'aimez pas le style de la barre de navigation par défaut, Bootstrap offre une alternative, navbar noir:
Il suffit de changer le .navbar-default classe 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>
Essayez - le vous - même » Barre de navigation fixe
La barre de navigation peut également être fixé 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épendante de la page scroll.
Le .navbar-fixed-top classe rend la barre de navigation fixe au sommet:
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> Essayez - le vous - même » Le .navbar-fixed-bottom classe rend la barre de navigation séjour au fond:
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> Essayez - le vous - même » Barre de navigation Avec Dropdown
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> Essayez - le vous - même » Aligné à droite Barre de navigation
La .navbar-right classe est utilisée à droite-align boutons de la barre de navigation.
Dans l'exemple suivant, nous insérons un bouton "Sign Up" et un bouton "Connexion" à droite dans la barre de navigation. Nous ajoutons aussi 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>
<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> Essayez - le vous - même » Collapsing La barre de navigation
La barre de navigation prend trop de place sur un petit écran.
Nous devons cacher la barre de navigation; et seulement montrer quand il est nécessaire.
Dans l'exemple suivant la barre de navigation est remplacé par un bouton dans le coin supérieur droit. Seulement lorsque le bouton est cliqué, la barre de navigation sera affiché:
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> Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»