Question

我正在尝试在grails中创建一个Bootstrap滑块，gsp。我从http://www.eyecon.ro/bootstrap-slider/获得了代码。我已经下载了所需的css / js / less文件，并在我的代码中实现了它们。但是，我能看到的只是一个带有值的文本字段，但没有滑块。有人可以帮忙吗？这是我的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>

Answer 1

这对我有用。

CODE：

<!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>

步骤：

创建文件夹;
将html文件放入此文件夹并粘贴上述代码;
下载Bootstrap-slider;
将文件解压缩到您创建的文件夹中;
享受：）

Bootstrap Slider不起作用

1 个答案: