个人中心
gpt4 book ai didi

java - thymeleaf 项目中的 Bootstrap 模式

转载 作者：行者123 更新时间：2023-11-28 08:59:25 24 4
gpt4 key购买 nike

我有一个包含此页面的 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>

而且我无法显示 Bootstrap 模式。我还看到什么？我的按钮附近的 Angular 色...我已包含所有必要的文件。 CSS 文件没问题，我想 js 文件也可以。我尝试了一切但没有结果。有什么想法吗？

文件来源:

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

最佳答案

我也遇到了同样的问题。确保在关闭 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 标记时，它不起作用。

关于java - thymeleaf 项目中的 Bootstrap 模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17951009/

24 4 0
文章推荐： javascript - firefox:使用文件协议(protocol)下载javascript文件？
文章推荐： ios - 当我在 Parse 中创建任何对象时，createdAt 属性不是正确的创建时间。
文章推荐： CSS:删除线未通过文本居中
文章推荐： css - 移动网站上的 Html Css 页脚
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com