- 부트스트랩은 개발자들이 퍼블리셔의 퍼블리싱 없이 쉽게 html 화면을 구성할 수 있는 프레임워크이다.
적용순서
부트스트랩 파일 다운로드 적용 > jquery 라이브러리 다운로드 적용 >HTML 화면 구성
파일구성
1. 부트스트랩 파일 다운로드 후 적용
http://bootstrapk.com/getting-started/
1) 부트스트랩 사이트 접속 후 소스코드를 다운로드 한다.
- 부트스트랩은 기본 css,js,font만 제공하지만 소스코드는 샘플 소스와 관련 된 추가css,js 를 제공하니 소스코드 다운로드를 한다.
2) 압축울 푼 후 필요한 소스를 로컬 소스에 적용한다.
- /bootstrap-3.3.2/dist 의 하위 폴더의 모든 내용을 복사해서 로컬 소스의 적합한 경로에 압축을 풀어준다.
위 샘플에서는 /static/bootstrap 하위 폴더에 구성한다.
- 샘플로 dashboard 페이지를 따라서 적용할 건데 해당 css 파일도 복사해 준다.
bootstrap-3.3.2/docs/examples/dashboard/dashboard.css
-> /static/component/css/ 폴더에 넣어준다.
bootstrap 기본 소스와 분리하기 위해 bootstrap 폴더 하위에 component 폴더를 만들어 추가 css, js 는 해당 위치에 복사해 준다.
2. jQuery 다운로드
1) 위 URL 로 접속후 Download the compressed, production jQueyry3.6.0 버튼에 마우스 우클릭 후 다른이름으로 링크 저장을 한다.
3. 소스 적용
타일즈를 활용한 화면 구성에 부트스트랩을 적용한다.
샘플 페이지는 부트스트랩 대시보드를 활용한다.
http://bootstrapk.com/examples/dashboard/
Dashboard Template for Bootstrap
bootstrapk.com
1) layout-basic.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<tiles:insertAttribute name="include"/>
</head>
<body>
<tiles:insertAttribute name="header"/>
<div class="container-fluid">
<div class="row">
<tiles:insertAttribute name="side"/>
<tiles:insertAttribute name="body"/>
</div>
</div>
</body>
</html>
2) include.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="/bootstrap/css/dashboard.css"/>
<script type="text/javascript" src="/jquery/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
3) header.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>4) side.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="javascript:void(0);">Active</a></li>
<li><a href="#">Sample1</a></li>
<li><a href="#">Sample2</a></li>
<li><a href="#">Sample3</a></li>
</ul>
</div>5) dashboard.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
4. 테스트
http://localhost:8080/sample/dashboard 호출
'스프링부트+gradle+JSP+STS(Eclipse)' 카테고리의 다른 글
| 스프링부트 스프링시큐리티 비동기(ajax) 로그인 (4) | 2022.07.17 |
|---|---|
| 스프링부트 ajax JSON 통신 (0) | 2022.05.23 |
| 스프링부트 인터셉터(Interceptor) 설정 (0) | 2022.05.09 |
| 스프링부트 tiles(타일즈) 설정 (2) | 2022.05.09 |
| Mysql 사용자 계정 생성 (0) | 2022.05.06 |
댓글