Spring

스프링부트 게시판 만들기 - 4 (BootStrap)

it's woo 2022. 6. 29. 01:50

부트 스트랩을 사용하여 프런트 페이지를 만들자

 

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.

getbootstrap.com

위 사이트로 들어가  CSS파일과 JS파일을 다운로드하자

다운로드한 파일을 복사하여 resources static 하위에 넣자

 

Examples에 들어가 원하는 디자인을 고르고 F12(개발자 도구 키)를 사용해 html을 복사하여 가져온다.

 

 

원하는 스타일을 가져와 초기 화면을 만들어 보자

 

boardList.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.98.0">
    <title>Headers · Bootstrap v5.2</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/headers/">
    <link href="/css/bootstrap.min.css" rel="stylesheet">


    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .b-example-divider {
            height: 3rem;
            background-color: rgba(0, 0, 0, .1);
            border: solid rgba(0, 0, 0, .15);
            border-width: 1px 0;
            box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
        }

        .b-example-vr {
            flex-shrink: 0;
            width: 1.5rem;
            height: 100vh;
        }

        .bi {
            vertical-align: -.125em;
            fill: currentColor;
        }

        .nav-scroller {
            position: relative;
            z-index: 2;
            height: 2.75rem;
            overflow-y: hidden;
        }

        .nav-scroller .nav {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 1rem;
            margin-top: -1px;
            overflow-x: auto;
            text-align: center;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }
    </style>


    <!-- Custom styles for this template -->
    <link href="/css/headers.css" rel="stylesheet">
</head>
<body>

<main>
    <div class="container">
        <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
            <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
                <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
                    <use xlink:href="#bootstrap"></use>
                </svg>
            </a>
            <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
                <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
                <li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
                <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
                <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
                <li><a href="#" class="nav-link px-2 link-dark">About</a></li>
            </ul>
            <div class="col-md-3 text-end">
                <button type="button" class="btn btn-outline-primary me-2">Login</button>
                <button type="button" class="btn btn-primary">Sign-up</button>
            </div>
        </header>
    </div>
</main>

<script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>

경로에 주의 하자!!

 

그대로 복사하여 실행하면 css나 js파일이 적용이 되지 않은 페이지를 보게 된다. 

소스의 경로를 알맞게 변경하여 잘 찾아갈 수 있게 바꿔야 한다.

//아래의 3개의 소스 경로를 본인의 파일 경로에 맞게 설정해야 한다..
<link href="/css/bootstrap.min.css" rel="stylesheet">

<link href="/css/headers.css" rel="stylesheet">

<script src="/js/bootstrap.bundle.min.js"></script>

headers.css 파일(혹은 본인이 선택한 다른 example의 파일)은 examples를 다운로드하여 메모장의 적힌 css를 복사하여 추가해주면 된다..

 

Examples

Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.

getbootstrap.com

 

컨트롤러를 통해 다음 페이지를 출력시키면 정상적으로 적용된 것이다.