부트스트랩 적용 및 resources 지정

부트스트랩 다운로드

http://bootstrapk.com/

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

 

제이쿼리 다운로드

> bootstrap내부에서 jquery 사용

jquery-3.5.1.js

0.09MB

 

부트스트랩 폴더지정

webapp > resources > css, js > bootstrap

제이쿼리 폴더지정

webapp > resources > js > jquery 

 

resources 지정

> css, js 등 서버내부경로의 리소스들을 맵핑해줌

webapp > WEB-INF > spring > appServlet > servlet-context.xml 추가

<resources mapping="/resources/**" location="/resources/" />

 

테스트 소스

이때 jquery는 bootstrap보다 위에 선언

<script src="/resources/js/jquery/jquery-3.5.1.js"></script>
<link href="/resources/css/bootstrap/bootstrap.css" rel="stylesheet">
<script src="/resources/js/bootstrap/bootstrap.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="#">
		Bootstrap
	</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
		<div class="navbar-nav">
			<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
			<a class="nav-item nav-link" href="#">Features</a>
			<a class="nav-item nav-link" href="#">Pricing</a>
			<a class="nav-item nav-link disabled" href="#">Disabled</a>
		</div>
	</div>	
</nav>