我几周前刚开始在rails上使用ruby,目前我正在使用rails composer(使用twitter bootstrap rails gem)构建一个博客。我想将引导程序转盘添加到我的应用程序视图(即我的application.html.erb)
我已经尝试从twitter引导程序文档中添加经典的html代码,但我只得到了没有显示图片的左右控制器按钮。
有人能帮我解决问题吗?
附言:我目前使用Sass进行引导程序设计。
编辑02-11-2013=>这是我的代码,希望你能找到我的错误是
<div class="container">
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<a><img src="assets/images/1.jpg" alt="Antennae Galaxies" /></a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p><a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/">Hubblesite.org »</a></p>
</div>
</div>
<div class="item">
<a><img src="assets/images/2.jpg" alt="Carina Caterpillar" /></a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p><a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">Hubblesite.org »</a></p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
<script>
$(function(){
$('#this-carousel-id').carousel();
});
</script>
</body>
</html>
编辑2:这就是它在Chrome上的样子:http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png
而不是
img src="assets/images/1.jpg" alt="Antennae Galaxies",
对轨道使用以下图像标签:
link_to image_tag("1.jpg", :alt => "Slide1"), {:class => "img-responsive", :alt => "Responsive image"}
并且不需要指定用于显示图像文件夹的"资产/图像"。CCD_ 1就足够了!
您的app/assets/javascripts/application.js是否包含对bootstrap的引用?
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
我的旋转木马作为参考:
<div class="span8 welcome-image">
<div id="myCarousel"
class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<a href="/users/sign_up"><img src="/pictures/1.png"> </a>
</div>
<div class="item">
<a href="/users/sign_up"><img src="/pictures/2.png"> </a>
</div>
<div class="item">
<a href="/users/sign_up"><img src="/pictures/3.png"> </a>
</div>
<div class="item">
<a href="/users/sign_up"><img src="/pictures/4.png"> </a>
</div>
<div class="item">
<a href="/users/sign_up"><img src="/pictures/WordcloudInsight.png"> </a>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Rails中的Bootstrap Carousel突然停止工作
检查上面的链接,你还添加了这个+是jquery加载吗
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>