La barre de navigation est une bonne fonctionnalité et est une fonctionnalité proéminente du site Web de bootstrap. La barre de navigation est un composant Meta réactif qui sert de titre de navigation pour une application ou un site Web. La barre de navigation est effondrée dans la vue de l'appareil mobile et la barre de navigation se développe horizontalement à mesure que la largeur de la fenêtre disponible augmente. Dans le cœur de la barre de navigation bootstrap, la barre de navigation comprend la définition des styles pour les noms de sites et la navigation de base.
Les étapes pour créer une barre de navigation par défaut sont les suivantes:
Pour ajouter des liens à la barre de navigation, ajoutez simplement une liste non ordonnée avec la classe .nav, .navbar-nav.
Les exemples suivants partageront avec vous la barre de navigation fabriquée à l'aide de Bootstrap3. Le contenu spécifique est le suivant
Par exemple
Alors comment écrire un composant aussi pratique
Utilisez Bootstrap3!
Dites-nous directement
De manière générale, la navigation est placée dans la structure suivante
<nav role = "Navigation"> <div> <div> <a href = "#"> <img src = "..."> </a> </div> </div> </ nav>
1. Tags de navigation
Dans la première classe, le Navbar est nécessaire. D'autres propriétés sont facultatives.
L'ajout de Navbar-Default crée la navigation la plus basique, et elle ne sera pas fixée lorsque la couleur est transparente.
Ajoutez la couleur de la classe Navbar-inverse pour devenir noir
Ajouter le top fixé par Navbar pour corriger en haut, ajoutez le bassin de Navbar fixé pour réparer en bas
L'effet de l'ajout de Navbar-statique est le suivant
<div>
En-tête de navigation, par exemple, le journal du site Web, cliquez sur la page d'accueil ou le nom du site Web
L'effet est comme ci-dessus
Je pense que l'effet sera meilleur si je peux le changer en texte ici
2. Formulaire
L'ajout de formulaires dans la navigation, tels que la recherche, la connexion, etc.
Par exemple, ma recherche ci-dessus
<form role = "search"> <div> <input type = "text" placeholder = "search"> </ div> <bouton type = "soume"> search </utton> </ form>
Expliquez que la classe Navbar-Left positionnera ce formulaire à gauche
Bien sûr, il y a aussi une classe Navbar-droite
De même, le bouton peut être ajouté comme celui-ci
<Button Type = "Button"> Connectez-vous </ftones>
Le texte peut être ajouté comme celui-ci
<p> a signé comme Mark Otto </p>
Le lien peut être ajouté comme celui-ci
<p> Signé comme <a href = "#"> Mark Otto </a> </p>
Et de cette manière, vous pouvez ajouter des classes Navbar-Right ou Navbar-Left
Ma navigation
<! - Navigation -> <div> <div id = "navContainer"> <nav role = "navigation"> <div> <v> <a href = "#"> Xiansheng bibliothèque </a> </ div> <form rôle = "search"> <div> <entrée = "Text" Placeholder = "Search"> </ Div> <Button type = "soumi"> Rechercher <li> <a data-toggle = "modal" data-target = "# registre"> registre </a> </li> <li> <a data-toggle = "modal" data-target = "# Signin"> Login </a> </li> </ul> </div> </ div> </vin> </Av> </v> </v> </v> </v> </v> </v> </div> </div>
L'effet est le suivant
Pour plus de contenu, vous pouvez vous référer à l'article pour apprendre:
Bootstrap implémente l'effet de la barre de navigation par défaut
Bootstrap doit apprendre tous les jours (ii)
Bootstrap doit apprendre tous les jours du plugin de navigation supplémentaire (APPIX)
Plus de contenu sur Bootstrap peut également être trouvé dans des sujets spéciaux: "Bootstrap Learning Tutorial"
Ce qui précède est la barre de navigation fabriquée à l'aide de bootstrap3. J'espère que cela sera utile à l'apprentissage de tous et à faire votre propre barre de navigation