Aide à la programmation, réponses aux questions / Javascript / Slider Bootstrap - CSS ne s’affiche pas correctement - javascript, jquery, html, css, twitter-bootstrap

Bootstrap slider - CSS ne s’affiche pas correctement - javascript, jquery, html, css, twitter-bootstrap

Ok, j’ai téléchargé le curseur Bootstrap: https://github.com/seiyria/bootstrap-slider Je suis entré dans bootstrap-slider-masterdist et copié le bootstrap-slider.js et le bootstrap-slider.min.js dans mon dossier js. J'ai aussi copié le bootstrap-slider.css et le bootstrap-slider.min.css dans mon dossier css.

J'ai maintenant essayé l'exemple 7, vérifiez le lien du haut et allez aux exemples. Mais il y a un problème.

Ceci est mon code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Test bootstrap slider </title>

<link href="css/bootstrap.min.css" rel="stylesheet" >
<link href="css/bootstrap-slider.min.css" rel="stylesheet">

</head>
<body>

<div class="container">
<input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
<input id="ex7-enabled" type="checkbox"/> Enabled
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="js/bootstrap-slider.min.js"></script>
<script>
$("#ex7").slider();

</script>
</body>
</html>

Voici le résultat: Mon résultat dans le navigateur (cliquez) Le texte est là et le bouton radio, mais je ne peux pas voir le curseur. Je pense que le css est le problème, mais je l’ai implémenté dans la tête après le css bootstrap. Je ne sais donc pas pourquoi cela ne marchera pas.

Réponses:

0 pour la réponse № 1

Vous avez mal compris: <script type="js/bootstrap-slider.min.js"></script>.Ne tapez pas, src. CA devrait etre:

<script src="js/bootstrap-slider.min.js"></script>

Essayez-le maintenant!

1 pour la réponse № 2

Votre code devrait fonctionner, vous avez probablement référencé un mauvais fichier ou qch? J'ai intégré la version en ligne de bootstrap / jquery mais elle devrait être fondamentalement la même:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>

<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.5.1/css/bootstrap-slider.min.css">


<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.5.1/bootstrap-slider.js"></script>

</head>
<body>

<div class="container">
<input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
<input id="ex7-enabled" type="checkbox"/> Enabled
</div>
<script>
$("#ex7").slider();

</script>
</body>
</html>