Bootstrap Plugins Using Theme
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
I want use it using the CDN: https://cdnjs.com/libraries/bootstrap-slider
So in my header of the html I have it like this:
<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/
Example 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 ?
1 answers
solution1
1 2016-08-30 10:51:44
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.
Secondly, you are including the stylesheets through script tags. You need to include a stylesheet using a link tag.
Lastly, I do not see an include of the Bootstrap JavaScript itself, you'll need to include it as well.
I would also update the path to the bootstrap-slider files. Using two slashes at the start could lead to strange behaviour. Update them to use https:// as the prefix.
After these changes your head section should look like
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.