2

我已按照此处的步骤将 bootstrap v2.1.0 与 play 2 框架一起使用，并且我使用了 Build.scala 配置文件。我可以很好地使用基本的 css 函数，对此我很满意。当我尝试使用 glyphicons 图标和 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

对我来说，你的图像配置没问题，请展示一些 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 回答
1

使用图像的相对路径：

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