Eh bien ... hier, ça a marché, demain, pas ... c'est vrai!Bootstrap 3 navbar ne fonctionne plus
Sur console, il donne ce message:
Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
La page est chargée, mais la barre de navigation n'a pas l'air aimé qu'il doit faire: les voix sont alignées à la verticale au lieu que dans le sens horizontal (donc j'ai beaucoup de colonnes).
Je vois que le bootstrap 4 est enfin sorti ... mais je préférerais ne pas passer à la nouvelle version.
Dans mon html j'utilise:
<link href='http://getbootstrap.com/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css' rel='stylesheet'>]
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script type='text/javascript' src='http://getbootstrap.com/dist/js/bootstrap.min.js'></script>
J'ai changé le dernier (il n'a pas l'indication de la version) à:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
et le message d'erreur sur la console est parti mais la nav reste verticale. Comme solution de rechange i essayé d'ajouter:
script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
et la même chose se produire: le message d'erreur est disparu, mais la barre de navigation ne fonctionne pas. Donc, je n'ai pas ajouté cette rangée.
Voici mon code pour la navigation dans base.html:
<body id='body' style='margin:0; padding:10; height:100%; width:100%;'>
<div id='wrapper' style='min-height:100%; position:relative;'>
<nav class='navbar navbar-inverse navbar-fixed-top'>
{% include '_navbar.html' %}
</nav>
[...]
</div>
</body>
et _navbar.html:
{% load staticfiles %}
{% load i18n %}
<div class='container-fluid'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href="{% url 'core:homepage' %}">Title</a>
</div>
<div id='navbar' class='navbar-collapse collapse'>
<ul class='nav navbar-nav navbar-right'>
<li><a href="{% url 'auth_password_change' %}">change data</a></li>
<li><a href="{% url 'auth_logout' %}?next=/home/">Exit</a></li>
[...]
</ul>
</div>
</div>
Pour être clair ma barre de navigation ressemble à quelque chose comme:
Title
change data
Exit
au lieu de:
Title change data Exit