thymelaf项目中的引导模式
Bootstrap modal in thymeleaf project
我有maven+spring+thymelaf+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文件也可以。我什么都试过了，但没有结果。有什么想法吗？
文件来源：
<!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标签时，它不起作用。
相关文章：
- 正在将数据主题添加到所有项目
- Javascript，访问一个主要对象模块模式中的每个对象
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 无法加载Ace.js编辑器模式和主题(命名空间项目&AMD require.js&grunt
- 在量角器测试中验证引导模式上的项目
- PHP根据用户选择的项目以模式加载数据
- 具有依赖项目源的超级开发模式
- Angular 1.3 中是否有更好的模式，可以在每次修改 ng-repeat 中的项目时调用函数
- jQuery同位素没有在fitColumns布局模式中对齐大宽度项目
- Knockout JS-获取一个模式弹出窗口来编辑项目
- 将项目迁移到使用“;严格模式”;
- thymelaf项目中的引导模式
- 我的Bootstrap模式锚不是从一个菜单(导航栏)的行项目内工作
- 关闭HTML点击模式，跨大型项目
- 我如何确保我的项目中的所有JSON模式都是有效的
- Bootstrap模式并没有留在我的ruby on rails项目中
- 从引导模式获取页面中选定的项目
- 正在绑定我的JS/TS项目反模式
- 我如何专业地构建我的模块模式Javascript项目
- JQuery引导模式窗口以某种方式重载/清除Ruby on Rails项目中的父字段
