43 votes

Menu déroulant Twitter Bootstrap

J'essaie d'utiliser le menu déroulant de Twitter Bootstrap dans sa barre de navigation supérieure. Vous pouvez voir un exemple de fonctionnement ici. http://twitter.github.com/bootstrap/#

Dans le mien, la flèche indiquant qu'il s'agit d'une liste déroulante apparaît dans le menu, mais lorsque je la survole ou que je clique dessus, les liens de la liste déroulante n'apparaissent pas. Je pense avoir inclus toutes les classes nécessaires, et je ne crois pas que Twitter ait besoin de javascript.

Tu vois ce que je fais mal ?

Ma liste déroulante

  <div class='topbar' data-dropdown="dropdown">

  <div class='fill'>
    <div class='container'>
    <ul class="nav">

      <li><%= link_to 'Home', main_app.root_path %></li>
          <li><%= link_to 'Outlines', main_app.outlines_path %></li>
       <li class="dropdown">
        <a href="#" class="dropdown-toggle">Assessment</a>
        <ul class="dropdown-menu">
        <li><a href="#">second link </a></li>
        <li><a href="#">third link </a></li>
        </ul>
      </li>

  ..... I go on to close all the divs etc. The nav bar looks great but the dropdown just doesn't work. 

Twitter Bootstrap

<div class="topbar" data-dropdown="dropdown">
  <div class="topbar-inner">
    <div class="container">
      <h3><a href="#">Project Name</a></h3>
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><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">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a href="#">Secondary link</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Another link</a></li>
          </ul>
        </li>
      </ul>
      <form class="pull-left" action="">
        <input type="text" placeholder="Search">
      </form>
      <ul class="nav secondary-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a href="#">Secondary link</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Another link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div><!-- /topbar-inner -->
</div>

50voto

Leahcim Points 5965

Il faut en fait inclure le fichier dropdown.js de Twitter Bootstrap.

http://getbootstrap.com/2.3.2/components.html

17voto

Andy Points 2015
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>

16voto

baptme Points 6928

Il est également possible de personnaliser votre construction bootstrap en utilisant :

http://twitter.github.com/bootstrap/customize.html

Tous les plugins sont inclus par défaut.

1voto

markotikvic Points 1

Vous devez inclure jQuery dans le projet.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Je n'ai pas trouvé de documentation à ce sujet et j'ai donc ouvert un exemple de code aléatoire provenant de tutorialrepublic.com. http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php

J'espère que cela aidera quelqu'un d'autre.

0voto

mark1234 Points 188

J'ai eu un problème similaire et c'était la version de bootstrap.js incluse dans mon projet Visual Studio. J'ai fait le lien ici et ça a bien fonctionné

 <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X