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

【问题标题】：how do I set up a dynamic tab with bootstrap-sass?如何使用 bootstrap-sass 设置动态选项卡？
【发布时间】：2012-02-17 19:33:01
【问题描述】：

我正在将引导程序添加到现有项目 (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 插件。我需要将 jquery-rails gem 添加到我的 gemfile 中吗？

更新 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] - 为了让动态表格与本地内容一起使用，我缺少什么？

希望你能帮忙，

乔尔

【问题讨论】：

标签： ruby-on-rails-3.1 twitter-bootstrap

【解决方案1】：

指南针：

bootstrap-sass 不需要 Compass 来使用 Rails。这实际上是让 bootstrap-sass 与 Rails 一起工作所需的全部内容：

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

jquery-rails 和包含顺序

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

OOB 表

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

【讨论】：