Les barres de navigation sont des méta-composants réactifs qui agissent comme des en-têtes de navigation dans votre application ou votre site Web.
1. Bar de navigation par défaut
La barre de navigation peut être pliée (et peut être activée et désactivée) sur l'appareil mobile et devient le mode élargi horizontalement à mesure que la largeur de la fenêtre disponible augmente
Personnalisez les seuils pour les modes de pliage et les modes horizontaux
Selon la longueur de ce que vous mettez sur la barre de navigation, vous devez peut-être ajuster le seuil pour que la barre de navigation entre en mode pliage et mode horizontal. Vous pouvez répondre à vos besoins en modifiant la valeur de la variable @ grid-float-briserpoint ou en ajoutant votre propre code CSS de requête multimédia.
premier pas:
La balise de navigation de conteneur la plus externe et ajoutez une classe de style Nav-Bar pour indiquer qu'elle appartient à la barre de navigation
<nav role = "Navigation"> </ Nav>
Effet:
Étape 2 : Ajouter l'en-tête
<Nav Role = "Navigation"> <div> <Button Type = "Button" Data-Toggle = "Collapse" Data-Target = "# BS-Example-Navbar-Collapse-1"> <span> Toggle Navigation </span> <span> </span> <span> </span> <span> </span> <pan> </span> </sponse> <a href = "# # #> brand </a>
L'étiquette de bouton est imbriquée avec trois icônes de portée. Ensuite, donnez à la classe de style Navbar-Toggle et à l'attribut effondrement (effondrement), et la cible est cible des données lors du clic.
Lorsque la fenêtre se rétrécit dans une certaine mesure, l'effet à droite apparaît.
Étape 3: menu déroulant imbriqué, formulaire de formulaire, menu déroulant.
Code:
<h1> barre de navigation </h1> <nav role = "navigation"> <v> <bouton type = "Button" data-toggle = "effondrement" data-target = "# bs-example-navar-collapse-1"> <span> Toggle Navigation </span> <span> </ span> <pan> </span> <span> </pan> <pan> </pan> </pantin> <a href="#">Brand</a> </div> <div id="bs-example-navbar-collapse-1"> <!--Nested drop-down menu--> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li> <a href = "#" Data-Toggle = "Dropdown"> Pulldown <b> </b> </a> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> Action </a> href = "#"> Action </a> </li> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> Action </a> </li> </li> </li> </ul> <! - Forms nés -> <formulaire) type = "Button"> Soumettre </ Button> </ Form> <! -----> </div> </ Nav>
Aperçu:
Améliorer l'accessibilité des barres de navigation
Pour améliorer l'accessibilité, assurez-vous d'ajouter un rôle = "navigation" à chaque barre de navigation.
2. Formulaire
Placer la forme dans la forme .navbar donne un bon alignement vertical et un état effondré dans une fenêtre plus étroite. Utilisez l'option d'alignement pour déterminer où il apparaît sur la barre de navigation.
Beaucoup de code est partagé en utilisant Mixin, .Navbar-forme et .form-inline.
Code
<form action = "" role = "search"> <div> <input type = "text" /> </ div> <bouton type = "Button"> soumettre </button> </ form>
Ajouter l'étiquette d'étiquette dans la zone d'entrée
Si vous n'ajoutez pas de balises d'étiquette à la zone d'entrée, le lecteur d'écran aura des problèmes. Pour les formulaires dans la barre de navigation, vous pouvez masquer la balise d'étiquette via une classe .sr uniquement.
3. Boutons
Code:
<Button Type = "Button"> Connexion </ftones>
Aperçu:
4. Texte
Lors de l'emballage du texte dans .navbar-text, la balise <p> est généralement utilisée pour l'espacement et la couleur des lignes correctes.
Extrait de code:
<p> texte </p>
5. Liens de non-navette
Peut-être que vous souhaitez ajouter des liens standard en dehors des composants de navigation standard, alors l'utilisation de la classe .navbar-link peut donner au lien la bonne par défaut et la couleur inverse.
Extrait de code:
Copiez le code comme suit: <p> Ceci est le <a href = "#"> lien </a> </p>
6. Alignement des composants
Utilisez la classe d'outils .navbar-left ou .navbar-droite pour aligner les liens de navigation, les formulaires, les boutons ou le texte. Les deux classes utilisent des styles flottants CSS dans des directions spécifiques. Par exemple, pour aligner les liens de navigation, vous devez les placer dans une classe d'outils distincte <ul>.
Ces classes sont des versions de mélange de .Pull-left et .Pull-droite, mais elles sont limitées aux requêtes multimédias, ce qui facilite la gestion des composants de la barre de navigation sur les écrans de différentes tailles.
7. Correction sur le dessus
L'ajout de toit à fixation. Navbar permet à la barre de navigation d'être corrigé en haut. L'effet ne suffit pas.
Besoin de régler le rembourrage pour les étiquettes corporelles
Cette barre de navigation fixe obscurciera d'autres contenus sur la page, sauf si vous définissez le rembourrage au-dessus de <body>. Utilisez votre propre valeur ou utilisez le code ci-dessous. CONSEIL: La hauteur par défaut de la barre de navigation est de 50px.
corps {padding-top: 70px; }
Il doit être placé après le fichier central de Bootstrap CSS. (Problèmes de couverture)
8. Fixé en bas
Utilisez à la place. Navbar-Fixed-Bottom.
Besoin de définir interne (rembourrage) pour les étiquettes corporelles
Cette barre de navigation fixe obscurciera d'autres contenus sur la page, sauf si vous définissez le rembourrage en bas de <body>. Utilisez votre propre valeur ou utilisez le code ci-dessous. CONSEIL: La hauteur par défaut de la barre de navigation est de 50px.
corps {padding-boot: 70px; }
Assurez-vous de l'utiliser après le chargement du cœur de Bootstrap CSS.
9. Restez au sommet
Créez une barre de navigation avec la page en ajoutant .navbar-static-top. Il disparaît lorsque la page défile vers le bas. Contrairement à la classe .navbar-fixed- *, vous n'avez pas besoin d'ajouter un rembourrage au corps.
10. barre de navigation en couleur inverse
L'apparence de la barre de navigation peut être modifiée en ajoutant la classe .Navbar-inverse.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est une introduction détaillée à la façon d'utiliser la barre de navigation bootstrap. J'espère que cela sera utile à l'apprentissage de tous.