Comment faire fonctionner chaque élément de la barre de navigation Bootstrap (formulaire, bouton, texte)_compétences javascript-js tutoriel-php.cn

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

WBOY

Libérer： 2016-05-16 15:22:58

original

1520 Les gens l'ont consulté

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>

Copier après la connexion

Effet :