recherche

Maison >interface Web >js tutoriel >Comment faire fonctionner chaque élément de la barre de navigation Bootstrap (formulaire, bouton, texte)_compétences javascript

Comment faire fonctionner chaque élément de la barre de navigation Bootstrap (formulaire, bouton, texte)_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:22:581540parcourir

Cet article comprend principalement trois aspects majeurs, veuillez l'étudier attentivement.

1. Formulaire dans la barre de navigation
Le formulaire dans la barre de navigation n'utilise pas la classe par défaut mentionnée dans le chapitre sur le formulaire Bootstrap, il utilise la classe .navbar-form. Cela garantit un alignement vertical correct du formulaire et un comportement de réduction dans les fenêtres plus étroites. Utilisez les options d'alignement (qui sont expliquées en détail dans la section Alignement des composants) pour décider où le contenu de la barre de navigation est placé.

L'exemple suivant le démontre : 

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bootstrap 实例 - 默认的导航栏</title> 
  <link href="bootstrap.min.css" rel="stylesheet"> 
  <script src="jquery-2.1.4.min.js"></script> 
  <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-default" role="navigation"> 
  <div class="navbar-header"> 
   <a class="navbar-brand" href="#">林炳文在此～</a> 
  </div> 
  <div> 
   <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">导航一</a></li> 
     <li><a href="#">导航二</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="#">我是谁呢？</a></li> 
        <li><a href="#">我也不知道</a></li> 
        <li><a href="#">你是谁呢？</a></li> 
        <li class="divider"></li> 
        <li><a href="#">分离的链接</a></li> 
        <li class="divider"></li> 
        <li><a href="#">另一个分离的链接</a></li> 
      </ul> 
     </li> 
   </ul> 
  </div> 
  <div> 
   <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">搜一下</button> 
   </form>   
  </div> 
</nav> 
</body> 
</html>

Effet :

Effet noir

2. Boutons dans la barre de navigation
Vous pouvez utiliser la classe .navbar-btn pour ajouter un bouton à un élément bb9345e55eb71822850ff156dfde57c8 qui ne se trouve pas à l'intérieur d'un ff9c23ada1bcecdd1a0fb5d5a0f18437, avec le bouton centré verticalement sur la barre de navigation. .navbar-btn peut être utilisé sur les éléments 3499910bf9dac5ae3c52d5ede7383485

N'utilisez pas .navbar-btn sur les éléments 3499910bf9dac5ae3c52d5ede7383485 à l'intérieur de .navbar-nav car ce n'est pas une classe de bouton standard.
L'exemple suivant le démontre : 

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bootstrap 实例 - 默认的导航栏</title> 
  <link href="bootstrap.min.css" rel="stylesheet"> 
  <script src="jquery-2.1.4.min.js"></script> 
  <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-inverse" role="navigation"> 
  <div class="navbar-header"> 
   <a class="navbar-brand" href="#">林炳文在此～</a> 
  </div> 
  <div> 
   <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">导航一</a></li> 
     <li><a href="#">导航二</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="#">我是谁呢？</a></li> 
        <li><a href="#">我也不知道</a></li> 
        <li><a href="#">你是谁呢？</a></li> 
        <li class="divider"></li> 
        <li><a href="#">分离的链接</a></li> 
        <li class="divider"></li> 
        <li><a href="#">另一个分离的链接</a></li> 
      </ul> 
     </li> 
   </ul> 
  </div> 
  <div> 
   <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">搜一下</button> 
   </form>  
   <button type="button" class="btn btn-default navbar-btn"> 
     导航栏按钮 
   </button>    
  </div> 
</nav> 
</body> 
</html>

L'effet est le suivant :

3. Texte dans la barre de navigation
Si vous devez inclure une chaîne de texte dans la navigation, utilisez la classe .navbar-text. Ceci est généralement utilisé en conjonction avec la balise e388a4556c0f65e1904146cc1a846bee, garantissant un interlignage et une coloration appropriés. L'exemple suivant le démontre : 

<div class="navbar-header"> 
   <a class="navbar-brand" href="#">林炳文在此～</a>   
  </div> 
  <div> 
   <p class="navbar-text">导航栏中的文本</p> 
  </div> 
  <div>

L'effet est le suivant :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, afin que chacun puisse implémenter la barre de navigation Bootstrap plus habilement.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Une brève introduction à la conversion de type implicite des types de données JavaScript_compétences JavascriptArticle suivant：Une brève introduction à la conversion de type implicite des types de données JavaScript_compétences Javascript

Articles Liés

Voir plus