Bootstrap implémente les compétences effect_javascript de la barre de navigation réactive-js tutoriel-php.cn

Bootstrap implémente les compétences effect_javascript de la barre de navigation réactive

WBOY

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

original

1684 Les gens l'ont consulté

Afin d'ajouter des fonctionnalités réactives à la barre de navigation, le contenu que vous souhaitez réduire doit être enveloppé dans un

avec les classes .collapse, .navbar-collapse. La barre de navigation réduite est en fait un bouton avec la classe .navbar-toggle et deux éléments de données. Le premier est data-toggle, qui indique à JavaScript quoi faire avec le bouton, et le second est data-target, qui indique vers quel élément basculer. Trois avec la classe .icon-bar créent ce que l'on appelle des boutons hamburger. Ceux-ci basculeront vers les éléments dans .nav-collapse

. Afin d'obtenir ces fonctionnalités, vous devez inclure le plugin Bootstrap Collapse.
Rendu :

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"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" 
   data-target="#example-navbar-collapse"> 
   <span class="sr-only">切换导航</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
  </button> 
  <a class="navbar-brand" href="#">12345</a> 
 </div> 
 <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">iOS</a></li> 
   <li><a href="#">fgghh</a></li> 
   <li class="dropdown"> 
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    Java <b class="caret"></b> 
   </a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">vgghhr</a></li> 
    <li><a href="#">dg</a></li> 
    <li><a href="#">sfg</a></li> 
    <li class="divider"></li> 
    <li><a href="#">分离的链接</a></li> 
    <li class="divider"></li> 
    <li><a href="#">另一个分离的链接</a></li> 
   </ul> 
   </li> 
  </ul> 
 </div> 
</nav> 
 
 
</body> 
</html>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Étiquettes associées：

bootstrap 导航

source：php.cn

Article précédent：Pourquoi js ne peut-il pas gérer correctement les opérations décimales ? _compétences javascript Article suivant：Implémentation du plug-in de sélection de mois basé sur jQuery avec le code source download_jquery

Déclaration de ce site Web

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

Derniers articles par auteur