当前位置：theitroad>Ruby-on-rails 在 Rails 应用程序上安装 Bootstrap 3

Ruby-on-rails 在 Rails 应用程序上安装 Bootstrap 3

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/18371318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-09-02 22:34:37 　来源:igfitidea点击:

Installing Bootstrap 3 on Rails App

ruby-on-railsrubytwitter-bootstrap-3

提问by megashigger

I'm trying to install Bootstrap 3.0 on my Rails app. I recently finished Michael Hartl's tutorial and am now trying to build my own system using this new version of Bootstrap, but I have a few questions that I'm not sure about.

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

My system specs:

我的系统规格：

  • OS X Mountain Lion on MBP
  • Rails 4.0
  • Ruby 2.0
  • MBP 上的 OS X Mountain Lion
  • 导轨 4.0
  • 红宝石 2.0

Questions I have:

我的问题：

  1. What is the best gem to use in my Gemfile? I have found a few of them.
  2. What do I import on my custom.css.scss? I read somewhere that it's different from 2.3.2.
  3. Is there anything else I have to do to get Bootstrap to work, or are the remaining steps identical to the ones I followed for Bootstrap 2.3.2?
  1. 在我的 Gemfile 中使用的最佳 gem 是什么？我找到了其中的一些。
  2. 我要导入什么custom.css.scss？我在某处读到它与 2.3.2 不同。
  3. 我还需要做些什么才能使 Bootstrap 正常工作，或者其余步骤与我在 Bootstrap 2.3.2 中遵循的步骤相同吗？

Edit

编辑

Here is what the bootstrap-rails project on GitHubfirst says to do:

以下是GitHub 上的bootstrap-rails 项目首先说要做的事情：

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

Then it says to do:

然后它说要做：

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

Do they do the same thing, or do you have to do them both?

他们做同样的事情，还是你必须同时做它们？

回答by hawk

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

实际上你不需要gem，这是在RoR中安装Bootstrap 3的步骤

  • DownloadBootstrap

  • Copy:

    bootstrap-dist/css/bootstrap.cssand bootstrap-dist/css/bootstrap.min.css

    To: vendor/assets/stylesheets

  • Copy:

    bootstrap-dist/js/bootstrap.jsand bootstrap-dist/js/bootstrap.min.js

    To: vendor/assets/javascripts

  • Update:app/assets/stylesheets/application.cssby adding:

    *= require bootstrap.min

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

    //= require bootstrap.min

  • 下载引导程序

  • 复制：

    bootstrap-dist/css/bootstrap.css和 bootstrap-dist/css/bootstrap.min.css

    到： vendor/assets/stylesheets

  • 复制：

    bootstrap-dist/js/bootstrap.js和 bootstrap-dist/js/bootstrap.min.js

    到： vendor/assets/javascripts

  • 更新：app/assets/stylesheets/application.css通过添加：

    *= require bootstrap.min

  • 更新：app/assets/javascripts/application.js通过添加：

    //= 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.

有了这个，您可以随时更新引导程序，无需等待 gem 更新。同样使用这种方法，资产管道将在生产中使用缩小版本。

回答by givanse

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

  1. 下载引导程序

  2. 复制 

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

    到： app/assets/stylesheets

  3. 复制 

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

    到： app/assets/javascripts

  4. 附加到： app/assets/stylesheets/application.css

    *= 需要引导程序

  5. 附加到： app/assets/javascripts/application.js

    //= 需要引导程序

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

就这些。您已准备好添加一个新的很酷的 Bootstrap 模板。

Why app/instead of vendor/?

为什么app/而不是vendor/？

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

将文件添加到app/assets很重要，因此将来您将能够覆盖 Bootstrap 样式。

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

如果以后要添加custom.css.scss具有自定义样式的文件。您将在以下内容中获得与此类似的内容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:

如果您将引导程序文件放在app/assets 中，则一切都会按预期进行。但是，如果您将它们放在vendor/assets 中，则 Bootstrap 文件将最后加载。像这样：

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

因此，您的某些自定义将不会被使用，因为 Bootstrap 样式将覆盖它们。

Reason behind this

这背后的原因

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

Rails 会在很多地方搜索资源；要获取此位置的列表，您可以执行以下操作：

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

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

在输出中，您将看到app/assets优先，因此首先加载它。

回答by rvg

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.

这个答案适用于那些希望在不使用 gem 的情况下在 Rails 应用程序中安装 Bootstrap 3 的人。有两种简单的方法可以在不到 10 分钟的时间内完成此操作。选择最适合您需求的那一款。Glyphicons 和 Javascript 可以工作，我也用最新的 Rails 4.1.0 测试版对它们进行了测试。

  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.

  1. 在 Rails 4 中使用 Bootstrap 3- Bootstrap 3 文件被复制到应用程序的供应商目录中。

  2. 将 Bootstrap 从 CDN 添加到 Rails 应用程序- Bootstrap 3 文件由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.

上面的数字 2 是最灵活的。您需要做的就是更改存储在布局助手中的版本号。因此，您可以运行您选择的 Bootstrap 版本，无论是 3.0.0、3.0.3 还是更早的 Bootstrap 2 版本。

回答by Eneko Alonso

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

Twitter 现在有一个包含 gem的sass-ready 版本的引导程序，因此将它添加到 Rails 比以往任何时候都容易。

Simply add to your gemfile the following:

只需将以下内容添加到您的 gemfile 中：

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

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

bundle install并重新启动服务器以使文件通过管道可用。

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

还支持指南针和 sass-only：https: //github.com/twbs/bootstrap-sass

回答by Nick Ginanto

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

我使用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.

这是非常直接的安装，快速的 gem 更新和跟进以及需要时的快速修复。

回答by Bruno

gem bootstrap-sass

gem bootstrap-sass

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

bootstrap-sass 很容易通过资产管道放入 Rails。

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.

在您的 Gemfile 中，您需要添加 bootstrap-sass gem，并确保 sass-rails gem 存在 - 默认情况下它会添加到新的 Rails 应用程序中。

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

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

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

bundle install并重新启动服务器以使文件通过管道可用。

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

来源：http: //rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames

回答by chanakya devraj

Using this branch will hopefully solve the problem:

使用这个分支有望解决问题：

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

回答by vinhboy

For me, the simplest way to do this is

对我来说，最简单的方法是

1) Download and unzip bootstrap into vendor

1) 下载并解压 bootstrap vendor

2) Add the bootstrap path to your config

2）将引导程序路径添加到您的配置中

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

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

3) Require them

3）要求他们

in css *= require css/bootstrap

在 CSS 中 *= require css/bootstrap

in js //= require js/bootstrap

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

此方法使字体无需任何其他特殊配置即可加载，并且不需要将引导程序文件移出其自包含目录。

回答by tbraun89

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

我认为新引导程序版本的最新 gem 是 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.

但我不知道它目前是否适用于其他 gem，例如 simple_form 当你这样做时rails generate simple_form:install --bootstrap，等等。你可能需要编辑一些初始值设定项或配置以适应新的引导程序版本。

回答by therealadrain

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

好吧，首先我下载了​​ Bootstrap（编译后的 css 和 js 版本）。

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

然后我将所有引导 css 文件粘贴到app/assets/stylesheets/.

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

然后我将所有引导程序 js 文件粘贴到app/assets/javascripts/.

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

我重新加载了页面和wallah！我刚刚在我的 RoR 中添加了引导程序！

相关推荐

Ruby-on-rails Rails：将数据传递给 javascript

Ruby-on-rails Rails：将数据传递给 javascript

限制视图中的字符/单词 - ruby​​ on rails

限制视图中的字符/单词 - ruby​​ on rails

Ruby-on-rails 如何在 rails 控制台中使用 FactoryGirl 的工厂

Ruby-on-rails 如何在 rails 控制台中使用 FactoryGirl 的工厂

Ruby-on-rails 如何将自定义 RESTful 路由添加到 Rails 应用程序？

Ruby-on-rails 如何将自定义 RESTful 路由添加到 Rails 应用程序？

相关推荐
最近更新
标签