thymeleaf 项目中的引导模式答案

【问题标题】：Bootstrap modal in thymeleaf projectthymeleaf 项目中的引导模式
【发布时间】：2013-07-30 15:19:25
【问题描述】：

我有这个页面的 maven+spring+thymeleaf+bootstrap 项目：

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Index</title>
<meta name="description" content="app" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

    <link href="css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    <link rel="stylesheet" href="../../css/bootstrap.css" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" href="../../css/bootstrap-responsive.css" th:href="@{/css/bootstrap-responsive.css}"/>
    <link rel="stylesheet" href="../../css/bootstrap-responsive.min.css" th:href="@{/css/bootstrap-responsive.min.css}"/>
    <link rel="stylesheet" href="../../css/bootstrap-modal.css" th:href="@{/css/bootstrap-modal.css}"/>
    <script src="../../js/modernizr-2.0.6.min.js"  type="text/javascript" th:src="@{/js/modernizr-2.0.6.min.js}"></script>
    <script src="../../js/bootstrap.min.js"  type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <script src="../../js/bootstrap.js"  type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
    <script src="../../js/jquery-2.0.3.js" th:src="@{/js/jquery-2.0.3.js}"></script>


</head>

<body>
<div class="navbar">
              <div class="navbar-inner">
                <div class="container">
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a class="brand" href="#">Lau</a>
                  <div class="nav-collapse collapse navbar-responsive-collapse">


                    <ul class="nav pull-right">



                      <li><a href="/BusinessPoint/sign_in" th:text="#{msg.sign_in}">Sign in</a></li>
                      <li class="divider-vertical"></li>
                      <li><a href="" th:text="#{msg.register}">Register</a></li>
                      <li><a href="#myModal" th:text="#{msg.register_company}">Register company</a></li>
                    </ul>
                  </div>
                </div>
              </div><!-- /navbar-inner -->
            </div>

  <h1 th:text="${serverTime}"></h1>


      <a href="#modalwin" data-toggle="modal" class="btn btn-large">Display Window</a>


<!-- first modal window -->
    <div id="modalwin" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <header class="modal-header">
        <a href="#" class="close" data-dismiss="modal">x</a>
        <h3>Prepare to be Amazed <small>or easily amused :]</small></h3>
      </header>

      <div class="modal-body">

        <p>Close me by clicking anywhere outside the window, or by clicking the blue button.</p>

        <p>lool</p>
      </div>

      <footer class="modal-footer">
        <a href="#" class="btn btn-primary" id="okwin01">Sounds Good!</a>
      </footer>
    </div> <!-- @end @modalwin -->



</body>
</html>

而且我无法显示引导模式。我还看到了什么？我的按钮附近的字符... 我已经包含了所有必要的文件。 css文件还可以，我猜js文件也是。我尝试了evertything，没有结果。有什么想法吗？

文件来源：

<!DOCTYPE html>


<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Index</title>
<meta name="description" content="app" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

    <link href="/BusinessPoint/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/BusinessPoint/css/bootstrap.css" />
    <link rel="stylesheet" href="/BusinessPoint/css/bootstrap-responsive.css" />
    <link rel="stylesheet" href="/BusinessPoint/css/bootstrap-responsive.min.css" />
    <script src="/BusinessPoint/js/modernizr-2.0.6.min.js" type="text/javascript"></script>
    <script src="/BusinessPoint/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/BusinessPoint/js/bootstrap.js" type="text/javascript"></script>
    <script src="/BusinessPoint/js/bootstrap-modal.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<body>
<div class="navbar">
              <div class="navbar-inner">
                <div class="container">
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a class="brand" href="#">Laud</a>
                  <div class="nav-collapse collapse navbar-responsive-collapse">


                    <ul class="nav pull-right">



                      <li><a href="/BusinessPoint/sign_in">Sign in</a></li>
                      <li class="divider-vertical"></li>
                      <li><a href="">Register</a></li>
                      <li><a href="#myModal">Register company</a></li>
                    </ul>
                  </div>
                </div>
              </div><!-- /navbar-inner -->
            </div>

  <h1>July 31, 2013 4:24:24 PM CEST</h1>



<div id="w" class="container center">

<!-- first modal window -->
    <div id="modalwin" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <header class="modal-header">
        <a href="#" class="close" data-dismiss="modal">x</a>
        <h3>Prepare to be Amazed <small>or easily amused :]</small></h3>
      </header>




    </div> 

<a href="#modalwin" data-toggle="modal" class="btn btn-large">Display Window</a>
?

</div>
</body>
</html>

【问题讨论】：

hum...我们能看到渲染出来的 html 来自 thymeleaf 的样子吗？
现在，浏览器生成的文件源在主帖中。
在加载任何 js 之前加载 jquery.js。即使它像下面<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="/BusinessPoint/js/modernizr-2.0.6.min.js" type="text/javascript"></script> <script src="/BusinessPoint/js/bootstrap.min.js" type="text/javascript"></script> <script src="/BusinessPoint/js/bootstrap.js" type="text/javascript"></script> <script src="/BusinessPoint/js/bootstrap-modal.js"></script>

标签： java javascript spring twitter-bootstrap thymeleaf

【解决方案1】：

我遇到了同样的问题。确保在关闭 body 标记之前导入 AJAX 和 Bootstrap，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>

这在头部分：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我不确定这里有什么问题，但它确实有效。另一方面，当我将所有行移动到 head 标签时它不起作用。

【讨论】：