Question

我正在学习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相关的宝石，那么将这些Bootstrap文件放入我的Rails项目的最佳方法是什么？感谢。

Answer 1

首先，您应该将Bootstrap源文件移动到Rails应用程序的assets文件夹中的相应位置 - 即stylesheets文件夹中的CSS文件，javascripts中的JS和图像在images。

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

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

Rails Guide for the Asset Pipeline概述了在资产中编码路径的正确方法。如果您只使用CSS，则应在文件名中添加.erb扩展名（以获取bootstrap.css.erb）并执行以下操作：

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

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

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

Answer 2

我遇到了同样的麻烦，并且不想安装宝石等。

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

只需覆盖自定义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 /（或任何你想要的地方），你就完成了。

Answer 3

您必须将每个Glyphicons图标更改为资源路径。这是很多工作。此外，您必须使用LESS，因此使用rails的最简单的使用bootstrap的方法是使用gem。这是宝石，我使用宝石'twitter-bootstrap-rails'这个宝石还包括font awesome所以检查这个

Answer 4

重定向routes.rb

中的来电

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

这会将/img的呼叫重定向到/assets

Answer 5

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

在你的情况下：

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

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

如何在我的Rails项目中手动包含twitter bootstrap（不使用任何宝石）？

5 个答案: