-
[Project] day1 : Bootstrap 적용Project 2024. 5. 2. 22:08728x90
반응형 웹을 적용하고자 springboot에 Bootstrap을 사용하려고 한다.
2가지 방법이 있다.
1) CDN으로 링크 적용
2) 컴파일된 소스 파일 다운받아 로컬에 설정
1번은 CDN링크만 코드에 추가해주면 된다.
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>근데 시간이 지나면 링크가 변경되기도 하고 계속 불러와야 하니 다른 방법으로 사용하고 싶었다.
2번 방식으로 사용하려고 검색하니 다들 CDN방식으로 사용해서 찾아보느라 시간이 좀 걸렸다.
(1) 컴파일된 CSS, JS 파일을 다운받는다
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
bootstrap-5.3.3-dist.zip 파일이 다운로드된다.
압출을 풀면 js, css파일이 들어있는 것을 확인할 수 있다.
js, css파일을 ../resources/static 하위에 위치시킨다.
(2) jquery 파일을 다운로드 받는다
Download jQuery | jQuery
Download jQuery link Latest version To locally download these files, right-click the link and select "Save as..." from the menu. Download the compressed, production version: Download jQuery 3.7.1 The slim build is a smaller version, that excludes the ajax
jquery.com
jqeury홈페이지에서 다운로드 버튼을 클릭하면 아래와 같이 나온다.
우클릭 > "다른 이름으로 저장" 을 한다.
프로젝트의 ../resources/static/ 하위에 저장하면 된다.
(3) 템플릿에 경로 설정
bootstrap을 사용하기 앞서 필요한 소스 코드들을 프로젝트 내부에 위치시켰다면 코드에 설정하는 작업만 하면 된다.
<head> <link rel="stylesheet" href="/component/css/bootstrap.min.css"> <!-- 1. css 링크 --> </head> <body> <script src="/jquery/js/jquery-3.7.1.min.js"></script> <!-- 2. jquery --> <script src="/component/js/bootstrap.bundle.min.js"></script> <!-- 3. 번들 --> </body>사용하고자 하는 템플릿(mustache, 타임리프 등)에 위와 같이 3가지 경로를 설정한다.
여기서 중요한 점은 스프링부트의 설정에서 static폴더가 기본경로로 지정되어 있기 때문에 static 하위의 경로만 써주면 된다는 것이다!!!
이걸 몰라서 /static/componect/...이런 식으로 static을 포함시켜서 적용이 안됬었다.
경로에서 static을 빼주니 부트스트랩 적용이 잘되었다
<link rel="stylesheet" href="/static/component/css/bootstrap.min.css"> 코드를
<link rel="stylesheet" href="/component/css/bootstrap.min.css"> 으로 변경하니 정상적으로 css,js파일의 경로가 인식됬다.
예시)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link rel="stylesheet" type="text/css" href="/component/css/bootstrap.css"/> <link rel="stylesheet" href="/component/css/bootstrap.min.css"> </head> <body> <h1>Hello, world!</h1> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> <script src="/jquery/js/jquery-3.7.1.min.js"></script> <script src="/component/js/bootstrap.bundle.min.js"></script> <script type="text/javascript" src="/component/js/bootstrap.js"></script> </body> </html>
부트스트랩 적용이 안되면 다음과 같은 화면이다.
해야겠죠?
728x90'Project' 카테고리의 다른 글
[Project] day6 (0) 2024.05.08 [Project] day5 : (0) 2024.05.07 [Project] day3 : (0) 2024.05.04 [Project] day2 : (0) 2024.05.03 [Project] day1 : JDBC 세팅 , 에러 (0) 2024.05.02