Question

我正在为现有项目添加bootstrap（Rails 3.1）。

我在这里做了什么：

在我的gemfile中添加了boostrap-sass：

gem 'sass'
gem "compass", "~> 0.11.7"     <== [1] DO I NEED THIS ONE? IF YES, WHY?
gem 'sass-rails', '~> 3.1'
gem 'bootstrap-sass', '~> 2.0.0'

[2] - twitter bootstrap使用jquery插件。我是否需要在我的gemfile中添加jquery-rails gem？

更新了application.css.scss文件：

@import "bootstrap";

[3] - 如果需要jquery-rail gem，我是否需要在这里导入jquery？

更新了application.js：

//= require bootstrap-tab

[4] - 如何确保正确加载此库？

我可以验证是否安装了引导引擎：

rails console
Rails.application.assets.paths

Loading development environment (Rails 3.1.3)
ruby-1.9.2-p180 :001 > Rails.application.assets.paths
 => ["/Users/joelmaranhao/RubymineProjects/bio_watts/app/assets/images", "/Users/joelmaranhao/RubymineProjects/bio_watts/app/assets/javascripts", "/Users/joelmaranhao/RubymineProjects/bio_watts/app/assets/stylesheets", "/Users/joelmaranhao/.rvm/gems/ruby-1.9.2-p180/gems/i18n-js-2.0.1/vendor/assets/javascripts", "/Users/joelmaranhao/.rvm/gems/ruby-1.9.2-p180/gems/prototype-rails-3.1.0/vendor/assets/javascripts", "/Users/joelmaranhao/.rvm/gems/ruby-1.9.2-p180/gems/bourbon-1.3.6/app/assets/stylesheets", "/Users/joelmaranhao/.rvm/gems/ruby-1.9.2-p180/gems/bootstrap-sass-2.0.0/vendor/assets/images", "/Users/joelmaranhao/.rvm/gems/ruby-1.9.2-p180/gems/bootstrap-sass-2.0.0/vendor/assets/javascripts", "/Users/joelmaranhao/.rvm/gems/ruby-1.9.2-p180/gems/bootstrap-sass-2.0.0/vendor/assets/stylesheets", "/Users/joelmaranhao/.rvm/gems/ruby-1.9.2-p180/gems/gmaps4rails-1.4.5/app/assets/javascripts", "/Users/joelmaranhao/.rvm/gems/ruby-1.9.2-p180/gems/gmaps4rails-1.4.5/public/stylesheets"]

在我的布局中：

<%= stylesheet_link_tag "application" %>        
<%= javascript_include_tag "application" %>

在我看来，我在bootstrap twitter示例中添加了一个tabbable：

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

我认为它可以开箱即用。

[5] - 我想让动态表与本地内容一起工作，我缺少什么？

希望你能提供帮助，

乔尔

Answer 1

指南针：

bootstrap-sass不需要Compass与Rails一起使用。这实际上是使用Rails进行bootstrap-sass所需要的所有内容：

gem 'sass-rails', '~> 3.1'
gem 'bootstrap-sass', '~> 2.0.0'

jquery-rails＆amp;包含顺序

你需要在Bootstrap javascripts之前包含jQuery，你如何做到这一点取决于你。您可以使用jquery-rails gem，您可以使用Google CDN版本，您可以使用本地副本。无关紧要，只要它包含在Bootstrap javascripts之前。

OOB表

您的示例适用于包含jQuery，因此我假设您唯一的问题不包括jQuery。 Here is a jsfiddle使用jQuery显示您的示例标记正常工作。

如何使用bootstrap-sass设置动态选项卡？

1 个答案:

指南针：

jquery-rails＆amp;包含顺序

OOB表