问引导滑块不加载
EN

Stack Overflow用户

提问于 2018-12-19 20:06:29

回答 2查看 166关注 0票数 0

我已经写了这个html并包含了来自cdn的所有文件，但是我仍然看到没有粘性标签的滑块，所以我错过了什么？

<!doctype html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.2/css/bootstrap-slider.css">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.4.2/bootstrap-slider.js"></script>

</head>
<body>
    <form>
        <div>
            Slider with single value and label:<br/><br/>
            <span id="ex18-label-1" class="hidden">
            Example slider label
          </span>
            <input id="ex18a" type="text" /><br/><br/><br/>
        </div>

    </form>

<script>
    $('#ex18a').slider({
        min  : 0,
        max  : 10,
        value: 5,
        labelledby: 'ex18-label-1'
    });

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

全例

twitter-bootstrap

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-12-19 20:24:37

我正在进一步研究这个问题，结果发现bootstrap-slider项目与Bootstrap 4还没有100%兼容。该项目的贡献者正在进行这项工作，看起来其中很大一部分已经完成，但是在将其发布到CDN之前，还需要进行测试等等。查看项目在GitHub 在这个链接上上的进度，以及关于工具提示问题这里的更多信息。很有可能你需要使用引导程序3，或者找到另一个已经被证明可以使用引导程序4的库。

票数 3

Stack Overflow用户

发布于 2018-12-19 20:27:29

可以确认这仅适用于引导v3，更改链接样式表足以显示上面的标签。

$('#ex18a').slider({
  min: 0,
  max: 10,
  value: 5,
  labelledby: 'ex18-label-1'
});

<!doctype html>
<html lang="en">

<head>
  <!-- Bootstrap 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/10.4.2/css/bootstrap-slider.css">

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- 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/10.4.2/bootstrap-slider.js"></script>

</head>

<body>
  <form>
    <div>
      Slider with single value and label:<br/><br/>
      <span id="ex18-label-1" class="hidden">
            Example slider label
          </span>
      <input id="ex18a"  type="text" /><br/><br/><br/>
    </div>

  </form>

  <script>
  </script>
</body>

</html>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53858451

复制

相似问题

问引导滑块不加载
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导滑块不加载EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导滑块不加载
EN