CODEWITHSUNDEEP
ruby-on-rails-3.1twitter-bootstrap
zabumba
zabumba

Reputation: 12422

how do I set up a dynamic tab with bootstrap-sass?

I am adding bootstrap to an existing project (Rails 3.1).

Here what I did:

Added boostrap-sass to my 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 bootstrap uses jquery plugins. Do I need to add jquery-rails gem to my gemfile?

Updated application.css.scss file:

@import "bootstrap";

[3] - if jquery-rail gem is needed, do I need to import jquery here?

Updated application.js:

//= require bootstrap-tab

[4] - How can I make sure that this library was correctly loaded?

I can verify that bootstrap engine is installed:

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"]

In my layout: 

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

In my view I added a tabbable as in bootstrap twitter examples:

<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>

I thought it would work out of the box.

[5] - What am I missing to make the dynamic table work with local content?

Hope you can help,

Joel

Upvotes: 0

Views: 1247

Answers (1)

nobody
nobody

Reputation: 1782

Compass:

bootstrap-sass does not need Compass to work with Rails. This is actually all you need to get bootstrap-sass working with Rails:

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

jquery-rails & order of inclusion

You need to have jQuery included before the Bootstrap javascripts, how you do that is up to you. You could use the jquery-rails gem, you could use the Google CDN version, you could use a local copy. Doesn't matter, as long as it's included before the Bootstrap javascripts.

OOB table

Your example works with with jQuery included, so I presume your only issue is not including jQuery. Here is a jsfiddle with jQuery that shows your example markup working fine.

Upvotes: 1

Related Questions