Bootstrap - Barre de navigation
La barre de navigation est l'une des principales fonctionnalités des sites Bootstrap. Les navbars sont des composants «méta» réactifs qui servent d'en-têtes de navigation pour votre application ou votre site. Les barres de navigation se réduisent dans les vues mobiles et deviennent horizontales à mesure que la largeur de la fenêtre disponible augmente. À la base, la barre de navigation comprend le style des noms de site et la navigation de base.
Barre de navigation par défaut
Pour créer une barre de navigation par défaut -
Ajouter les classes .navbar, .navbar-default à la balise <nav>.
Ajouter role = "navigation" à l'élément ci-dessus, pour faciliter l'accessibilité.
Ajouter une classe d'en-tête .navbar-headerà l'élément <div>. Inclure un élément <a> avec la classenavbar-brand. Cela donnera au texte une taille légèrement plus grande.
Pour ajouter des liens à la barre de navigation, ajoutez simplement une liste non ordonnée avec les classes de .nav, .navbar-nav.
L'exemple suivant illustre ceci -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Barre de navigation réactive
Pour ajouter des fonctionnalités réactives à la barre de navigation, le contenu que vous souhaitez réduire doit être enveloppé dans un <div> avec des classes .collapse, .navbar-collapse. La nature de l'effondrement est déclenchée par un bouton qui a la classe de.navbar-toggleet comporte ensuite deux éléments de données. La première,data-toggle, est utilisé pour indiquer au JavaScript quoi faire avec le bouton, et le second, data-target, indique quel élément basculer. ensuite
L'exemple suivant illustre ceci -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Formulaires dans la barre de navigation
Au lieu d'utiliser les formulaires basés sur les classes par défaut de Chapter Bootstrap Forms , formulaires qui se trouvent dans la barre de navigation, utilisez le.navbar-formclasse. Cela garantit l'alignement vertical correct du formulaire et le comportement réduit dans les fenêtres étroites. Utilisez les options d'alignement (expliquées dans la section Alignement des composants) pour décider de leur emplacement dans le contenu de la barre de navigation.
L'exemple suivant illustre ceci -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<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>Boutons dans la barre de navigation
Vous pouvez ajouter des boutons en utilisant la classe .navbar-btn aux éléments <button> ne résidant pas dans un <form> pour les centrer verticalement dans la barre de navigation. .navbar-btn peut être utilisé sur les éléments <a> et <input>.
Ne pas utiliser .navbar-btnni les classes de boutons standard sur les éléments <a> dans .navbar-nav.
L'exemple suivant illustre ceci -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit Button</button>
</form>
<button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
</div>
</nav>Texte dans la barre de navigation
Pour envelopper des chaînes de texte dans un élément, utilisez la classe .navbar-text. Ceci est généralement utilisé avec la balise <p> pour un interligne et une couleur appropriés. L'exemple suivant illustre ceci -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text">Signed in as Thomas</p>
</div>
</nav>Liens non-nav
Si vous souhaitez utiliser les liens standard qui ne figurent pas dans le composant de navigation normal de la barre de navigation, utilisez la classe navbar-link pour ajouter des couleurs appropriées pour les options par défaut et inverse de la barre de navigation, comme indiqué dans l'exemple suivant -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text navbar-right">
Signed in as
<a href = "#" class = "navbar-link">Thomas</a>
</p>
</div>
</nav>Alignement des composants
Vous pouvez aligner les composants tels que les liens de navigation, les formulaires, les boutons ou le texte à gauche ou à droite dans une barre de navigation à l'aide des classes utilitaires.navbar-left ou .navbar-right. Les deux classes ajouteront un flottant CSS dans la direction spécifiée. L'exemple suivant illustre ceci -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<!--Left Align-->
<ul class = "nav navbar-nav navbar-left">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-left" role = "search">
<button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
</form>
<p class = "navbar-text navbar-left">Left align-Text</p>
<!--Right Align-->
<ul class = "nav navbar-nav navbar-right">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-right" role = "search">
<button type = "submit" class = "btn btn-default">
Right align-Submit Button
</button>
</form>
<p class = "navbar-text navbar-right">Right align-Text</p>
</div>
</nav>Fixé en haut
La barre de navigation Bootstrap peut être dynamique dans son positionnement. Par défaut, il s'agit d'un élément de niveau bloc qui prend son positionnement en fonction de son placement dans le HTML. Avec quelques classes d'assistance, vous pouvez le placer en haut ou en bas de la page, ou vous pouvez le faire défiler de manière statique avec la page.
Si vous voulez que la barre de navigation soit fixée en haut, ajoutez une classe .navbar-fixed-top à la .navbar class. L'exemple suivant illustre ceci -
Pour éviter que la barre de navigation ne se trouve au-dessus d'un autre contenu dans le corps de la page, ajoutez au moins 50 pixels de remplissage à la balise <body> ou essayez vos propres valeurs.
<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Fixé en bas
Si vous voulez que la barre de navigation soit fixée au bas de la page, ajoutez une classe .navbar-fixed-bottom à la .navbar class. L'exemple suivant illustre ceci -
<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class ="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Top statique
Pour créer une barre de navigation qui défile avec la page, ajoutez le .navbar-static-topclasse. Cette classe ne nécessite pas d'ajouter le remplissage au <body>.
<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Barre de navigation inversée
Pour créer une barre de navigation inversée avec un fond noir et du texte blanc, ajoutez simplement le .navbar-inverse classe à la .navbar classe comme illustré dans l'exemple suivant -
Pour éviter que la barre de navigation ne se trouve au-dessus d'un autre contenu dans le corps de la page, ajoutez au moins 50 pixels de remplissage à la balise <body> ou essayez vos propres valeurs.
<nav class = "navbar navbar-inverse" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>