使用 Rails 安装 twitter 引导程序

Question

我正在尝试在现有项目上安装 Twitter Bootstrap

我尝试这样做，遵循this：

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

我明白了：

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)

知道当我运行 rails -v 时，我会得到 rails 3.2.12。所以，按照文档，我尝试了这个

gem install bootstrap-sass-rails

我被告知 gem 已成功安装，但我的 app 文件夹中没有看到任何新文件。顺便说一句，我试图在我的一个样式表中添加这个

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

但是我的布局似乎没有调用引导 css。有人可以帮忙吗？这是安装 Bootstrap 的正确方法吗？

更新：我刚刚注意到在 gem 文件中我有：gem "rails", "2.3.14"

Answer 1

对于 Rails 3：

我已经安装了 bootstrap 和 fontawesome。这是我的 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

如您所见，我使用不同的 gem 进行引导。编辑 Gemfile 后，只需输入 bundle（或者可能需要 bundle update）

---

这是我的 application.css.scss（在 app/assets/stylesheets/ 下）：

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

---

和 application.js（在 app/assets/javascripts/ 下）：

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

Answer 2

我在“http://railscasts.com/episodes/328-twitter-bootstrap-basics”之后遇到了问题 因为在我注意到“2013 年 2 月 6 日更新：twitter-bootstrap-rails 的设置过程自这一集以来发生了变化。查看自述文件以了解如何设置它的详细信息之前，我所做的一切看起来都没有演员表的输出那么好。”

所以我跟着https://github.com/seyhunak/twitter-bootstrap-rails 进行了以下安装步骤，它现在对我有用：

1. 创建一个新的 rails 3.2.x 应用程序，
   （如果您是 rvm 粉丝，那么请使用 rvm）
   rails 新商店

2. 编辑 Gemfile，以及以下内容：
   宝石“therubyracer”
   宝石“少导轨”
   
   gem 'twitter-bootstrap-rails'#**确实为我工作，所以我需要从源中提取如下
   
   gem 'twitter-bootstrap-rails', :git => 'https://github.com/seyhunak/twitter-bootstrap-rails.git'
   

3. 运行捆绑安装
   

4. 少安装引导程序， rails generate bootstrap:install less

5. 静态安装引导程序，
   rails generate bootstrap:install static

6. 将以下行复制并粘贴到您的“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. 根据您的选择生成固定或流动的布局。
   

8. 生成模型，
   rails g 脚手架产品名称价格：十进制--skip-stylesheets
   耙分贝：迁移
   rails g bootstrap:themed Products -f
   

9. 使用 WEBrick 在开发模式下运行，
   轨道s
   

希望对某人有所帮助！

Answer 3

我不是一个喜欢铁路的人，但是……你通过了吗

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/

看起来很整洁！