1. BootStrap5 css, js 다운받기
하단 Download 클릭
Source files > Download source 다운
받을 파일의 압축을 풀고 dist 폴더의 css, js 폴더를 static 폴더에 넣기
2. BootStrap css, js 적용
styles.html에 BootStrap에서 받아온 css 적용
scirpts.html에는 아직 공통 적용하는 js가 없기 때문에 빈 태그만 작성
3. 게시판 list, update, write 작성
templates > board > list, update, write.html 작성
list.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="layout/default_layout">
<div layout:fragment="content" class="content">
<nav class="container">
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="제목을 입력해주세요.">
<button type="submit" class="btn btn-secondary">검색</button>
</div>
<br>
<form>
<table class="table table-hover">
<colgroup>
<col width="2%" />
<col width="5%" />
<col width="20%" />
<col width="5%" />
<col width="5%" />
<col width="5%" />
<col width="5%" />
</colgroup>
<thead>
<tr>
<th>
<label class="checkbox-inline">
<input type="checkbox" id="allCheckBox" class="chk">
</label>
</th>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>날짜</th>
<th>조회수</th>
<th>파일유무</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox-inline">
<input type="checkbox" class="chk" name="chk" value="">
</label>
<td>1</td>
<td><a href=""></a>제목입니다.</td>
<td>작성자</td>
<td>2022.08.01</td>
<td>1</td>
<td>이미지</td>
</tr>
</tbody>
</table>
<br>
<!-- ADMIN 권한일경우에만 글쓰기 권한있음 -->
<div class="d-flex justify-content-end">
<a class="btn btn-danger">글삭제</a>
<a href="/write" class="btn btn-primary">글쓰기</a>
</div>
<br>
<nav class="container d-flex align-items-center justify-content-center" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</form>
</nav>
</div>
</html>update.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<div layout:fragment="content" class="content">
<article>
<div class="container" role="main">
<div class="mb-3">
<label for="boardTitle">제목</label>
<input type="text" class="form-control" id="boardTitle" name="boardTitle" placeholder="제목을 입력해 주세요">
</div>
<br>
<div class="mb-3">
<label for="reg_id">작성자</label>
<input type="text" class="form-control" id="reg_id" name="regId" value="" readonly>
</div>
<br>
<div class="mb-3">
<label for="boardContent">내용</label>
<textarea class="form-control" rows="5" id="boardContent" name="boardContent" placeholder="내용을 입력해 주세요"></textarea>
</div>
<br>
<br>
<div>
<button onclick="registerAction()" type="button" class="btn btn-sm btn-primary" id="btnSave">수정</button>
<button onclick="location.href='/'" type="button" class="btn btn-sm btn-primary" id="btnList">목록</button>
</div>
</div>
</article>
</div>
</html>write.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<div layout:fragment="content" class="content">
<article>
<div class="container" role="main">
<div class="mb-3">
<label for="boardTitle">제목</label>
<input type="text" class="form-control" id="boardTitle" name="boardTitle" placeholder="제목을 입력해 주세요">
</div>
<br>
<div class="mb-3">
<label for="reg_id">작성자</label>
<input type="text" class="form-control" id="reg_id" name="regId" value="" readonly>
</div>
<br>
<div class="mb-3">
<label for="boardContent">내용</label>
<textarea class="form-control" rows="5" id="boardContent" name="boardContent" placeholder="내용을 입력해 주세요"></textarea>
</div>
<br>
<br>
<div>
<button onclick="registerAction()" type="button" class="btn btn-sm btn-primary" id="btnSave">저장</button>
<button onclick="location.href='/'" type="button" class="btn btn-sm btn-primary" id="btnList">목록</button>
</div>
</div>
</article>
</div>
</html>4. layout 파일 수정
html 생성에 따라 태그 위치가 바뀌므로 config, footer, header, default_layout html 파일을 수정
config.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<th:block th:fragment="configFragment">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!-- 공통 css -->
<th:block th:replace="common/styles"></th:block>
<!-- 컨텐츠 페이지의 css -->
<th:block layout:fragment="css"></th:block>
<!-- 공통 js -->
<th:block th:replace="common/scripts"></th:block>
<!-- 컨텐츠 페이지의 js -->
<th:block layout:fragment="script"></th:block>
</head>
</th:block>
</html>footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="footerFragment" class="container">
<footer class="py-1">
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© 2022 Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex">
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"></use></svg></a></li>
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"></use></svg></a></li>
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"></use></svg></a></li>
</ul>
</div>
</footer>
</div>
</html>header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<nav th:fragment="headerFragment" class="py-2 bg-light border-bottom">
<div class="container d-flex flex-wrap">
<ul class="nav me-auto">
<li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">home</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li>
</ul>
<ul class="nav">
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li>
</ul>
</div>
</nav>
<div th:fragment="headerFragment" class="container py-4">
<header class="pb-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
<span class="fs-4">게시판 예제</span>
</a>
</header>
</div>default_layout.html
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!-- config -->
<th:block th:replace="fragment/config :: configFragment"></th:block>
<!-- header -->
<body>
<th:block th:replace="fragment/header :: headerFragment"></th:block>
<div class="container py-3">
<div>
<!-- content -->
<th:block layout:fragment="content"></th:block>
</div>
</div>
<!-- footer -->
<th:block th:replace="fragment/footer :: footerFragment"></th:block>
</body>
</html>
개인이 공부한걸 작성하는 블로그입니다..