2013-03-18 95 views
0

引导tabbable导航不显示预期的Ruby标签on Rails的

source 'https://rubygems.org' 

    gem 'rails', '3.2.13' 
    gem 'bootstrap-sass', '2.3.1' 
    gem 'sqlite3', :require => 'sqlite3' 
    gem 'bcrypt-ruby', '3.0.1' 
    gem 'jquery-rails', '~> 2.2.1' 

    # gem for dev only 
    group :development do 
     gem 'annotate', '~> 2.4.1.beta' 
     gem 'rspec-rails' 
     gem 'capybara', '1.1.2' 
     gem 'factory_girl_rails', '4.1.0' 
    end 

    # Gems used only for assets and not required 
    # in production environments by default. 
    group :assets do 
     gem 'sass-rails', '~> 3.2.3' 
     gem 'coffee-rails', '~> 3.2.1' 
     gem 'uglifier', '>= 1.0.3' 
    end 

这个包括在我的主要Style.css.scss文件:

@import "bootstrap"; 

这标题我application.html.erb文件:

<!DOCTYPE html> 
    <html> 
    <head> 
     <title> <%= full_title(yield(:title))%> </title> 
     <%= stylesheet_link_tag "application", :media => "all" %> 
     <%= javascript_include_tag "application" %> 
     <%= csrf_meta_tags %> 
     <%= render "layouts/shim" %> 
    </head> 

    <body> 
    ... 

(由迈克尔·哈特尔的教程启发)

我试图从引导应用下面的例子中我的设计:

<div class="tabbable"> <!-- Only required for left/right tabs --> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
    <p>I'm in Section 1.</p> 
    </div> 
    <div class="tab-pane" id="tab2"> 
    <p>Howdy, I'm in Section 2.</p> 
    </div> 
</div> 
</div> 

效果不是的预期是什么(即使它工作正常,在其网站上,我复制/粘贴):

- 当第一个显示页面,活动选项卡1选择(如预期)

- 当我在“第2节”点击选项卡,在地址栏实际显示的网址...#TAB2,但不第2部分的内容。“活动”选项卡仍然是1.

- 当我点击“第1”选项卡,在地址栏实际显示的网址...#TAB1

我错过了什么?

感谢您的帮助。

最好的问候,

弗雷德

回答

2

听起来就像是JavaScript是不加载,所以应用程序可能无法加载它。你可能已经忘记设置你的应用程式上加载引导.js文件,就像这样:

# app/assets/javascripts/applications.js (or a manifest of your choice) 
//= require bootstrap 
+0

非常感谢,这是解决方案,立即高效!我以为拥有bootstrap-sass宝石就够了......显然不是。它是在applications.js中编写的,文件本身不应该被修改。将这个require语句放在同一个文件夹的myscripts.js文件中会更“瘦”吗?感谢和最好的问候 - 弗雷德 – user1185081 2013-03-31 15:17:43

+0

我认为这个建议是专指将.js添加到文件。如果需要的话,你应该继续改变文件中的指令,就像在这种情况下一样。 此外,请确保您采用tagCincy的建议并将bootstrap-sass移至您的资产组:) – 2013-04-01 22:38:45

+0

感谢您对这两种精度的支持。 – user1185081 2013-04-02 06:35:14

1

正如扎伊德说,听起来像是你没有进口引导JS。

此外,您应该在资产组中包含bootstrap-sass gem。如果不是这样,则包含在gem中的供应商样式表和脚本将不会在prod部署之前进行预编译。

+0

感谢您提供此信息,我会立即添加它!最好的问候 - 弗雷德 – user1185081 2013-03-31 15:24:04