반응형
부트스트랩 더 끼얹기1
1. WEB-INF 아래에 tags 폴더 생성
*폴더명을 tag로 생성 시 스프링부트가 로딩하면서 해당 폴더를 찾지 못합니다.
2. tag 폴더에 layout.tag, navbar.tag, header.tag 생성
3. layout.tag 작성
1 2 3 4 5 | <%@ tag language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="tag" tagdir="/WEB-INF/tag"%> <tag:header/> <tag:navbar/> <jsp:doBody/> | cs |
4.header.tag 작성 (bootstrap.jsp -> header.tag)
1 2 3 4 5 6 7 8 9 10 11 12 | <%@ tag language="java" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- jQuery --> <script src="//code.jquery.com/jquery.min.js"></script> <!-- 합쳐지고 최소화된 최신 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- 부가적인 테마 --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <!-- 합쳐지고 최소화된 최신 자바스크립트 --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | cs |
5. navbar.tag 작성 - 부트스트랩 네비게이션바 사용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <%@ tag language="java" pageEncoding="UTF-8"%> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">스프링부트로 게시판 만들기!!</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="/list">기본 게시판1</a></li> <li><a href="#">기본 게시판2</a></li> <li><a href="#">기본 게시판3</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown예제 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> | cs |
6. list, detail, insert, update.jsp layout 태그 추가 (bootstrap.jap 제거)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="layoutTag" tagdir="/WEB-INF/tags"%> <!-- 추가 --> <layoutTag:layout> <!-- 여는 태그 --> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>List</title> </head> <body> <h2> 게시글 목록 </h2> <button class="btn btn-primary" onclick="location.href='/insert'">글쓰기</button> <div class="container"> <table class="table table-hover"> <tr> <th>No</th> <th>Subject</th> <th>Writer</th> <th>Date</th> </tr> <c:forEach var="l" items="${list}"> <tr onclick="location.href='/detail/${l.bno}'"> <td>${l.bno}</td> <td>${l.subject}</td> <td>${l.writer}</td> <td>${l.reg_date}</td> </tr> </c:forEach> </table> </div> <!-- <%@ include file="bootstrap.jsp" %> 제거 --> </body> </html> </layoutTag:layout> <!-- 닫는 태그 --> | cs |
* 사용할 각 페이지마다 추가 해주어야 합니다. 총 3가지니까 확인 꼭하세요~!
반응형
'SpringBoot 게시판 만들기' 카테고리의 다른 글
| 스프링부트(SpringBoot) 게시판 만들기13 - 간단하게 application.properties 사용하기 (3) | 2017.09.07 |
|---|---|
| 스프링부트(SpringBoot) 게시판 만들기12 - 부트스트랩 더 끼얹기2 (4) | 2017.09.05 |
| 스프링부트(SpringBoot) 게시판 만들기10 - Multipart 파일 다운로드 (2) | 2017.09.05 |
| 스프링부트(SpringBoot) 게시판 만들기9 - Multipart 파일 업로드 (7) | 2017.09.02 |
| 스프링부트(SpringBoot) 게시판 만들기8 - 게시글 수정(update), 삭제(delete) (1) | 2017.08.20 |
댓글