2

私は初心者なので、助けてください;-)

Twitterのbootstrap.jsフレームワークを使用しようとしている小さなRoR Webアプリケーションを構築しています。

ほとんどすべてが動作するようになりましたが、今後 glyphicons-halflings-white.png または glyphicons-halflings.png になるはずのアイコンが表示されます。

私のフォルダー構造は非常にシンプルで、標準の RoR プロジェクトです。png ファイルを /app/assets/images/ の下に置き、bootstrap.css ファイルを見ると、次のように表示されます。

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

と

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

私のフォルダ構造によれば、これは正しいはずです。

私のhtmlコードには、次のようなものがあります。

<div class="btn-group">
    <button class="btn" id="addTagButton"><i class="icon-tag"></i>Add Tag</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

<i class="icon-tag"></i>タグアイコンを表示するために使用する場所（またはそれを表示したい）

しかし、何も機能していません

不明な理由で、フォルダーにアイコンが表示されません。私は単純../images/glyphicons-halflings.pngにブラウザーのアドレス URL にコピーした場合に png ファイルが表示されるかどうかを確認しようとしていましたが、URL が次の場所を指している場合、「ルートが一致しません [GET] "/images/glyphicons-halflings.png" 」が表示されます。ローカルホスト:3000/images/glyphicons-halflings.png

私のhtml応答は次のようになります。

<!DOCTYPE html>
<html>
<head>
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/chosen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.1.8.20.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.extentions.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/select2.js?body=1" type="text/javascript"></script>
<link href="/assets/select2.css?body=1" media="screen" rel="stylesheet" type="text/css" />
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

  <meta content="authenticity_token" name="csrf-param" />
<meta content="c+czIHCNmepmx674gKldijipFRD9348Gw+R2SAlrpow=" name="csrf-token" />
  <link rel="SHORTCUT ICON" href="/images/favicon.ico">
</head>
<body>
<script src="/assets/jquery.validate.js?body=1" type="text/javascript"></script>
<script src="/assets/jit-yc.js?body=1" type="text/javascript"></script>
<script src="/assets/graphcontrol.js?body=1" type="text/javascript"></script>
<script src="/assets/excanvas.js?body=1" type="text/javascript"></script>

<!--[if IE]><script language="javascript" type="text/javascript" src="/assets/excanvas.js"></script><![endif]-->

<h1>Sandbox#hello</h1>

<div class="btn-group">
    <button class="btn" id="addTagButton"><i class="icon-tag"></i>Add Tag</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>



<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.dropdown-toggle').dropdown();
    });

</script>
</body>
</html>

私は何か間違ったことをしていますか？これらの *.png ファイルを正しくデプロイするように Ruby に強制する必要がありますか?

どんなアドバイスも役に立ちます。

4

5 に答える 5

4

私は同様の問題を抱えていたので、これを行いました：

<i class="icon-shopping-cart glyphw" id="cart"></i>

CSS

.glyphw{
    background-image: url(/assets/glyphicons-halflings-white.png);
}
于 2012-09-19T04:59:06.987 に答える
0

厳重に管理されているbootstrap-sassgem（https://github.com/thomas-mcdonald/bootstrap-sass）を使用するだけで、すべての頭痛の種を救うことができます。

于 2012-09-19T05:15:44.380 に答える
0

このような問題に対して私が使用する解決策 (ベンダー スクリプトが でアセットを見つけようとする/img場合、 /imagesそれらの要求をassetsフォルダーにリダイレクトすることです。さらにroutes.rb:

  get '/img/:name', to: redirect {|params, req| "/assets/#{params[:name]}.#{params[:format]}" }
于 2013-07-21T14:26:15.107 に答える
0 
    @font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot?v=3.0.1');
  src: url('fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

font-awesome.css でフォントディレクトリを正しく設定するだけです

于 2013-02-24T18:21:56.993 に答える
-1

私は自分のプロジェクトで Twitter ブートストラップを使用していますが、これは素晴らしいものです。アイコンを取得する構文は次のとおりです。

<i class="icon icon-tag"></i>

最初の CSS クラス " icon" はアイコンのようなタグを作成するためのもので、2 番目のクラス " icon-tag" はアイコン イメージを表示するためのものです。

于 2012-09-19T04:46:50.627 に答える