112

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

我的系统规格：

  • MBP 上的 OS X 山狮
  • 导轨 4.0
  • 红宝石 2.0

我的问题：

  1. 在我的 Gemfile 中使用的最佳 gem 是什么？我找到了其中的一些。
  2. 我在我的 上导入什么custom.css.scss？我在某处读到它与 2.3.2 不同。
  3. 为了让 Bootstrap 工作，我还需要做些什么，或者其余步骤是否与我为 Bootstrap 2.3.2 遵循的步骤相同？

编辑

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

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

然后它说要做：

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

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

4

10 回答 10

272

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

  • 下载引导程序

  • 复制：

    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

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

于 2013-08-22T04:06:15.097 回答
63

众所周知，不需要宝石。

采取的步骤：

  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

    //= 需要引导

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

为什么app/而不是vendor/？

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

如果稍后您想添加custom.css.scss具有自定义样式的文件。你会有类似的东西application.css：

 *= require bootstrap                                                            
 *= require custom

如果您将引导文件放在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">

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

这背后的原因

Rails 将在许多位置搜索资产；要获取此位置的列表，您可以执行以下操作：

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

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

于 2013-12-18T15:04:36.327 回答
35

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

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

  2. 将 Bootstrap 从 CDN 添加到 Rails 应用程序- Bootstrap 3 文件由Bootstrap CDN 提供。

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

于 2013-11-09T21:16:12.740 回答
22

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

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

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

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

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

于 2014-01-02T03:07:02.840 回答
11

我使用https://github.com/yabawock/bootstrap-sass-rails

这是非常直接的安装，快速的 gem 更新和跟进以及快速修复，以防万一。

于 2013-08-22T04:29:45.110 回答
5

gem bootstrap-sass

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

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

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

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

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

于 2014-01-16T22:46:29.510 回答
3

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

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'
于 2014-07-18T10:19:47.460 回答
3

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

1）下载bootstrap并解压到vendor

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

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

3) 要求他们

在 CSS 中*= require css/bootstrap

在js中//= require js/bootstrap

完毕！

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

于 2015-12-14T16:37:37.163 回答
1

我认为新引导版本的最新 gem 是 form anjlab。

但是我不知道它目前是否可以与 simple_form 等其他 gem 一起使用rails generate simple_form:install --bootstrap，等等。您可能需要编辑一些初始化程序或配置以适应新的引导程序版本。

于 2013-08-22T03:50:14.137 回答
0

实际上，我对此有一个简单的解决方法，其中我几乎挠头不知道如何使它工作。哈哈哈！

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

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

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

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

于 2018-07-23T12:38:45.030 回答