文章/答案/技术大牛

发布

社区首页 >问答首页 >使用主题的引导插件

问使用主题的引导插件
EN

Stack Overflow用户

提问于 2016-08-30 18:48:56

回答 1查看 36关注 0票数 0

我有一个我想使用的插件，它是一个滑块插件，链接如下：https://github.com/seiyria/bootstrap-slider

我想通过CDN使用它：https://cdnjs.com/libraries/bootstrap-slider

因此，在我的html头文件中，它是这样的：

    <head>
        <title>Slider Test</title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.css"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.min.css"></script>
    </head>

然后，我尝试使用他们在页面上显示的一个示例：http://seiyria.com/bootstrap-slider/

示例21：

<input id="ex21" type="text"
          data-provide="slider"
          data-slider-ticks="[1, 2, 3]"
          data-slider-ticks-labels='["short", "medium", "long"]'
          data-slider-min="1"
          data-slider-max="3"
          data-slider-step="1"
          data-slider-value="3"
          data-slider-tooltip="hide" />

结果，我得到的只是一个文本框。我是不是没有正确地使用插件或者引用它？

javascript

html

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2016-08-30 18:51:44

首先:您只需要完整版或精简版。在您的示例代码中，您将两者都包括在内。

出于开发目的，我建议删除精简文件(带有.min后缀的文件)的包含项。

其次，通过script标记包含样式表。需要包含一个使用link标记的样式表。

最后，我没有看到Bootstrap JavaScript本身的包含，您也需要包含它。

我还会更新bootstrap-slider文件的路径。在开始时使用两个斜杠可能会导致奇怪的行为。更新它们以使用https://作为前缀。

在这些更改之后，您的head部分应该如下所示

<head>
    <title>Slider Test</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js"></script>
</head>

票数 1

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

原文链接：

https://stackoverflow.com/questions/39225476

复制

相似问题

问使用主题的引导插件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用主题的引导插件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用主题的引导插件
EN