Jin's Dev Story

[SpringBoot] Bootstrap 본문

Web & Android/SpringBoot

[SpringBoot] Bootstrap

woojin._. 2023. 10. 14. 09:54

Bootstrap

웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크

부트스트랩에서 제공하는 템플릿 및 컴포넌트 등을 이용하면 웹 페이지를 쉽게 꾸밀 수 있음

💡 https://www.bootstrapcdn.com/

위의 링크에서 사용할 거 복붙해서 붙이면 됨

  • layout1.html
<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!-- 부트스트랩 적용 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- css 적용 -->    
        <link th:href="@{/css/layout1.css}" rel="stylesheet">

    <th:block layout:fragment="script"></th:block>
    <th:block layout:fragment="css"></th:block>
</head>
<body>
    <div th:replace="fragments/header::header"></div>  <!-- 이 부분의 헤더를 fragments의 header로 대체한다는 뜻 -->

    <div layout:fragment="content">

    </div>

    <div th:replace="fragments/footer::footer"></div>  <!-- 이 부분의 헤더를 fragments의 header로 대체한다는 뜻 -->
</body>
</html>
  • header.html
<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<!-- 부트스트랩 이용함 -->
<div th:fragment="header">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">Woojin's Shop</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <!-- 상품등록 -->
                    <li class="nav-item" sec:authorize="hasAnyAuthority('ROLE_ADMIN')">
                        <a class="nav-link active" aria-current="page" href="/admin/item/new" >상품등록</a></li>
                    <!-- 상품관리 -->
                    <li class="nav-item" sec:authorize="hasAnyAuthority('ROLE_ADMIN')">
                        <a class="nav-link active" aria-current="page" href="/admin/items">상품관리</a></li>
                    <!-- 장바구니 -->
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <a class="nav-link active" aria-current="page" href="/cart">장바구니</a></li>
                    <!-- 구매이력 -->
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <a class="nav-link active" aria-current="page" href="/orders">구매이력</a></li>
                    <!-- 게시판 -->
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <a class="nav-link active" aria-current="page" href="/board">게시판</a></li>
                    <!-- 로그인 -->
                    <li class="nav-item" sec:authorize="isAnonymous()">
                        <a class="nav-link active" aria-current="page" href="/member/login">로그인</a></li>
                    <!-- 로그아웃 -->
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <a class="nav-link active" aria-current="page" href="/member/logout">로그아웃</a></li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search"
                           aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
</div>

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

  <div class="footer" th:fragment="footer">
        <footer class="page-footer font-small cyan darken-3">
            <div class="footer-copyright text-center py-3">
                2023 Spring Shopping Mall Project
            </div>
        </footer>
  </div>
</html>
  • layout1.css
html {
    position: relative;
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
}
.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 15px 0;
    text-align: center;
}
.content{
    margin-bottom:100px;
    margin-top: 50px;
    margin-left: 200px;
    margin-right: 200px;
}

저작자표시 비영리 변경금지

'Web & Android > SpringBoot' 카테고리의 다른 글

[SpringBoot] Entity  (0) 2023.10.14
[SpringBoot] enum Class (열거형)  (0) 2023.10.14
[SpringBoot] Spring Boot Devtools  (0) 2023.10.14
[SpringBoot] 파일 경로 설명  (0) 2023.10.14
[SpringBoot] log 디자인 변경하는 방법 (코드)  (0) 2023.10.13
'Web & Android/SpringBoot' Related Articles more