如何手动将 twitter bootstrap 包含在我的 Rails 项目中(不使用任何 gem)? [英] How to include twitter bootstrap in my Rails project manually (without using any gems)?

问题描述

我正在学习 Rails 并想使用 Rails 和 Twitter Bootstrap.我的 Rails 项目布局是:

I'm learning Rails and want to play with Rails and Twitter Bootstrap. My Rails project layout is:

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

Twitter Bootstrap 布局是:

The Twitter Bootstrap layout is:

├─css
├─img
└─js

我知道Bootstrap css文件引用了它的图片文件，比如:

I know Bootstrap css file references its image file, such as:

[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 项目的最佳方法是什么?谢谢.

So they must retain there relative position, or I have to change the CSS file. I want to know, if I don't want to use any Bootstrap related gems, what's the best way to place these Bootstrap files into my Rails project? Thanks.

推荐答案

首先，您可能应该将 Bootstrap 源文件移动到 Rails 应用程序资产文件夹中的适当位置 - 即 中的 CSS 文件stylesheets 文件夹，javascripts 中的 JS，images 中的图片.

First, you should probably move the Bootstrap source files to their appropriate locations in the assets folder in your Rails app - that is, CSS files in the stylesheets folder, JS in javascripts, and images in images.

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

As mentioned already, you'll need to change paths to images in Bootstrap's CSS. However, you'll need to make use of Rails' asset path helpers if you plan on using your app in production.

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

For example, background-image: url('../images/glyphicons-halflings.png'); is absolutely incorrect when using the asset pipeline. This will work fine in development, but as soon as you pre-compile assets for a production environment things won't work - Rails appends fingerprints to asset file names for caching purposes, which makes the URL above incorrect.

在资产管道的 Rails 指南.如果您只使用 CSS，您应该将 .erb 扩展名添加到您的文件名(以获得 bootstrap.css.erb)并执行如下操作:

The correct way to code paths in your assets is outlined in the Rails Guide for the Asset Pipeline. If you're using CSS only, you should add the .erb extension to your filename (to get bootstrap.css.erb) and do something like this:

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

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

If you are using SASS/SCSS, you can also use the built-in asset-path or image-path helpers. Again, this is mentioned in the guide I linked to above.

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

In the end, you probably should be using a gem, as this work will already be done for you. But, if you must, this should work well enough. Of course, if you ever want to update Bootstrap, you'll have to do this again.

这篇关于如何手动将 twitter bootstrap 包含在我的 Rails 项目中(不使用任何 gem)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！