2

我正在学习 Rails，想玩 Rails 和 Twitter Bootstrap。我的 Rails 项目布局是：

├─assets
│  ├─images
│  ├─javascripts
│  └─stylesheets
├─controllers
├─helpers
├─mailers
├─models
└─views
    ├─course
    └─layouts

Twitter Bootstrap 布局是：

├─css
├─img
└─js

我知道 Bootstrap css 文件引用了它的图像文件，例如：

[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
  margin-top: 1px;
}

所以他们必须保留那里的相对位置，否则我必须更改 CSS 文件。我想知道，如果我不想使用任何与 Bootstrap 相关的 gem，将这些 Bootstrap 文件放入我的 Rails 项目的最佳方法是什么？谢谢。

4

5 回答 5

3

首先，您可能应该将 Bootstrap 源文件移动到 Rails 应用程序中 assets 文件夹中的适当位置 - 即文件stylesheets夹中的 CSS 文件、 JSjavascripts和 中的图像images。

如前所述，您需要在 Bootstrap 的 CSS 中更改图像的路径。但是，如果您计划在生产环境中使用您的应用程序，则需要使用 Rails 的资产路径助手。

例如，background-image: url('../images/glyphicons-halflings.png');在使用资产管道时是绝对不正确的。这在开发中可以正常工作，但是一旦您为生产环境预编译资产，事情就不起作用了——Rails 将指纹附加到资产文件名以进行缓存，这使得上面的 URL 不正确。

资产管道的 Rails 指南中概述了在资产中编码路径的正确方法。如果您只使用 CSS，您应该将.erb扩展名添加到您的文件名（以获取bootstrap.css.erb）并执行以下操作：

background-image: url(<%= asset_path 'glyphicons-halflings.png' %>);

如果您使用的是 SASS/SCSS，您也可以使用内置的asset-path或image-path帮助程序。同样，我在上面链接到的指南中也提到了这一点。

最后，您可能应该使用 gem，因为这项工作已经为您完成。但是，如果你必须这样做，这应该足够好。当然，如果您想更新 Bootstrap，则必须再次执行此操作。

于 2012-12-12T19:44:15.763 回答
3

我遇到了同样的麻烦，不想安装 gem 等。

有一个更简单的解决方案。

只需覆盖自定义 CSS 中背景图像的图标选择器。

[class^="icon-"], [class*=" icon-"] {
  background-image: url("/assets/img/glyphicons-halflings.png");
}
[class^="icon-white"], [class*=" icon-white"] {
  background-image: url("/assets/img/glyphicons-halflings-white.png");
}

将 glyphicons PNG 放在 app/assets/images/img/ （或任何你想要的地方），你就完成了。

于 2013-04-05T04:43:21.350 回答
2

您必须将每个 Glyphicons 图标更改为资产路径。这是很多工作。此外，您必须使用 LESS，因此使用带有 rails 的引导程序的最简单方法是使用 gem。这是我使用 gem 'twitter-bootstrap-rails' 的 gem 这个 gem 还包括很棒的字体所以也检查一下

于 2012-12-12T21:12:19.230 回答
1

重定向来电routes.rb

  get '/img/:name', to: redirect {|params, req| "/assets/#{params[:name]}.#{params[:format]}" }

这会将调用重定向/img到/assets

于 2013-07-21T14:28:30.073 回答
0

您可以将 css 和 js 文件放在项目中的任何位置，因为它们不会相互引用，但是，您必须更新 css 文件中的 glypicon 引用。

在你的情况下：

background-image: url("../images/glyphicons-halflings.png");

编辑：我更新了路径。我最初包含了与您给定的目录结构不正确的“资产”。

于 2012-12-12T19:23:42.050 回答