Question

我已经按照步骤here使用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

根据教程，我修改了变量。无：

@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>

Answer 1

对我来说，你的图片配置还可以，请显示一些HTML colde如何使用它。

对于javascripts，在HTML模板中使用它们（这是一个示例，包含您需要的Bootstrap的javascripts）：

<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>...

Answer 2

使用图像的相对路径：

// Sprite icons path
// -------------------------
@iconSpritePath:          "../../images/bootstrap/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../../images/bootstrap/glyphicons-halflings-white.png";

Twitter Bootstrap v2.1.0播放框架2 - 图像和JavaScript插件无法正常工作

2 个答案: