木子空间

# 常用组件笔记

命名空间

<html lang="en" xmlns:sa="http://www.thymeleaf.org/extras/sa-token" xmlns:th="http://www.w3.org/1999/xhtml">

# 主页

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .sidebar {
            position: fixed;
            top: 56px;
            /* 需要考虑顶部导航栏的高度 */
            bottom: 0;
            left: 0;
            z-index: 100;
            /* 使侧边栏位于顶部导航栏下方 */
            padding-top: 4.5rem;
            padding-bottom: 0.5rem;
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
        }

        .navbar .btn {
            margin-left: 10px;
        }
    </style>
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-dark">
  <a class="navbar-brand text-light" href="#">Your Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto pl-4">
      <li class="nav-item">
        <a class="nav-link text-light" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light" href="#">关于</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light" href="#">服务</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light" href="#">联系方式</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          用户名 <img src="avatar.jpg" class="rounded-circle" width="30" height="30" alt="User Avatar"> <!-- 替换为实际的用户名和头像 -->
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">个人信息</a>
          <a class="dropdown-item" href="#">设置</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">退出</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

    <!-- 侧边导航栏 -->
    <div class="container-fluid">
        <div class="row">
            <nav class="col-md-1 d-none d-md-block sidebar bg-dark">
                <div class="sidebar-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                Dashboard
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Orders
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Products
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Customers
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
                <!-- 主要内容 -->
                <h2>Main Content</h2>
                <p>Here goes your main content...</p>
            </main>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>

# 链接按钮

<div class="col-md-3 text-end">
      <a href="/login" type="button" class="btn btn-outline-primary me-2" sa:notLogin>登录</a>
      <a href="/logout" type="button" class="btn btn-danger" sa:login>退出登录</a>
</div>

# 信息屏幕

            <div class="mt-4 p-5 bg-primary text-white rounded">
                <h1>CMS系統</h1>
                <p>服务于师生学习互动！！！</p>
            </div>

# 表格

<div class="table-responsive">
                <table class="table table-striped table-hover table-borderless table-primary align-middle">
                    <thead class="table-light">
                        <caption>
                            任务书列表一览
                        </caption>
                        <tr>
                            <th>任务书编号</th>
                            <th>课题编号</th>
                            <th>创建者</th>
                            <th>要求</th>
                            <th>截止日期</th>
                            <th sa:hasRole="teacher">完成情况</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody class="table-group-divider">
                        <tr class="table-primary" th:each="t:${tasks}">
                            <td scope="row" th:text="${t.id}">Item</td>
                            <td th:text="${t.topicId}">Item</td>
                            <td th:text="${t.teacher}">Item</td>
                            <td th:text="${t.requirement}">Item</td>
                            <td th:text="${t.deadline}"></td>
                            <td sa:hasRole="teacher"><a th:href="@{/homework/task/{task_id}(task_id=${t.id})}"
                                    th:if="${t.teacher}==${stp.getSession().get('username')}">作业列表</a></td>
                            <td>
                                <span th:if="${t.teacher}==${stp.getSession().get('username')}">
                                    <a name="" id="" class="btn btn-primary" th:href="@{/task/edit/{id}(id=${t.id})}"
                                        role="button">编辑</a>
                                    <a name="" id="" class="btn btn-danger" th:href="@{/task/delete/{id}(id=${t.id})}"
                                        role="button">删除</a>
                                </span>
                                <span sa:hasRole="admin">
                                    <a name="" id="" class="btn btn-primary" th:href="@{/task/edit/{id}(id=${t.id})}"
                                        role="button">编辑</a>
                                    <a name="" id="" class="btn btn-danger" th:href="@{/task/delete/{id}(id=${t.id})}"
                                        role="button">删除</a>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                    </tfoot>
                </table>
            </div>

