Bootstrap 滑块不可见
Bootstrap slider is not visable
我正在尝试在我正在开发的网站上使用这个 bootstrap 滑块,但它根本不显示:slinder
我在这里创建了一个 plunker 来演示这个问题:Plunker 有人知道如何解决这个问题吗?
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello Plunker!</h1>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js"></script>
<script src="script.js"></script>
</body>
</html>
css
#ex1Slider .slider-selection {
background: #BABABA;
}
JavaScript:
var slider = new Slider('#ex1', {
formatter: function(value) {
return 'Current value: ' + value;
}
});
您还需要包中附带的样式表。将此添加到您的头部标签:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.css" />
我正在尝试在我正在开发的网站上使用这个 bootstrap 滑块,但它根本不显示:slinder 我在这里创建了一个 plunker 来演示这个问题:Plunker 有人知道如何解决这个问题吗?
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello Plunker!</h1>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js"></script>
<script src="script.js"></script>
</body>
</html>
css
#ex1Slider .slider-selection {
background: #BABABA;
}
JavaScript:
var slider = new Slider('#ex1', {
formatter: function(value) {
return 'Current value: ' + value;
}
});
您还需要包中附带的样式表。将此添加到您的头部标签:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.css" />