引導滑塊 - CSS無法正確顯示

好吧，我已經下載了引導滑塊：https://github.com/seiyria/bootstrap-slider 我進入\引導滑塊主\ DIST和複製的引導-slider.js和引導滑塊。 min.js進入我的js文件夾。我還將bootstrap-slider.css和bootstrap-slider.min.css複製到我的css文件夾中。引導滑塊 - CSS無法正確顯示

我現在嘗試了示例7，檢查頂部鏈接並轉到示例。但有一個問題。

這是我的代碼：

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

這是結果： My result in browser (click) 文本是存在的，單選按鈕，但我看不到滑塊。 我認爲CSS是問題，但我已經在引導CSS後頭部實現它。所以我不知道它爲什麼不行。

來源

2016-11-30 IkePr

請提供一個mcve例子。 http://stackoverflow.com/help/mcve –

你把這個錯誤：<script type="js/bootstrap-slider.min.js"></script>。不類型，SRC。它應該是：

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

現在就試試吧！

來源

2016-11-30 21:01:04 Ivan

你的代碼應該可以工作，你可能引用了一個錯誤的文件或者某事物？我嵌入式引導/ jQuery的在線版本，但它應該基本上是一樣的：

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

來源

2016-11-30 20:42:33 Saerdn

伊萬的答案工作。我在腳本標記中輸入了錯誤的東西，它應該是腳本src，並且我把腳本類型。謝謝你的回答你:) – IkePr

引導滑塊 - CSS無法正確顯示

回答

相關問題