# 弹窗

        <!-- Modal Body -->
        <!-- if you want to close by clicking outside the modal, delete the last endpoint:data-bs-backdrop and data-bs-keyboard -->
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalId"
                    sa:hasRole="teacher">我要发布</button>

        <div class="modal fade" id="modalId" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"
            role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitleId">
                            新增任务书：
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="/task/add" method="post">
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="" class="form-label">课题编号：</label>

                                <select name="topicId" title="topicId">
                                    <option th:each="t:${topics}" th:value="${t.id}" th:title="${t.number}"
                                        th:text="${t.number}"></option>
                                </select>

                            </div>
                            <div class="mb-3">
                                <label for="" class="form-label">任务要求：</label>
                                <!-- <input type="text" class="form-control" name="requirement" id="" placeholder="" /> -->
                                <textarea name="requirement" id="" cols="20" rows="10"></textarea>


                            </div>
                            <div class="mb-3">
                                <label for="" class="form-label">截止日期：</label>
                                <input type="" class="form-control" name="deadline" id="" placeholder="" />
                                <small id="helpId" class="form-text text-muted">时间格式：xxxx-xx-xx</small>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Optional: Place to the bottom of scripts -->
        <script>
            const myModal = new bootstrap.Modal(
                document.getElementById("modalId"),
                options,
            );
        </script>

# 表单

<label for="" class="form-label">用户名：</label>
<input type="text" name="username" class="form-control">
<small id="helpId" class="form-text text-muted bg-warning">提示：学生账号以s开头，字母数字组成</small>

# 下拉表单

                <div class="mb-3">
                    <label for="" class="form-label">City</label>
                    <select
                        class="form-select form-select-lg"
                        name="age"
                        id=""
                    >
                        <option selected>Select one</option>
                        <option value="">New Delhi</option>
                        <option value="">Istanbul</option>
                        <option value="">Jakarta</option>
                    </select>
                </div>

# 提示

<p class="form-text text-muted">Help Text</p>

# 轮播图

            <div>
                <!-- 轮播 -->
                <div id="demo" class="carousel slide" data-bs-ride="carousel">

                    <!-- 指示符 -->
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
                        <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
                        <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
                    </div>

                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="d-block"
                                style="width:100%">
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" class="d-block"
                                style="width:100%">
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" class="d-block"
                                style="width:100%">
                        </div>
                    </div>

                    <!-- 左右切换按钮 -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>
                </div>
            </div>

# 颜色

背景色渐变：

div {
    /* 线性渐变，从上到下，红色到蓝色 */
    background: linear-gradient(to bottom, red, blue);
}

div {
    /* 径向渐变，以圆心为中心，从红色到蓝色 */
    background: radial-gradient(circle, red, blue);
}

bootstrap页面时间格式化：

在 Thymeleaf 中，可以通过 #temporals.format() 方法来格式化日期时间。让我们尝试修改一下代码：


<div th:each="r : ${reservations}">
    <div class="card text-center bg-light mt-2">
        <div class="card-body">

            <!-- 格式化预约时间，增加空值判断 -->
            <p class="card-text" th:if="${r.reservationTime != null}">
                预约时间：<span th:text="${#temporals.format(r.reservationTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
            </p>
            <p class="card-text" th:unless="${r.reservationTime != null}">无预约时间</p>

            <!-- 格式化签到时间，增加空值判断 -->
            <p class="card-text" th:if="${r.checkInTime != null}">
                签到时间：<span th:text="${#temporals.format(r.checkInTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
            </p>
            <p class="card-text" th:unless="${r.checkInTime != null}">未签到</p>

            <!-- 格式化签退时间，增加空值判断 -->
            <p class="card-text" th:if="${r.checkOutTime != null}">
                签退时间：<span th:text="${#temporals.format(r.checkOutTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
            </p>
            <p class="card-text" th:unless="${r.checkOutTime != null}">未签退</p>

            <!-- 状态标记 -->
            <span class="badge bg-info" th:if="${r.checkOutTime==null}">进行中</span>
            <span class="badge bg-success" th:if="${r.checkOutTime!=null}">已完成</span>
            
        </div>
    </div>
</div>

在这个修改后的代码中，我使用了 #temporals.format() 方法来格式化日期时间。尝试用这种方式重新编写代码，看看是否能够成功解决问题。

# 图片

当图片地址不可用时，设置默认的图片显示

<img class="card-img-top" th:src="${r.imgUrl}" alt="Title"
                            onerror="this.onerror=null; this.src='https://lib.tsinghua.edu.cn/hs/images2022/ylzw_img1.jpg'" />

# 模态框使用

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>模态框实例</h3>
  <p>点击按钮打开模态框</p>
  
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    打开模态框
  </button>
</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- 模态框内容 -->
      <div class="modal-body">
        模态框内容..
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>

</body>
</html>

关闭：$(容器).modal('hide')

打开：$(容器).modal('show')