使用Rails安装Twitter Bootstrap

Question

I am trying to install on an existing project Twitter Bootstrap

I tried to do that, following this :

group :assets do
  gem 'bootstrap-sass-rails'
end

and I got that :

Bundler could not find compatible versions for gem "actionpack":
  In Gemfile:
    bootstrap-sass-rails (>= 0) java depends on
      actionpack (~> 3.1.0) java

    rails (= 2.3.14) java depends on
      actionpack (2.3.14)

Bundler could not find compatible versions for gem "rails":
  In Gemfile:
    bootstrap-sass-rails (>= 0) java depends on
      rails (~> 3.1.3) java

    rails (2.3.14)

Knowing that when I run rails -v, I get rails 3.2.12. So, following the doc, I tried this

gem install bootstrap-sass-rails

I am told that the gem is successfully installed but I don't see any new file in my app folder. By the way, I tried to add in one of my stylesheet this

**/*
 *= require twitter/bootstrap
 */
**

But no bootstrap css seems to be called on my layouts. Could someone help ? Is this the right way to install Bootstrap ?

update : I have just noticed that in the gem file I have : gem "rails", "2.3.14"

Answer 1

For Rails 3:

I have bootstrap and fontawesome installed. Here's my Gemfile:

source 'https://rubygems.org'

gem 'rails', '3.2.12'

# ...

# jQuery
gem 'jquery-rails'

# Twitter Bootstrap
gem 'bootstrap-sass'
gem 'font-awesome-sass-rails'

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails'
end

As you can see, I use a different gem for bootstrap. After editing Gemfile, just type bundle (or maybe bundle update is necessary)

---

This is my application.css.scss (under app/assets/stylesheets/):

@import "bootstrap";
@import "font-awesome";
body { padding-top: 60px; }
@import "bootstrap-responsive";

---

And application.js (under app/assets/javascripts/):

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Answer 2

I have had issues following the " http://railscasts.com/episodes/328-twitter-bootstrap-basics " as nothing I did looks as good as the output of the cast until I notice "Update February 6, 2013: The setup process for twitter-bootstrap-rails has changed since this episode. Check out the README for details on how to set it up."

So I followed to https://github.com/seyhunak/twitter-bootstrap-rails and make the following installation steps and it works for me now:

1. Create a new rails 3.2.x app,
   (if you rvm fan, work with rvm then)
   rails new Store

2. Edit Gemfile, and the following:
   gem "therubyracer"
   gem "less-rails"
   
   gem 'twitter-bootstrap-rails'# * *doest work for me, so I need pull from the source as follow
   
   gem 'twitter-bootstrap-rails', :git => ' https://github.com/seyhunak/twitter-bootstrap-rails.git '
   

3. run bundle install
   

4. Install bootstrap less, rails generate bootstrap:install less

5. Install bootstrap static,
   rails generate bootstrap:install static

6. Copied and pasted the following lines into your "bootstrap_and_overrides.less",
   @import "twitter/bootstrap/reset.less";
   @import "twitter/bootstrap/variables.less";
   @import "twitter/bootstrap/mixins.less";
   @import "twitter/bootstrap/scaffolding.less";
   @import "twitter/bootstrap/grid.less";
   @import "twitter/bootstrap/layouts.less";
   @import "twitter/bootstrap/type.less";
   @import "twitter/bootstrap/forms.less";
   @import "twitter/bootstrap/wells.less";
   @import "twitter/bootstrap/component-animations.less";
   @import "twitter/bootstrap/buttons.less";
   @import "twitter/bootstrap/close.less";
   @import "twitter/bootstrap/navs.less";
   @import "twitter/bootstrap/navbar.less";
   @import "twitter/bootstrap/labels-badges.less";
   @import "twitter/bootstrap/hero-unit.less";
   @import "twitter/bootstrap/utilities.less";
   @import "twitter/bootstrap/responsive";
   

7. Generate the layout either fixed or fluid, your choice.
   

8. Generate the model,
   rails g scaffold product name price:decimal --skip-stylesheets
   rake db:migrate
   rails g bootstrap:themed Products -f
   

9. run in development mode using WEBrick,
   rails s
   

Hope that helps someone!

Answer 3

I'm not a rails thingy guy, but... did u go thru

http://railsapps.github.com/twitter-bootstrap-rails.html

http://www.opinionatedprogrammer.com/2011/11/twitter-bootstrap-on-rails/

http://blog.robertosoares.me/blog/2012/08/17/integrating-twitter-bootstrap-with-ruby-on-rails/

It seemed pretty neat!