2

ここでの手順に従って、play 2フレームワークでブートストラップv2.1.0を使用し、Build.scala構成ファイルを使用しました。基本的なcss関数を非常にうまく使用でき、これに満足しています。グリフィコンのアイコンとJavaScript関数を使用しようとすると、使用できなくなりますが、同じ問題が発生したことはありますか？これについて私を助けてください。

ファイル構造：

app/assets/stylesheets/bootstrap/ <<--- all less files are here

public/images/bootstrap/ <<-- glyphicons images are here

public/javascripts/    <<--- all javascripts are here

チュートリアルによると、私はvariables.lessを次のように変更しました：

@iconSpritePath:          "/assets/images/bootstrap/glyphicons-halflings.png";
@iconWhiteSpritePath:     "/assets/images/bootstrap/glyphicons-halflings-white.png";

私はjavascriptを追加するためのコードにはほとんど関心がありません：

for i in `ls javascripts/*`; do echo '<script src="@routes.Assets.at("'$i'")"></script>' | sed 's/\.js/.min.js/g'; done

正確にどこに追加する必要がありますか？

私の質問に欠陥がある場合は失礼します。これについて何か助けていただければ幸いです。ありがとう。

--------------------[編集]--------------------------メイン見る

<!DOCTYPE html>

<html>
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap/bootstrap.min.css")" />
        <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    </head>
    <body>
        @content

        <script src="@routes.Assets.at("javascripts/bootstrap-affix.min.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-alert.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-button.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-carousel.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-collapse.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-dropdown.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-modal.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-popover.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-scrollspy.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-tab.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-tooltip.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-transition.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-typeahead.min.js")"></script>
<script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.min.js")"></script>
    </body>
</html>

----------------------------その他のビュー-------------------- --------

<script type="text/javascript">
        $(function(){
         $('#nishi').popover();
        });
        </script>


  <a href="#" id="nishi" class="btn btn-primary" rel="popover" data-content="this is the body" data-original-title="this shoul be title">Check pop over</a>
4

2 に答える 2

1

画像に相対パスを使用します。

// Sprite icons path
// -------------------------
@iconSpritePath:          "../../images/bootstrap/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../../images/bootstrap/glyphicons-halflings-white.png";
于 2012-08-25T15:35:26.617 に答える
1

私にとっては、あなたの画像構成は問題ありません。使用方法を HTML 形式で示してください。

JavaScript については、HTML テンプレートで次のように使用します (必要な Bootstrap の JavaScript を備えた例を次に示します)。

<html>
   <head>
      ...
      <script src="@routes.Assets.at("javascripts/bootstrap-dropdown.js")" type="text/javascript"></script>
      <script src="@routes.Assets.at("javascripts/bootstrap-alert.js")" type="text/javascript"></script>
      <!-- Add other needed Bootstrap's javascripts-->
      ...
   </head>
<body>...
于 2012-08-25T14:49:11.297 に答える