부트스트랩 시작하기_bootstrap

2022. 2. 3. 11:49ㆍksmart_Framework/bootstrap

728x90
1.bootstrap01.html 생성
2.bootstrap 환경 구성
3.bootstrap 환경 분리 
bootstrap 외부에서 접근 못하게 숨기기
jsp:param include 파일에 파라미터 넘기기
특정 원하는 클래스 파일을 거쳐서 가도록 필터
콤포넌트 삽입
폴더경로 절대경로로 변경

 

- css, js, html 프레임 워크
- 3.x, 4.x 제이쿼리 필요(5버전은 제외)
- bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js 파일 필요

- 메타 정보 필요(ie 최신버전 선언, viewport 정보)

- meta : 사이트의 정보(정의) 서술

- viewport : 디바이스 크기에 따라 보여지는 화면 설정을 할 수 있다. ( 모바일 웹 작업 시 필수 )

- bootstrap version 확인 : bootstrap.css 파일 상단에 버전 확인 가능

 

 1.bootstrap01.html 생성 

 2.bootstrap 환경 구성 

폴더생성 resources

하위폴더 bootstrap 복사 붙여넣기

bootstrap.zip
0.25MB

 

 

 

하위폴더 js 복사 붙여넣기

jquery-3.6.0.min.js
0.09MB

 

 

 

최종본

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>부트스트랩 시작하기</title>
</head>
<body>
	<h1>부트스트랩 시작하기</h1>
	- css, js, html 프레임워크
	<br> - 3.x, 4.x 버전은 제이쿼리 필요 (5버전 부터는 제외)
	<br> - bootstrap.min.css, bootstrap-theme.min.css,
	bootstrap.min.js 파일 필요
	<br> - 메타 정보 필요 (ie 최신버전 선언, viewport 정보가 필요하다.)
	<br> - meta : 사이트의 정보(정의) 서술
	<br> - viewport : 디바이스 크기에 따라 보여지는 화면설정을 할 수 있다.(모바일 웹 작업시 필수)
	<br>
	<h2>콤포넌트 삽입</h2>
	- 부트스트랩 템플릿에서 콤포넌트 구조 사용 <br/>
	<button type="button" class="glyphicon glyphicon-align-left" arial-label="Left Align">
	<span class="glyphicon glyphicon-plus"></span>
	</button>
	<script type="text/javascript" src="resources/js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript"
		src="resources/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

 

 

 3.bootstrap 환경 분리 

폴더생성  include
헤더부분 header.jsp
푸터부분 footer.jsp

 

 

//header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>부트스트랩 시작하기</title>
</head>
<body>

//footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript" src="resources/js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript"
		src="resources/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

 

//bootstrap02.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<jsp:include page="/include/header.jsp"></jsp:include>

<jsp:include page="/include/footer.jsp"></jsp:include>

 bootstrap 외부에서 접근 못하게 숨기기

 

include 파일 경로 WEB-INF 파일로 경로 변경

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<jsp:include page="/WEB-INF/view/include/header.jsp"></jsp:include>

<jsp:include page="/WEB-INF/view//include/footer.jsp"></jsp:include>

  jsp:param include 파일에 파라미터 넘기기 

 

인크루드 파일에서 특정값 넘겨서 일부분 작업 가능

//bootstrap02.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 
	jsp:param 인크루드 파일에 파라미터 넘기기
	${param.key}로 인크루드 파일에서 받을 수 있다.
 -->
<jsp:include page="/WEB-INF/view/include/header.jsp">
	<jsp:param name="pageTitle" value="메인페이지"/>
</jsp:include>

<jsp:include page="/WEB-INF/view//include/footer.jsp"></jsp:include>

테스트

//header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>부트스트랩 시작하기</title>
</head>
<body>

${param.pageTitle}

한글이 깨진다.

 
<%request.setCharacterEncoding("UTF-8"); %>

불러오기 가능

<%=request.getParameter("pageTitle") %>

 특정 원하는 클래스 파일을 거쳐서 가도록 필터 

한글변환 코드를 모든 파일에 적용

 

패키지 kr.or.ksmart.filter
필터 MainFilter.java

패키지 생성
모든 url을 거친다.

 

지우기

//bootstrap02.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 
	jsp:param 인크루드 파일에 파라미터 넘기기
	${param.key}로 인크루드 파일에서 받을 수 있다.
 -->
<jsp:include page="/WEB-INF/view/include/header.jsp">
	<jsp:param name="pageTitle" value="메인페이지"/>
</jsp:include>

<jsp:include page="/WEB-INF/view//include/footer.jsp"></jsp:include>

//MainFilter.java
package kr.or.ksmart.filter;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

@WebFilter("/*")
public class MainFilter implements Filter {
	public void destroy() {
	}

	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		request.setCharacterEncoding("UTF-8");
		chain.doFilter(request, response);
	}

	public void init(FilterConfig fConfig) throws ServletException {
	}

}

 

 콤포넌트 삽입 

http://bootstrapk.com/components/

 

 

콤포넌트 · 부트스트랩

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

bootstrapk.com

 

복사 후 class 에 삽입

 

<button type="button" class="glyphicon glyphicon-align-left" arial-label="Left Align">
<span class="glyphicon glyphicon-plus"></span>
</button>

 

 

 폴더경로 절대경로로 변경

//header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="${pageContext.request.contextPath }/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>부트스트랩 시작하기</title>
</head>
<body>

<h1>${param.pageTitle}</h1>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/resources/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
728x90
저작자표시 (새창열림)

'ksmart_Framework > bootstrap' 카테고리의 다른 글

그리드시스템_bootstrap  (0) 2022.02.03
부트스트랩콤포넌트_bootstrap  (0) 2022.02.03
콤포넌트 삽입_bootstrap  (0) 2022.02.03

관련글

댓글 0

티스토리툴바