À propos de l'utilisation de la barre de navigation Bootstrap du composant JS

Cet article présente principalement en détail comment utiliser la barre de navigation Bootstrap du composant JS. Les amis intéressés peuvent s'y référer

La barre de navigation est utilisée comme en-tête de navigation dans votre application ou site Web Méta-composant réactif.

1. La barre de navigation par défaut

La barre de navigation peut être pliée (et peut être ouverte ou fermée) sur les appareils mobiles et se trouve dans les limites disponibles. Lors de l'augmentation de la largeur de la fenêtre, elle passe en mode d'expansion horizontale
Personnalisez le seuil du mode réduit et du mode horizontal
En fonction de la longueur du contenu que vous placez sur le barre de navigation, vous devrez peut-être l'ajuster. Le seuil permettant à la barre de navigation d'accéder aux modes réduit et 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 :
Ajoutez la classe de style nav-bar à la balise de navigation du conteneur la plus externe, indiquant qu'elle appartient à la barre de navigation

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

Effet :

Deuxième étape : Ajouter un en-tête

<nav class="navbar navbar-default" role="navigation"> 
  <p 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> 
  </p> 
 </nav>

Il y a trois icônes d'étendue 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, menu déroulant.
Code :

<h1 class="page-header">导航条</h1> 
 <nav class="navbar navbar-default" role="navigation"> 
  <p 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> 
  </p> 
  <p 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"> 
   <p class="form-group"> 
   <input type="text" class="form-control" /> 
   </p> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form> 
  <!----> 
  </p> 
 </nav>

Aperçu :

Barre de navigation améliorée Accessibilité
Pour améliorer l'accessibilité, veillez à ajouter role="navigation" à chaque barre de navigation.

2. Formulaire
Placer le formulaire dans .navbar-form peut présenter un bon alignement vertical et présenter 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"> 
   <p class="form-group"> 
   <input type="text" class="form-control" /> 
   </p> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form>

Ajouter une étiquette d'étiquette à la zone de saisie
Si vous ne pas avoir d'étiquette pour la zone de saisie Les lecteurs d'écran rencontreront des problèmes lors de l'ajout d'une étiquette à la zone de saisie. Pour les formulaires dans la barre de navigation, vous pouvez masquer l’étiquette via la classe .sr uniquement.

3. Bouton
Code :

<button type="button" class="btn btn-default navbar-btn">登陆</button>

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 :

<p class="navbar-text">文本</p>

5. Liens non liés à la navigation
Vous souhaitez peut-être ajouter des liens standard en plus des composants de navigation standard, puis utilisez La classe .navbar-link permet aux liens d'avoir la couleur par défaut et la couleur inverse correctes.
Extrait de code :

<p class="navbar-text navbar-right">这个是<a href="#" class="navbar-link">链接</a></p>

6. Alignement des composants
Utilisez la classe d'outils .navbar-left ou .navbar-right 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, placez-les dans un fichier

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. Corrigé en haut
Ajoutez .navbar-fixed-top pour fixer la barre de navigation en haut. L'effet a disparu.
Vous devez 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.

body { padding-top: 70px; }

Copier après la connexion

doit être placé après le fichier core de Bootstrap CSS. (Problème de couverture)
8. Corrigé en bas
Remplacer par .navbar-fixed-bottom.
Vous devez 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 en bas de . 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.


body { padding-bottom: 70px; }

Copier après la connexion

一定要在加载Bootstrap CSS的核心后使用它。
9、静止在顶部
通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，你不用给body添加padding。
10、反色的导航条
通过添加.navbar-inverse类可以改变导航条的外观。


以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于jQuery插件Validate实现自定义校验结果样式的代码


手机端实现Bootstrap图片轮播的效果


bootstrap时间控件daterangepicker的使用方法


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!