Thymeleaf

最新推荐文章于 2023-11-30 16:43:41 发布

kevinittech

最新推荐文章于 2023-11-30 16:43:41 发布

阅读量3.2k

点赞数

分类专栏： Thymeleaf 文章标签： Thymeleaf

本文链接：https://blog.csdn.net/yangyang2183/article/details/52128633

版权

Thymeleaf 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP，或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。接下来，这些标签属性就会在DOM（文档对象模型）上执行预先制定好的逻辑。

一个页面布局示例

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="#{app.name}">XX网</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/application.css"/>
    <script src="/js/js.cookie.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">XX网</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">首页</a></li>
                <li><a href="/crane">找吊车</a></li>
                <li><a href="/forklift">找叉车</a></li>
                <li><a href="/scaffold">找脚手架</a></li>
                <li><a href="/contact">联系我们</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<!-- Begin page content -->
<div layout:fragment="content">
    <h1>Static content for prototyping purposes only</h1>

    <p>
        This is the layout of the site. The actual content will come from individual views making use of this layout
    </p>
</div>

<footer class="footer">
    <div class="container">
        <p class="text-muted" align="center">© 2016  版权所有</p>
    </div>
</footer>


<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>