SpringBoot+Thymeleaf+Bootstrap

最新推荐文章于 2023-11-13 09:18:31 发布

Qfoom

最新推荐文章于 2023-11-13 09:18:31 发布

阅读量774

点赞数

分类专栏：前端文章标签： bootstrap html javascript

本文链接：https://blog.csdn.net/Qfoom/article/details/112288730

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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.csdn.net/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>

Qfoom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot+Thymeleaf+Bootstrap

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <meta charset="utf-8"> <title>Title</title>  <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet"&
复制链接

扫一扫

专栏目录