Explication détaillée de la façon d'utiliser le composant JS Bootstrap navigation bar_javascript skills

La barre de navigation est un méta-composant réactif qui sert d'en-tête de navigation dans votre application ou votre site Web.

1. Barre de navigation par défaut

La barre de navigation est pliable (et peut être ouverte et fermée) sur les appareils mobiles, et s'agrandit horizontalement à mesure que la largeur de la fenêtre d'affichage disponible augmente
Personnaliser les seuils du mode pliage et du mode horizontal
En fonction de la longueur du contenu que vous placez sur la barre de navigation, vous devrez peut-être ajuster le seuil auquel la barre de navigation passe en mode réduit par rapport au mode horizontal. Vous pouvez répondre à vos besoins en modifiant la valeur de la variable @grid-float-breakpoint ou en ajoutant votre propre code CSS de requête multimédia.
Première étape :
La balise de navigation du conteneur la plus externe et ajoutez la classe de style nav-bar pour indiquer qu'elle appartient à la barre de navigation

<nav class="navbar navbar-default" role="navigation"> 
</nav>

Effet :

Étape 2 : Ajouter un en-tête

<nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
   <a href="#" class="navbar-brand">品牌</a> 
   </div> 
  </nav>

Il y a trois icônes de durée imbriquées dans l'étiquette du bouton. Ensuite, donnez à la classe de style de bascule de la barre de navigation et à l'attribut un effondrement (effondrement), et la cible est la cible des données lorsque vous cliquez dessus.
Lorsque la fenêtre est réduite dans une certaine mesure, l'effet de droite apparaît.

Étape 3 : Menu déroulant imbriqué, formulaire de formulaire, menu déroulant.
Code :

<h1 class="page-header">导航条</h1> 
  <nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
   <a href="#" class="navbar-brand">品牌</a> 
   </div> 
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <!--嵌套下拉菜单--> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      下拉<b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
      </ul> 
     </li> 
    </ul> 
     
    <!--嵌套表单--> 
    <form action="" class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form> 
    <!----> 
   </div> 
  </nav> 

Aperçu :

Améliorer l'accessibilité de la barre de navigation
Pour améliorer l'accessibilité, veillez à ajouter role="navigation" à chaque barre de navigation.

2. Formulaire
Placer le formulaire dans un formulaire .navbar peut fournir un bon alignement vertical et un état réduit dans une fenêtre d'affichage plus étroite. Utilisez les options d'alignement pour déterminer où il apparaît dans la barre de navigation.

Beaucoup de code est partagé en utilisant des mixins, .navbar-form et .form-inline.

Code

<form action="" class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form> 

Ajouter une étiquette à la zone de saisie
Si vous n'ajoutez pas d'étiquette au champ de saisie, les lecteurs d'écran auront des problèmes. Pour les formulaires dans la barre de navigation, vous pouvez masquer l’étiquette via la classe .sr uniquement.

3. Bouton
Code :
Connexion
Aperçu :

4. Texte
Lors de l'habillage du texte dans .navbar-text, afin d'avoir un espacement et une couleur corrects, la balise

Extrait de code :

text

distinct auquel une classe utilitaire leur est appliquée.

Ces classes sont des versions mixées de .pull-left et .pull-right, mais elles sont limitées aux requêtes multimédias, ce qui facilite la gestion du composant de la barre de navigation sur différentes tailles d'écran.

7. Fixé en haut
Ajoutez .navbar-fixed-top pour fixer la barre de navigation en haut. L'effet a disparu.
Besoin de définir un remplissage pour la balise body
Cette barre de navigation fixe couvrira d'autres contenus de la page, sauf si vous définissez un remplissage au-dessus du . Utilisez vos propres valeurs ou utilisez le code ci-dessous. Astuce : La hauteur par défaut de la barre de navigation est de 50 px.

corps { padding-top : 70px🎜> Il doit être placé après le fichier core de Bootstrap CSS. (Problème de couverture)

8. Fixé en bas Utilisez plutôt .navbar-fixed-bottom.
Besoin de définir l'intérieur (rembourrage) pour la balise body
Cette barre de navigation fixe couvrira d'autres contenus de la page, sauf si vous définissez un remplissage en bas du . Utilisez vos propres valeurs ou utilisez le code ci-dessous. Astuce : La hauteur par défaut de la barre de navigation est de 50 px.


corps { padding-bottom : 70px }

Assurez-vous de l'utiliser après avoir chargé le noyau de Bootstrap CSS.

9.Toujours au top
Créez une barre de navigation avec la page en ajoutant .navbar-static-top. Il disparaît lorsque vous faites défiler la page. Contrairement aux classes .navbar-fixed-*, vous n'avez pas besoin d'ajouter du remplissage au corps.
10. Barre de navigation inversée L'apparence de la barre de navigation peut être modifiée en ajoutant la classe .navbar-inverse.


Ce qui précède est une introduction détaillée sur la façon d'utiliser la barre de navigation Bootstrap. J'espère que cela sera utile à l'apprentissage de chacun.