Je suis nouveau dans ce domaine. J'essaie le Bootstrap-select mais je n'obtiens pas l'effet souhaité comme ici https://developer.snapappointments.com/bootstrap-select / . J'ai téléchargé les fichiers et pointé vers le CSS et JS dans la tête. J'ai également activé Bootstrap-select via JavaScript dans la tête et ne fonctionne toujours pas - je reçois simplement l'apparence par défaut. Voici mon code complet. Qu'est-ce que je fais mal ici? Tous les conseils seront appréciés.
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<link href="bootstrap-master/docs/assets/css/bootstrap.css" rel="stylesheet" />
<link href="bootstrap-master/docs/assets/css/bootstrap-select.css" rel="stylesheet" />
<script src="bootstrap-master/docs/assets/js/bootstrap-select.js" type="text/javascript"></script>
<script>
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
</script>
</head>
<body>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</body>
</html>
J'avais un problème similaire. Voici un exemple de travail pour quiconque viendra plus tard à cette question comme je l'ai fait.
Notez qu'il y a 2 CSS fichiers et JavaScript fichiers que vous devez inclure.
$(document).ready(function(e) {
$('.selectpicker').selectpicker();
});
<link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
});
Votre script est déclaré et donc exécuté avant la déclaration <select class="selectpicker">
, Ce qui fait que bootstrap-select n'est jamais initialisé opon .selectpicker
(Selectpicker n'existe pas lorsque le script est exécuté). Mettez-le donc dans une document(ready)
ou après le HTML.
Inclure la bibliothèque jquery et bootstrap js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap-master/docs/assets/js/bootstrap.min.js" type="text/javascript"></script>
et codez comme
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
});
Remarque: Toujours utilisé des CSS et js minifiés, pour augmenter la vitesse de la page
Après 1 an, j'ai eu le même problème. Cela a fonctionné pour moi:
1-Téléchargé les fichiers Zip sur le site du propriétaire - https://developer.snapappointments.com/bootstrap-select/
2-CSS, à l'intérieur de la balise head-> 2files
<link rel="stylesheet" type="text/css" href="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/css/bootstrap-select.css">
<link href="yourPath/bootstrap.min.css" rel="stylesheet">
Fichiers 3-Js, à la fin avant la balise close bode.
<body>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<script type="text/javascript" src="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/js/bootstrap-select.js"></script>
<script type="text/javascript" src="yourPath/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="yourPath/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.selectpicker').selectpicker();
});
</script>
</body>