Question

好的，我已经下载了Bootstrap滑块：https://github.com/seiyria/bootstrap-slider 我进入\ bootstrap-slider-master \ dist并将 bootstrap-slider.js 和 bootstrap-slider.min.js 复制到我的js文件夹中。我还将 bootstrap-slider.css 和 bootstrap-slider.min.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是问题，但我已经在bootstrap css之后在头部实现了它。所以我不知道为什么它不起作用。

Answer 1

您的代码应该有效，您可能引用了错误的文件或某事？我嵌入了bootstrap / 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>

Answer 2

你说错了：<script type="js/bootstrap-slider.min.js"></script>。不输入，src。它应该是：

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

立即尝试！

Bootstrap滑块 - CSS无法正常显示

2 个答案: