navigation Bootstrap
La barre de navigation est une fonctionnalitĂ© intĂ©ressante, est une caractĂ©ristique importante du site de Bootstrap. Bar Foundation Navigation en tant que composants de rĂ©ponse de la navigation de page en-tĂȘte dans votre application ou site. Compte tenu du dispositif de navigation mobile est pliĂ©, augmente la largeur de la fenĂȘtre d'affichage disponible de la barre de navigation horizontale. Bootstrap barre de navigation principale, la barre de navigation comprend un nom de domaine et les styles de navigation dĂ©fini de base.
La barre de navigation par défaut
Créer une barre de navigation par défaut, procédez comme suit:
- Mots - clefs ajouter .navbarde classe, .navbar par défaut à la balise <nav>.
- Ajouterrole = "navigation" pour les éléments ci - dessus, contribuer à accroßtre l' accessibilité.
- Ajouter un .navbar-tĂȘtede classe de titre Ă l'Ă©lĂ©ment <div> contient des Ă©lĂ©ments internes <a> avec classenavbar-marque. Cela fera apparaĂźtre le texte plus grand.
- Pour ajouter un lien vers la barre de navigation, il suffit d' ajouter la liste Ă puces peut avec .navde classe, .navbar-VNI.
L'exemple suivant illustre ce point:
Exemples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div>
<Ul class = "nav navbar-nav" >
<Li class = "active"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "déroulant">
<A href = "#" class = "liste déroulante-toggle" données-toggle = "déroulant"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "liste déroulante-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Report </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> isolé lien </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> un autre lien isolé </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Les résultats sont les suivants:
barre de navigation Responsive
Pour ajouter fonctionnalité de navigation réactive, vous devez plier le contenu enveloppé dans desclasses .collapse, .navbar-effondrement de la <div> dans.barre de navigation pliée est en fait un bouton .navbar-toggleclasse et deux éléments Data- avec.Le premier est le bouton-poussoir dedonnées bascule utilisé pour dire JavaScript doit faire, et le second est de données cible,indiquant à laquelle vous voulez changer l' élément. Trois avec .icon-barde classe de la <span> pour créer le soi-disant Hambourg.Ces commutateurs à .nav effondrement <div> dans.Afin d'atteindre ces fonctions, vous devez inclure Bootstrap fois (Collapse) prise .
L'exemple suivant illustre ce point:
Exemples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<Bouton type = "button" class = "navbar-toggle" données-toggle = "effondrement"
data-target = "# exemple- navbar-collapse">
<Span class = "sr-only"> Commutation de la navigation </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
</ Button>
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div class = "collapse navbar effondrement" id = "exemple-navbar-collapse ">
<Ul class = "nav navbar-nav" >
<Li class = "active"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "déroulant">
<A href = "#" class = "liste déroulante-toggle" données-toggle = "déroulant"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "liste déroulante-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Report </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> isolé lien </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> un autre lien isolé </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Les résultats sont les suivants:
Barre de navigation du formulaire
Formulaire dans la barre au lieu d'utiliser de navigation Bootstrap forment les chapitres de la classe par dĂ©faut mentionnĂ©s, il utilise.navbar-classe de formulaire.Cela garantit un alignement vertical correct et la forme dans un comportement fenĂȘtre de pliage Ă©troite. Utilisez l'option d'alignement (qui sera expliquĂ© en dĂ©tail dans la section d'alignement composant) pour dĂ©terminer le contenu de la barre de navigation est placĂ© lĂ oĂč.
L'exemple suivant illustre ce point:
Exemples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div>
<Form class = "navbar-forme navbar- gauche" role = "search">
<Div class = "form-groupe">
<entrée type = "text" class = "form-commande" espace réservé = "Recherche">
</ Div>
<Bouton type = "submit" class = "btn btn-default" > Envoyer </ button>
</ Form>
</ Div>
</ Div>
</ Nav>
Les résultats sont les suivants:
Button dans la barre de navigation
Vous pouvez utiliser laclasse .navbar-btn ajouter un bouton, le bouton est centrĂ© verticalement sur la barre de navigation pour ne pas <form> L'Ă©lĂ©ment <button>..navbar-btn peut ĂȘtre utilisĂ© sur <a> et <input> Ă©lĂ©ments.
Ne pas utiliser.navbar-btn dans .navbar-navsur l'élément <a>, car il est pas une norme Button, classe .
L'exemple suivant illustre ce point:
Exemples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div>
<Form class = "navbar-forme navbar- gauche" role = "search">
<Div class = "form-groupe">
<entrée type = "text" class = "form-commande" espace réservé = "Recherche">
</ Div>
<Bouton type = "submit" class = "btn btn-default" > bouton submit </ button>
</ Form>
<Bouton type = "button" class = "btn btn-default navbar -btn"> bouton de la barre de navigation </ button>
</ Div>
</ Div>
</ Nav>
Les résultats sont les suivants:
Texte barre de navigation
Si vous souhaitez inclure dans la navigation de chaßne de texte, utilisez laclasse .navbar texte.Ceci est souvent utilisé en conjonction avec la balise <p> pour assurer de premier plan et couleurs propres. L'exemple suivant illustre ce point:
Exemples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div>
<P class = "navbar-text"> w3big Connexion utilisateur </ p>
</ Div>
</ Div>
</ Nav>
Les résultats sont les suivants:
Combiné avec des liens icÎne de navigation
Si vous souhaitez utiliser dans une barre de navigation icÎne du composant de navigation classique, puis utilisez l'icÎne pour définir la glyphiconde classe glyphicon- *, plus s'il vous plaßt voir Bootstrap icÎne , comme le montre l'exemple suivant:
Exemples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Ul class = "nav navbar-nav navbar -droit">
<Li> <a href = "#"> <span class = "glyphicon glyphicon utilisateur" > </ span> Inscrivez </ a> </ li>
<Li> <a href = "#"> <span class = "glyphicon glyphicon-log- dans"> </ span> Connexion </ a> </ li>
</ Ul>
</ Div>
</ Nav>
Les résultats sont les suivants:
Alignement des composants
Vous pouvez utiliser le droit de .navbar gauche ou.navbar droite ou de classeutilitaire à gaucheliensalignésde navigationbarre denavigation,desformes,desboutons, ouletextede ces composants. Les deux ajouter classe CSS va flotter dans la direction indiquée. L'exemple suivant illustre ce point:
Exemples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div>
Ă
<Ul class = "nav navbar-nav navbar -left">
<Li class = "déroulant">
<A href = "#" class = "liste déroulante-toggle" données-toggle = "déroulant"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "liste déroulante-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Report </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> isolé lien </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> un autre lien isolé </ a> </ li>
</ Ul>
</ Li>
</ Ul>
<Form class = "navbar-forme navbar- gauche" role = "search">
<Bouton type = "submit" class = "btn btn-default" > Aligner Ă gauche - Soumettre Bouton </ button>
</ Form>
<P class = "navbar texte navbar- left"> Aligner Ă gauche - texte </ p>
Ă
<Ul class = "nav navbar-nav navbar -droit">
<Li class = "déroulant">
<A href = "#" class = "liste déroulante-toggle" données-toggle = "déroulant"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "liste déroulante-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Report </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> isolé lien </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> un autre lien isolé </ a> </ li>
</ Ul>
</ Li>
</ Ul>
<Form "De navbar-forme class = droit" role = "search">
<Bouton type = "submit" class = "btn btn-default" > Aligner Ă droite - Soumettre Bouton </ button>
</ Form>
<P class = "navbar texte navbar- right"> Aligner Ă droite - texte </ p>
</ Div>
</ Div>
</ Nav>
Les résultats sont les suivants:
Fixe vers le haut
barre de navigation Bootstrap peut ĂȘtre positionnĂ© de maniĂšre dynamique. Par dĂ©faut, il est un Ă©lĂ©ment de niveau bloc, qui est basĂ©e sur l'emplacement de HTML placĂ© dans le ciblage. GrĂące Ă un certain nombre de classes d'aide, vous pouvez le placer en haut ou en bas de la page, ou vous pouvez le faire en mĂȘme temps que la page de dĂ©filement barre de navigation statique.
Si vous voulez que la barre de navigation fixe en haut de la page, ajouter laclasse .navbar-fixe-top Ă .navbar classe.L'exemple suivant illustre ce point:
Afin d'Ă©viter que la barre de navigation en haut et le corps du contenu de la page avec d'autres quinconce, s'il vous plaĂźt ajouter la balise d'au moins 50 pixels de remplissage Ă la <body> (padding), la valeur du rembourrage peut ĂȘtre rĂ©glĂ© en fonction de vos besoins.
Exemples
<Nav class = "navbar navbar navbar-default -fixed-top" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div>
<Ul class = "nav navbar-nav" >
<Li class = "active"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "déroulant">
<A href = "#" class = "liste déroulante-toggle" données-toggle = "déroulant"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "liste déroulante-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Report </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> isolé lien </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> un autre lien isolé </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Les résultats sont les suivants:
Fixe dans la partie d'extrémité
Si vous voulez que la barre de navigation fixé au bas de la page, ajouter laclasse .navbar-fixe-bas pour .navbar classe.L'exemple suivant illustre ce point:
Exemples
<Nav class = "navbar navbar navbar-default -fixed-bottom" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div>
<Ul class = "nav navbar-nav" >
<Li class = "active"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "déroulant">
<A href = "#" class = "liste déroulante-toggle" données-toggle = "déroulant"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "liste déroulante-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Report </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> isolé lien </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> un autre lien isolé </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Les résultats sont les suivants:
top statique
Pour ĂȘtre en mesure de crĂ©er , ensemble avec la barre de navigation la page de dĂ©filement, ajouter.navbar-static-top classe.Cette classe ne nĂ©cessite pas le <body> ajouter padding (rembourrage).
Exemples
<Nav class = "navbar navbar navbar-default -static-top" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div>
<Ul class = "nav navbar-nav" >
<Li class = "active"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "déroulant">
<A href = "#" class = "liste déroulante-toggle" données-toggle = "déroulant"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "liste déroulante-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Report </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> isolé lien </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> un autre lien isolé </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Les résultats sont les suivants:
Inversez la barre de navigation
Pour créer un fond noir barre de navigation inversée avec du texte blanc, et ajoutez simplement.navbar-inverse classe à .navbar classe,comme le montre l'exemple suivant:
Afin d'Ă©viter que la barre de navigation en haut et le corps du contenu de la page avec d'autres quinconce, s'il vous plaĂźt ajouter la balise d'au moins 50 pixels de remplissage Ă la <body> (padding), la valeur du rembourrage peut ĂȘtre rĂ©glĂ© en fonction de vos besoins.
Exemples
<Nav class = "navbar navbar-inverse" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tĂȘte">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div>
<Ul class = "nav navbar-nav" >
<Li class = "active"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "déroulant">
<A href = "#" class = "liste déroulante-toggle" données-toggle = "déroulant"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "liste déroulante-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Report </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> isolé lien </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> un autre lien isolé </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Les résultats sont les suivants:
