SpringBoot+Thymeleaf+Bootstrap

最新推荐文章于 2022-10-16 19:22:50 发布

原创最新推荐文章于 2022-10-16 19:22:50 发布 · 875 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #html #javascript

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Thymeleaf模板引擎中使用Bootstrap进行网页布局，包括引入CSS和JS文件，创建响应式布局。同时，展示了在网页间通过jQuery Cookie传递数据的方法，以及如何引入Layui框架以增强前端功能。通过实例代码，详细阐述了每个技术的用法和应用场景。

1 使用Bootstrap

使用thymeleaf一定要引入命名空间,如下:

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

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">

    <title>Title</title>
    <!-- Bootstrap -->
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" rel="stylesheet">

    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.js}"></script>

</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3"
             style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-xs-6 col-sm-3"
             style="background-color: #dedef8;box-shadow:
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut.
            </p>
        </div>

        <div class="clearfix visible-xs"></div>

        <div class="col-xs-6 col-sm-3"
             style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
        <div class="col-xs-6 col-sm-3"
             style="background-color: #dedef8;box-shadow:
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim
            </p>
        </div>
    </div>


</div>

</body>
</html>

spring:
  #thymeleaf配置
#  thymeleaf:
#    cache: false
#    prefix: classpath:/templates/
#    suffix: .html
#    encoding: utf-8
#    mode: HTML
#    servlet:
#      content-type: text/html
#  #springboot 引入js 和css 失效问题
#  mvc:
#    static-path-pattern: /static/**

2 使用cookie

参考:https://blog.youkuaiyun.com/qq_29207823/article/details/81745757

 <script type="text/javascript" th:src="@{js/jquery.cookie.js}"></script>

前一个页面设置cookie

      $.cookie('name',name);

后一个页面获取cookie

<div>当前用户为:<p id="account"></p></div>

<script type="application/javascript">
    var  email;
    // 页面加载后从cookie获取上一个页面传递的邮箱地址
    $(function (){
        email = $.cookie('name');
        // alert(email)
        $("#account").html(email);
    });
</script>

3 使用layui


<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <!-- layui -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>