引导滑块 - CSS 未正确显示答案

【问题标题】：Bootstrap slider - CSS not showing properly引导滑块 - CSS 未正确显示
【发布时间】：2016-11-30 20:08:42
【问题描述】：

好的，我已经下载了 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 是问题，但我已经在引导 css 之后在头部实现了它。所以我不知道为什么它不起作用。

【问题讨论】：

请提供一个 mcve 示例。 stackoverflow.com/help/mcve

标签： javascript jquery html css twitter-bootstrap

【解决方案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>

【讨论】：

伊万的回答奏效了。我在script标签中输入了错误的东西，应该是script src，我输入了script type。谢谢你的回答:)

【解决方案2】：

你写错了：<script type="js/bootstrap-slider.min.js"></script>.Not type, src. 应该是：

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

现在就试试吧！

【讨论】：