Bootstrap Navbar

La navbar est une excellente fonctionnalité et une caractéristique importante des sites Bootstrap. La navbar sert de composant de base adaptatif pour les en-têtes de navigation de votre application ou site web. La navbar est réduite dans la vue mobile, et à mesure que la largeur de fenêtre d'affichage disponible augmente, la navbar s'étend également horizontalement. Au cœur de la navbar Bootstrap, la navbar inclut le nom du site et les styles de définition de navigation de base.

Navbar par défaut

Les étapes pour créer une navbar par défaut sont les suivantes :

  • Ajoutez une classe à la balise <nav>.navbar、.navbar-default。
  • Ajoutez à l'élément ci-dessusrole="navigation", ce qui aide à améliorer l'accessibilité.
  • Ajoutez une classe de titre à l'élément <div>.navbar-header, qui contient une classenavbar-brandde l'élément <a>. Cela rendra le texte plus grand d'une taille.
  • Pour ajouter des liens à la barre de navigation, ajoutez simplement une liste non ordonnée avec la classe.nav、.navbar-nav.

L'exemple suivant le démontre :

Exemple

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Exemple</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="#">Lien séparé</a></li> <li class="divider"></li> <li><a href="#">Un autre lien séparé</a></li> </ul> </li> </ul> </div> </div> </nav>

Essayez-le »

Le résultat est le suivant :

Barre de navigation responsive

Pour ajouter des fonctionnalités responsive à la barre de navigation, le contenu que vous souhaitez replier doit être enveloppé dans un <div> avec la classe.collapse、.navbar-collapse. La barre de navigation repliée est en fait un bouton avec la classe.navbar-toggleet deux attributs data-. Le premier estdata-toggle, qui est utilisé pour indiquer à JavaScript quoi faire avec le bouton, et le second estdata-target, indiquant vers quel élément basculer. Trois éléments avec la classe.icon-bardu <span> créent le bouton hamburger. Ceux-ci basculeront vers le.nav-collapseélément <div>. Pour obtenir ces fonctionnalités, vous devez inclure leplugin Bootstrap Collapse。

L'exemple suivant le démontre :

Exemple

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">Basculer la navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Exemple</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="#">Lien séparé</a></li> <li class="divider"></li> <li><a href="#">Un autre lien séparé</a></li> </ul> </li> </ul> </div> </div> </nav>

Essayez-le »

Le résultat est le suivant :

响应式的导航栏

Formulaires dans la barre de navigation

Les formulaires dans la barre de navigation n'utilisent pas lesFormulaires Bootstrapclasses par défaut mentionnées dans le chapitre ; à la place, ils utilisent la classe.navbar-form. Cela garantit un alignement vertical approprié du formulaire et un comportement replié dans les viewports plus étroits. Utilisez les options d'alignement (qui seront détaillées dans la section Alignement des composants) pour déterminer où le contenu de la barre de navigation est placé.

L'exemple suivant le démontre :

Exemple

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Exemple</a> </div> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Rechercher"> </div> <button type="submit" class="btn btn-default">Envoyer</button> </form> </div> </nav>

Essayez-le »

Le résultat est le suivant :

导航栏中的表单

Boutons dans la barre de navigation

Vous pouvez utiliser la classe.navbar-btnpour ajouter des boutons à un élément <button> qui n'est pas dans un <form>, et le bouton sera centré verticalement sur la barre de navigation..navbar-btnIl peut être utilisé sur les éléments <a> et <input>.

N'utilisez pas.navbar-navsur les éléments <a> à l'intérieur de.navbar-btn, car ce n'est pas uneclasse de bouton standard。

L'exemple suivant le démontre :

Exemple

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Exemple</a> </div> <div> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Rechercher"> </div> <button type="submit" class="btn btn-default">Bouton d'envoi</button> </form> <button type="button" class="btn btn-default navbar-btn">Bouton de barre de navigation</button> </div> </div> </nav>

Essayez-le »

Le résultat est le suivant :

导航栏中的按钮

Texte dans la barre de navigation

Si vous devez inclure des chaînes de texte dans la navigation, utilisez la classe.navbar-text. Elle est généralement utilisée avec la balise <p> pour garantir un interlignage et une couleur appropriés. L'exemple suivant le démontre :

Exemple

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Exemple</a> </div> <div> <p class="navbar-text">Exemple de connexion utilisateur</p> </div> </div> </nav>

Essayez-le vous-même »

Le résultat est le suivant :

导航栏中的文本

Liens de la barre de navigation avec icônes

Si vous souhaitez utiliser des icônes dans les composants de navigation standard de la barre de navigation, utilisez la classeglyphicon glyphicon-*pour définir les icônes. Pour plus d'informations, consultezBootstrap Icons, comme le montre l'exemple suivant :

Exemple

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Exemple</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span>S'inscrire</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Connexion</a></li> </ul> </div> </nav>

Essayez-le vous-même »

Le résultat est le suivant :

结合图标的导航链接

Alignement des composants

Vous pouvez utiliser les classes utilitaires.navbar-leftou.navbar-rightpour aligner lesliens de navigation, formulaires, boutons ou texte de la barre de navigationvers la gauche ou la droite. Ces deux classes ajoutent un flottement CSS dans la direction spécifiée. L'exemple suivant le démontre :

Exemple

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Exemple</a> </div> <div> <!--Aligner à gauche--> <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="#">Lien séparé</a></li> <li class="divider"></li> <li><a href="#">Un autre lien séparé</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default">Bouton d'envoi aligné à gauche</button> </form> <p class="navbar-text navbar-left">Texte aligné à gauche</p> <!--Aligner à droite--> <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="#">Lien séparé</a></li> <li class="divider"></li> <li><a href="#">Un autre lien séparé</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default">Bouton d'envoi aligné à droite</button> </form> <p class="navbar-text navbar-right">Texte aligné à droite</p> </div> </div> </nav>

Essayez-le vous-même »

Le résultat est le suivant :

组件对齐方式

Fixé en haut

La barre de navigation Bootstrap peut être positionnée dynamiquement. Par défaut, c'est un élément de niveau bloc positionné en fonction de l'endroit où il est placé dans le HTML. Avec quelques classes utilitaires, vous pouvez la placer en haut ou en bas de la page, ou en faire une barre de navigation statique qui défile avec la page.

Si vous voulez fixer la barre de navigation en haut de la page,à la classe .navbar,ajoutez la classe.navbar-fixed-top. L'exemple suivant le démontre :

Pour éviter que la barre de navigation ne chevauche le haut d'autres contenus dans le corps de la page, ajoutez au moins 50 pixels de padding à la balise <body>. La valeur de padding peut être définie selon vos besoins.

Exemple

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Exemple</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="#">Lien séparé</a></li> <li class="divider"></li> <li><a href="#">Un autre lien séparé</a></li> </ul> </li> </ul> </div> </div> </nav>

Essayez-le vous-même »

Le résultat est le suivant :

固定到顶部

Fixé en bas

Si vous voulez fixer la barre de navigation en bas de la page,à la classe .navbar,ajoutez la classe.navbar-fixed-bottom. L'exemple suivant le démontre :

Exemple

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Exemple</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="#">Lien séparé</a></li> <li class="divider"></li> <li><a href="#">Un autre lien séparé</a></li> </ul> </li> </ul> </div> </div> </nav>

Essayez-le vous-même »

Le résultat est le suivant :

固定到底部

Statique en haut

Pour créer une barre de navigation qui défile avec la page, ajoutez la.navbar-static-topclasse. Cette classe ne nécessite pas d'ajouter du padding à la balise <body>.

Exemple

<nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Exemple</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="#">Lien séparé</a></li> <li class="divider"></li> <li><a href="#">Un autre lien séparé</a></li> </ul> </li> </ul> </div> </div> </nav>

Essayez-le vous-même »

Le résultat est le suivant :

Barre de navigation inversée

Pour créer une barre de navigation inversée avec un fond noir et un texte blanc, ajoutez simplement la classe.navbar-inverseà la classe.navbar, comme le montre l'exemple suivant :

Pour éviter que la barre de navigation ne chevauche le haut d'autres contenus dans le corps de la page, ajoutez au moins 50 pixels de padding à la balise <body>. La valeur de padding peut être définie selon vos besoins.

Exemple

<nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Exemple</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="#">Lien séparé</a></li> <li class="divider"></li> <li><a href="#">Un autre lien séparé</a></li> </ul> </li> </ul> </div> </div> </nav>

Essayez-le vous-même »

Le résultat est le suivant :

反色的导航栏
Autres extensions