Votre question
Résolu

navbar de bootstrap

Tags :
  • Jquery
  • Programmation
  • bootstrat
Dernière réponse : dans Programmation
2 Décembre 2013 21:29:38

Bonjour a tous!

voila mon problème. j'ai une navbar de bootstrap sur mon site, quand je suis sur tablette ou mobile le menu ce compacte en un bouton cliquable qui fait défiler le menu ( vous connaissez certainement )

le problème c'est que le bouton s'affiche bien mais que rien ne ce passe quand je clique sur le bouton !

j'ai exactement le même code que la doc de bootstrap, Javascript n'est pas désactivé dans mon firefox et j'ai link les dépendances "collapse" et "transition" que j'ai récupéré sur le github de bootstrap...

une idée pour résoudre le problème ?

merci de vos réponses,
mdj de normandie

edit suite a la demande de OmaR:
mon code reprend la doc de bootstrap :
  1. <!DOCTYPE HTML>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" href="dist/css/bootstrap-theme.css" />
  7. <link rel="stylesheet" href="dist/css/bootstrap.css" />
  8. <link rel="stylesheet" href="dist/css/bootstrap-responsive.css" />
  9. <link rel="stylesheet" href="src/style.css" />
  10. <script type="text/javascript" src="../src/jquery-ui-1.10.3/jquery-1.9.1.js"></script>
  11. <script type="text/javascript" src="../src/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
  12. <script type="text/javascript" src="dist/js/bootstrap.js"></script>
  13. <script type="text/javascript" src="dist/js/transition.js" ></script>
  14. <script type="text/javascript" src="dist/js/collapse.js" ></script>
  15. <title>titre</title>
  16. </head>
  17. <body>
  18. <div class="page-header">
  19. <h1>titre <br /><small>soustitre</small></h1>
  20. </div>
  21. <nav class="navbar navbar-default" role="navigation">
  22. <!-- Brand and toggle get grouped for better mobile display -->
  23. <div class="navbar-header">
  24. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  25. <span class="sr-only">Toggle navigation</span>
  26. <span class="icon-bar"></span>
  27. <span class="icon-bar"></span>
  28. <span class="icon-bar"></span>
  29. </button>
  30. <a class="navbar-brand" href="#">Brand</a>
  31. </div>
  32.  
  33. <!-- Collect the nav links, forms, and other content for toggling -->
  34. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  35. <ul class="nav navbar-nav">
  36. <li class="active"><a href="#">Link</a></li>
  37. <li><a href="#">Link</a></li>
  38. <li class="dropdown">
  39. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  40. <ul class="dropdown-menu">
  41. <li><a href="#">Action</a></li>
  42. <li><a href="#">Another action</a></li>
  43. <li><a href="#">Something else here</a></li>
  44. <li class="divider"></li>
  45. <li><a href="#">Separated link</a></li>
  46. <li class="divider"></li>
  47. <li><a href="#">One more separated link</a></li>
  48. </ul>
  49. </li>
  50. </ul>
  51. <form class="navbar-form navbar-left" role="search">
  52. <div class="form-group">
  53. <input type="text" class="form-control" placeholder="Search">
  54. </div>
  55. <button type="submit" class="btn btn-default">Submit</button>
  56. </form>
  57. <ul class="nav navbar-nav navbar-right">
  58. <li><a href="#">Link</a></li>
  59. <li class="dropdown">
  60. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  61. <ul class="dropdown-menu">
  62. <li><a href="#">Action</a></li>
  63. <li><a href="#">Another action</a></li>
  64. <li><a href="#">Something else here</a></li>
  65. <li class="divider"></li>
  66. <li><a href="#">Separated link</a></li>
  67. </ul>
  68. </li>
  69. </ul>
  70. </div><!-- /.navbar-collapse -->
  71. </nav>
  72. <div class="">
  73.  
  74. </div>
  75.  
  76. </body>
  77. </html>

Autres pages sur : navbar bootstrap

a c 232 L Programmation
2 Décembre 2013 22:57:41

lien ? code ?
m
0
l
2 Décembre 2013 23:52:18

j'edit ma question mais mon code reprend la doc de bootstrap ...
m
0
l
Contenus similaires
a c 232 L Programmation
3 Décembre 2013 23:33:31

essaie de réduire ta fenêtre de navigateur PC jusqu'à qu'elle soit à la taille d'une tablette / mobile, et tu devrais pouvoir avoir le même comportement, essaie de voir si t'as le même problème, et avec chrome/firefox tu dois pouvoir avoir les infos
m
0
l
3 Décembre 2013 23:54:40

que se soir sur firefox ou chrome c'est pareille, je me sert de l'outil intégré a firefox pour tester mon responsive designe ( avec la macro ctrl+maj+m) mais rien a faire quand je suis en format tablette / mobile le bouton ne marche pas !
m
0
l

Meilleure solution

a b L Programmation
5 Décembre 2013 05:37:26

Moi je vois du Bootstrap 3 et du jquery 1.9 je pense direct a une incompatibilité javascript ...

Affiche la console web de ton navigateur, réduit sa taille pour faire apparaitre le bouton ... clic dessus et regarde l'erreur générer ;) 
partage
5 Décembre 2013 13:48:23

ha! le c**! merci andrelec1 tu m'a mis sur la bonne voie mais le truc c'est que c'est le chemin d'accès a jquery qui été faux ( fallait que j’enlève les "../" devant )
sa marche a présent !
encore merci ^^
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS