css - 使用 Rails 安装 twitter 引导程序

Question

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

我试着这样做，遵循这个：

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。所以，按照文档，我尝试了这个

宝石安装引导-sass-rails

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

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

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

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

score 3 · Accepted Answer

对于 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 .

score 2 · Accepted Answer

我在“ http://railscasts.com/episodes/328-twitter-bootstrap-basics ”之后遇到了问题，因为在我注意到“2013 年 2 月 6 日更新：设置自本集以来，twitter-bootstrap-rails 的流程发生了变化。查看 README 以获取有关如何设置它的详细信息。”

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

创建一个新的 rails 3.2.x 应用程序，
（如果您是 rvm 粉丝，请使用 rvm）
rails new Store
编辑 Gemfile 和以下内容：
gem "therubyracer"
gem "less-rails"

gem 'twitter-bootstrap-rails'# * *确实对我有用，所以我需要从源中提取

gem 'twitter-bootstrap-rails' , :git => ' https://github.com/seyhunak/twitter-bootstrap-rails.git '
运行捆绑安装
少安装引导程序，rails 生成引导程序：少安装
安装 bootstrap static，
rails 生成 bootstrap:install static
将以下行复制并粘贴到您的“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/navbar.less";
@import "twitter/bootstrap/labels-badges.less";
@import "twitter/bootstrap/hero-unit.less";
@import "twitter/bootstrap/utilities.less";
@import "twitter/bootstrap/responsive";
生成固定或流动的布局，由您选择。
生成模型，
rails g 脚手架产品名称 price:decimal --skip-stylesheets
rake db:migrate
rails g bootstrap:themed Products -f
使用 WEBrick、
rails s在开发模式下运行

希望对某人有所帮助！

score 0 · Accepted Answer

我不是一个铁轨的家伙，但是...你有没有通过

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/

它看起来很整洁！

css - 使用 Rails 安装 twitter 引导程序

3 回答 3

对于 Rails 3：

Related

Reference