Pomoc w programowaniu, odpowiedzi na pytania / JavaScript / Bootstrap suwak - CSS nie wyświetla się poprawnie - javascript, jquery, html, css, twitter-bootstrap

Suwak Bootstrap - CSS nie wyświetla się poprawnie - javascript, jquery, html, css, twitter-bootstrap

Ok, pobrałem suwak Bootstrap: https://github.com/seiyria/bootstrap-slider Dostałem się do bootstrap-slider-masterdist i skopiowałem bootstrap-slider.js i bootstrap-slider.min.js do mojego folderu js. Skopiowałem również bootstrap-slider.css i bootstrap-slider.min.css do mojego folderu css.

Próbowałem teraz przykładu 7, sprawdź górny link i przejdź do przykładów. Ale jest problem.

To jest mój kod:

<!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>

Oto wynik: Mój wynik w przeglądarce (kliknij) Tekst jest tam i przycisk opcji, ale nie widzę suwaka. Myślę, że problem stanowi css, ale zaimplementowałem go w głowie po css bootstrap. Więc nie wiem, dlaczego to nie działa.

Odpowiedzi:

0 dla odpowiedzi № 1

Źle to ułożyłeś: <script type="js/bootstrap-slider.min.js"></script>.Nie typ, src. Powinno być:

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

Spróbuj teraz!

1 dla odpowiedzi nr 2

Twój kod powinien działać, prawdopodobnie odwoływałeś się do niewłaściwego pliku lub czegoś? Osadziłem wersję online bootstrap / jquery, ale zasadniczo powinna być taka sama:

<!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>