在 Rails 应用程序上安装 Bootstrap 3

我正在尝试在我的 Rails 应用程序上安装 Bootstrap 3.0。我最近完成了 Michael Hartl 的教程，现在正在尝试使用这个新版本的 Bootstrap 构建我自己的系统，但是我有几个问题我不确定。

我的系统规格:

  • 基于 MBP 的山狮操作系统
  • Rails 4.0
  • Ruby 2.0

我的问题是:

  1. 什么是最好的宝石使用在我的 Gemfile? 我已经找到了一些。
  2. 我在我的 custom.css.scss上导入了什么? 我在某处读到它与2.3.2不同。
  3. 我还需要做什么才能让 Bootstrap 正常工作吗? 或者剩下的步骤和我在 Bootstrap 2.3.2中所遵循的步骤是一样的吗？

剪辑

以下是 GitHub 上的 bootstrap-ails 项目第一次提出的要做的事情:

gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
:github => 'anjlab/bootstrap-rails'

然后它说:

gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'

他们做同样的事情，还是你必须做他们两个？

102512 次浏览
小开

I think the most up to date gem for the new bootstrap version is form anjlab.

But I don't know if it currently works good with other gems like simple_form when you do rails generate simple_form:install --bootstrap, etc. you may have to edit some initializers or configurations to fit the new bootstrap version.

小开
最佳答案

Actually you don't need gem for this, here is the step to install Bootstrap 3 in RoR

  • Download Bootstrap

  • Copy:

    bootstrap-dist/css/bootstrap.css and bootstrap-dist/css/bootstrap.min.css

    To: vendor/assets/stylesheets

  • Copy:

    bootstrap-dist/js/bootstrap.js and bootstrap-dist/js/bootstrap.min.js

    To: vendor/assets/javascripts

  • Update: app/assets/stylesheets/application.css by adding:

    *= require bootstrap.min

  • Update: app/assets/javascripts/application.jsby adding:

    //= require bootstrap.min

With this you can update bootstrap any time you want, don't need to wait gem to be updated. Also with this approach assets pipeline will use minified versions in production.

小开

I use https://github.com/yabawock/bootstrap-sass-rails

Which is pretty much straight forward install, fast gem updates and followups and quick fixes in case is needed.

小开

This answer is for those of you looking to Install Bootstrap 3 in your Rails app without using a gem. There are two simple ways to do this that take less than 10 minutes. Pick the one that suites your needs best. Glyphicons and Javascript work and I've tested them with the latest beta of Rails 4.1.0 as well.

  1. Using Bootstrap 3 with Rails 4 - The Bootstrap 3 files are copied into the vendor directory of your application.

  2. Adding Bootstrap from a CDN to your Rails application - The Bootstrap 3 files are served from the Bootstrap CDN.

Number 2 above is the most flexible. All you need to do is change the version number that is stored in a layout helper. So you can run the Bootstrap version of your choice, whether that is 3.0.0, 3.0.3 or even older Bootstrap 2 releases.

小开

As many know, there is no need for a gem.

Steps to take:

  1. Download Bootstrap

  2. Copy 

    bootstrap/dist/css/bootstrap.css
bootstrap/dist/css/bootstrap.min.css

    to: app/assets/stylesheets

  3. Copy 

    bootstrap/dist/js/bootstrap.js
bootstrap/dist/js/bootstrap.min.js

    to: app/assets/javascripts

  4. Append to: app/assets/stylesheets/application.css

    *= require bootstrap

  5. Append to: app/assets/javascripts/application.js

    //= require bootstrap

That is all. You are ready to add a new cool Bootstrap template.

Why app/ instead of vendor/?

It is important to add the files to app/assets, so in the future you'll be able to overwrite Bootstrap styles.

If later you want to add a custom.css.scss file with custom styles. You'll have something similar to this in application.css:

 *= require bootstrap
*= require custom

If you placed the bootstrap files in app/assets, everything works as expected. But, if you placed them in vendor/assets, the Bootstrap files will be loaded last. Like this:

<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet">
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet">

So, some of your customizations won't be used as the Bootstrap styles will override them.

Reason behind this

Rails will search for assets in many locations; to get a list of this locations you can do this:

$ rails console
> Rails.application.config.assets.paths

In the output you'll see that app/assets takes precedence, thus loading it first.

小开

Twitter now has a sass-ready version of bootstrap with gem included, so it is easier than ever to add it to Rails.

Simply add to your gemfile the following:

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

bundle install and restart your server to make the files available through the pipeline.

There is also support for compass and sass-only: https://github.com/twbs/bootstrap-sass

小开

gem bootstrap-sass

bootstrap-sass is easy to drop into Rails with the asset pipeline.

In your Gemfile you need to add the bootstrap-sass gem, and ensure that the sass-rails gem is present - it is added to new Rails applications by default.

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2 gem 'bootstrap-sass', '~> 3.0.3.0'

bundle install and restart your server to make the files available through the pipeline.

Source: http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames

小开

Using this branch will hopefully solve the problem:

gem 'twitter-bootstrap-rails',
git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
branch: 'bootstrap3'
小开

For me, the simplest way to do this is

1) Download and unzip bootstrap into vendor

2) Add the bootstrap path to your config

config.assets.paths << Rails.root.join("vendor/bootstrap-3.3.6-dist")

3) Require them

in css *= require css/bootstrap

in js //= require js/bootstrap

Done!

This methods makes the fonts load without any other special configuration and doesn't require moving the bootstrap files out of their self-contained directory.

小开

I actually had an easy workaround on this one in which I nearly scratch my head on how to make it work. hahah!

Well, first I downloaded Bootstrap (the compiled css and js version).

Then I pasted all the bootstrap css files to the app/assets/stylesheets/.

And then I pasted all the bootstrap js files to the app/assets/javascripts/.

I reloaded the page and wallah! I just added bootstrap in my RoR!


提交答案