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

私は同じ問題に遭遇し、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 に答える
3

まず、おそらく Bootstrap ソース ファイルを Rails アプリの assets フォルダー内の適切な場所に移動する必要があります。つまり、CSS ファイルはstylesheetsフォルダーに、JS はjavascriptsに、画像は に移動し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 を更新したい場合は、これをもう一度行う必要があります。

于 2012-12-12T19:44:15.763 に答える
2

すべての Glyphicons アイコンをアセット パスに変更する必要があります。それは大変な作業です。また、LESS を使用する必要があるため、レールでブートストラップを使用する最も簡単な方法は 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 ファイル内のグリピコン参照を更新する必要があります。

あなたの場合：

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

編集：パスを更新しました。指定されたディレクトリ構造では正しくない「資産」を最初に含めました。

于 2012-12-12T19:23:42.050 に答える