CSS 부트스트랩 bootstrap 프론트엔드 툴 사용하기 - 세팅 및 적용

 

 

프론트엔드 기본 툴 세팅

 

: component를 사용하기 위한 기본 세팅

 

 

부트스트랩 프론트엔드 툴 접속

https://getbootstrap.kr/

Bootstrap

 

 

버전 충돌을 막기 위해 5이하 버전으로 다운로드

 

 

Download > Download

다운로드 페이지에서 파일 다운로드

 

 

다운로드받은 파일의 압축을 풀고 해당되는 파일을 Eclipse resources폴더에 넣음

 

 

bootstrap.min.css파일과

bootstrap.min.js파일을 각각 폴더를 생성해 넣어줌

 

 

메인페이지의 header에 태그 추가

 

<link type="text/css" rel="stylesheet" href="/MyHome/resources/css/bootstrap.min.css">
<script type="text/javascript" src="/MyHome/resources/js/bootstrap.min.js"></script>

 

 

---

 

 

component 적용

 

 

bootstrap에서 원하는 component를 가져와 사용할 수 있다

 

원하는 태그를 골라 적용 모습을 확인한 후 태그를 가져와 사용

 

 

기존에 작성된 코드를 form 복사한 태그 요소로 대체하고, 필요한 부분을 가감하여 수정

 

 

<form action="/MyHome/login/check.do" method="post" name="login">
<div class="form-group">
  <label for="exampleInputEmail1">ID</label>
  <input type="email" name="id" value="${id }" required="required" autocomplete="off" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">PW</label>
  <input type="password" class="form-control" id="exampleInputPassword1" name="password">
</div>
<div class="form-group form-check">
  <input type="checkbox" class="form-check-input" id="exampleCheck1" name="ckid" value="true" ${check ? 'checked' : '' }>
  <label class="form-check-label" for="exampleCheck1">아이디 기억하기</label>
</div>
<button type="button" class="btn btn-primary" onclick="javascript:check()">Login</button>
</form>

 

 

잘 적용된 모습