как настроить динамическую вкладку с помощью bootstrap-sass?

Question

Я добавляю загрузчик в существующий проект (Rails 3.1).

Вот что я сделал:

Добавлен boostrap-sass в мой gemfile:

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 используются плагины jquery. Нужно ли добавлять гем jquery-rails в мой гемфайл?

Обновлен файл application.css.scss:

@import "bootstrap";

[3] - если нужен гем jquery-rail, нужно ли мне импортировать 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" %>

На мой взгляд, я добавил вкладку, как в примерах Twitter при загрузке:

<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] - Чего не хватает, чтобы динамическая таблица работала с локальным контентом?

Надеюсь, вы можете помочь,

Joel

Answer 1

Компас:

bootstrap-sass не нужен Compass для работы с Rails. На самом деле это все, что вам нужно, чтобы bootstrap-sass работал с Rails:

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

jquery-рельсы и порядок включения

Вам нужно включить jQuery перед javascript-скриптом Bootstrap, в зависимости от того, как вы это сделаете. Вы можете использовать гем jquery-rails, вы можете использовать версию CDN Google, вы можете использовать локальную копию. Не имеет значения, если он включен до javascripts Bootstrap.

таблица OOB

Ваш пример работает с включенным jQuery, поэтому я предполагаю, что ваша единственная проблема не связана с jQuery. Вот jsfiddle с jQuery, который показывает, что ваш пример разметки работает нормально.