使用主题的Bootstrap插件

Question

I have this Plugin I want to use, it is a slider plugin, here's the link to it: https://github.com/seiyria/bootstrap-slider 我有一个我想使用的插件，它是一个滑块插件，这是它的链接： https : //github.com/seiyria/bootstrap-slider

I want use it using the CDN: https://cdnjs.com/libraries/bootstrap-slider 我想通过CDN使用它： https : //cdnjs.com/libraries/bootstrap-slider

So in my header of the html I have it like this: 因此，在我的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>

And then I try to use one of the examples they show on their page: http://seiyria.com/bootstrap-slider/ 然后，我尝试使用他们在其页面上显示的示例之一： http : //seiyria.com/bootstrap-slider/

Example 21: 示例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" />

As a result all I get is a text box. 结果，我得到的只是一个文本框。 Am I not using the plugin or referencing it the right way ? 我不是在使用插件或以正确的方式引用它？

Answer 1

First: you only need either the full or the minfied versions. 首先：您只需要完整版或正式版。 In your example code you're including both. 在示例代码中，您将两者都包括在内。

For development purposes I propose to remove the includes of the minified files (the one with the .min suffix. 出于开发目的，我建议删除压缩文件的包含文件（后缀为.min文件）。

Secondly, you are including the stylesheets through script tags. 其次，您要通过script标签包含样式表。 You need to include a stylesheet using a link tag. 您需要使用link标记包括样式表。

Lastly, I do not see an include of the Bootstrap JavaScript itself, you'll need to include it as well. 最后，我没有看到Bootstrap JavaScript本身包含的内容，您也需要包含它。

I would also update the path to the bootstrap-slider files. 我还将更新bootstrap-slider文件的路径。 Using two slashes at the start could lead to strange behaviour. 一开始使用两个斜杠可能会导致奇怪的行为。 Update them to use https:// as the prefix. 更新它们以使用https://作为前缀。

After these changes your head section should look like 这些更改之后，您的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>

使用主题的Bootstrap插件

问题描述

1 个解决方案

解决方案1
1 2016-08-30 10:51:44

使用主题的Bootstrap插件

问题描述

1 个解决方案

解决方案1 1 2016-08-30 10:51:44

解决方案1
1 2016-08-30 10:51:44