spring boot集成bootstrap

時間 2020-09-10

標籤 spring boot 集成 bootstrap 欄目 Spring 简体版

原文原文鏈接

前置環境
基於jpa/mybatis、thymeleaf css

環境搭建
引入bootstrap中的資源文件，css和jshtml

關鍵頁面代碼jquery

目錄結構

2.footer.html和header.htmlspring

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
</head>
<body>

<footer class="blog-footer" data-th-fragment="footer">
<p>Welcome to XXX</a></p>

<script src="../../js/jquery-3.1.1.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
</footer>
</body>
</html>

header.htmlbootstrap

<!DOCTYPE html>
<html lang="en" data-th-fragment="header">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap in action</title>

    <!-- Bootstrap core CSS -->
    <link href="../../css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles -->
    <link href="../../css/blog.css" rel="stylesheet">
</head>
<body>
    <div class="blog-masthead">
        <div class="container">
        <div class="row" >
            <h1>Bootstrap</h1>

            <nav class="nav blog-nav">
              <a class="nav-link active" href="/users">首頁</a>
            </nav>
        </div>
        </div><!-- /.container -->
    </div>
</body>
</html>

3.引用
mybatis

<!DOCTYPE html>
<html xmlns:th="http://×××w.thymeleaf.org"
    xmlns:layout="http://×××w.ultraq.net.nz/thymeleaf/layout">
<head th:replace="~{fragments/header :: header}">
</head>
<body>

    <div class="container">
        <div class="row">

            <h2 th:text="${userModel.title}">Welcome
                to XXX</h2>

        </div><!-- /.row -->

        <div class="row">
            <p>
                <a class="btn btn-primary" href="/users/form.html" role="button">建立用戶</a>
            </p>
        </div><!-- /.row -->

        <div class="row">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <td>ID</td>
                        <td>Age</td>
                        <td>Name</td>
                    </tr>
                </thead>
                <tbody>
                    <tr th:if="${userModel.userList.size()} eq 0">
                        <td colspan="3">沒有用戶信息！！</td>
                    </tr>
                    <tr th:each="user : ${userModel.userList}">
                        <td th:text="${user.id}">111</td>
                        <td th:text="${user.age}">111</td>
                        <td><a href="view.html" th:href="@{'/users/' + ${user.id}}"
                            th:text="${user.name}">XXX</a></td>
                    </tr>
                </tbody>
            </table>
        </div><!-- /.row -->
    </div><!-- /.container -->
    <div th:replace="~{fragments/footer :: footer}">...</div>
</body>
</html>

4.運行效果
ide