(Bootstrap) 부트스트랩v3.0

❓ 부트스트랩이란?

- html, css, js 프레임 워크 

- html, css, js를 활용하여 만들진 많은 콤포넌트 제공 

- 부트스트랩을 활용하여 제작된 사이트는 반응형 웹사이트가 된다. 

- 반응형 웹사이트 : 디바이스 크기에 맞춰 화면이 변환하는 웹사이트

 

부트스트랩 다운로드

- bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js 파일 필요 

- 혹은 가공해서 쓰일 일이 있다면 bootstrap.css, bootstrap-theme.css, bootstrap.js 파일 필요

- Bootstrp 사이트에서 다운로드 할 수 있다. 

- 3.x 버전은 제이쿼리 기반으로 작성이 되어 있음으로 제이쿼리가 먼저 삽입되어야한다. 

- 다운로드 된 파일은 프로젝트 공간에 삽입해야한다.

 

 

부트스트랩 설정

- 부트스트랩의 css, js 파일과 html5문서, html5의 메타테그가 필요 

1) ie브라우저의 최신 문서 모드로 변환해주는 메타테그 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2) 사용자의 디바이스 크기에 맞춰 사이트의 전체 가로크기 100% 맞춰주는 메타테그 
<meta name="viewport" content="width=device-width, initial-scale=1">

- 제이쿼리 :  bootstrap.js의 상위에 제이쿼리 파일이 있어야한다. 

- ie 9이하 버전에서 (html5 미지원 브라우저) 에서 화면이 깨지지 안도록 만들어 주는 js파일 삽입

 

 

✔ 부트스트랩 콤포넌트

- 부트스트랩기반으로 작성된 디자인 요소들을 콤포넌트라 한다.

- 버튼, 아이콘, 모달, 폼, 테이블 등 다양한 콤포넌트들이 존재 한다.

- 콤포넌트들은 html구조와 class의 구조를 지켜서 가져다 써야 원활하게 작동된다. 

 

class 구조

- 해당 콤포넌트의 대표 class와 옵션 class가 존재 하며,
대표 class는 전체적인 틀을 옵션 class는 색상 및 크기, 여백을 표현한다.

 

 

✔ 부트스트랩 이벤트메서드

- 동작에 관련된 콤포넌트들은 각 특수 동작시 작동되는 이벤트 메서드를 지원한다.
- 예) 보인다, 감춘다 라는 행동이 취해졌을 경우 이벤트 메서드로 해당 움직임을 잡아낼 수 있다.

- 모달, 탭, 드롭다운 등 동작에 관련된 이벤트 메서드 제공

 

모달

- 레이어 팝업 

- 모달 옵션 class : 크기 - modal-lg, modal-sm 

- 에니메이션 옵션 class : fade  

- 키타 옵션사항은 자바스크립트 혹은 테그 속성으로 설정 할 수 있다. 

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>


<!-- Modal -->
<div class="modal fade" id="myModal" data-backdrop="static">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" >
        <span>&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      	...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 

 

//자바스크립트(제이쿼리)로 메서드 호출하여 수동으로 모달 띄우고 닫기

<button type="button" class="btn btn-info btn-lg" id="openModal">
	자바스크립트로 모달 띄우기
</button>

<button type="button" class="btn btn-info btn-lg" id="closeModal">
	자바스크립트로 모달 닫기
</button>

var myModal = $('#myModal');
$('#openModal').click(function(){
	myModal.modal('show');
});
$('#closeModal').click(function(){
	myModal.modal('hide');
});


//모달 이벤트 - 닫기 했을때 실행
myModal.on('hidden.bs.modal', function (e) {
alert('닫기가 되었습니다.');});
//모달 이벤트 - 열기 했을때 실행
myModal.on('show.bs.modal', function (e) {
	alert('열기가 되었습니다.');
});

 

 

✔ 부트스트랩 CSS

- 대표 클래스와 옵션클래스가 이미 정의되어 있으며, 테그 구조와 대표 클래스와 옵션클래스를 적용시켜 화면을 구성하면된다.

 

크기 클래스

- 크기 : 대표클래스-* > 대표클래스 다음에 크기 옵션 클래스가 있다. 

- lg > md > sm > xs : 대표클래스-lg  

- 예) class="대표클래스 대표클래스-lg"

색상 클래스

- 색상 : 대표클래스-* > 대표클래스 다음에 색상 옵션 클래스가 있다. 

- 색상클래스 종류 : primary, success, info, warning, danger, default 

- 예) class="대표클래스 대표클래스-primary" 

활성화 클래스

- 활성화가 필요한 요소들에는 active라는 클래스가 작동이 된다.

헬퍼 클래스

- 텍스트 색상, 배경 색상, 인라인요소 정렬, 블럭요소정렬 등에 관련된 클래스를 별도로 정의

table

- 대표 클래스 : table 

- 옵션 클래스 : table-striped, table-bordered, table-hover, table-condensed 

- 하위 색상 옵션 클래스 : 

.active특정한 행이나 셀에 hover 했을 때와 같은 색을 입힙니다. 

.success 성공적이거나 긍정적인 액션을 의미합니다. 

.info 중립적인 정보의 변화나 액션을 의미합니다. 

.warning 주의가 필요한 경고를 의미합니다. 

.danger 위험하거나 부정적일수 있는 액션을 의미합니다. 

- 반응형 테이블 : table-responsive 상위 테그에 해당 클래스 삽입

button

- 대표 클래스 : btn

- 옵션 클래스 : btn-크기, btn-색상, btn-block 등 

form

- 폼에 관련된 테그를 class로 정의 

- form-control : 부모 테그의 넓이 100%로 크기 변환, 블럭요소로 변경, 입력폼 테그들에 해당 클래스를 삽입

- form-inline : 블럭요소의 테그들을 인라인요소로 변경  

- checkbox, radio : 체크박스나 라디오 타입의 input 테그의 부모 테그에 지정되는 클래스

- form-group : 입력폼 테그를 그룹핑할때 쓰이며, 그룹핑 기준으로 여백 생성 

- form-horizontal : 라벨과 입력폼이 수평으로 유지되게 하는 클래스

- form-inline 하위의 요소들이  inline요소로 변경된다. 

- checkbox, radio : 체크박스와 라디오 인풋태그

 

아이콘

- 사전에 정의된 클래스를 삽입하여 아이콘을 표현한다.

 

네비게이션 바

- 사전에 정의된 클래스를 삽입하여 아이콘을 표현한다.

 

페이지네이션

- pagination 클래스로 페이지네이션을 구현 할 수 있다

 

라벨

- 대표 클래스 : label 

- 옵션 클래스 : label-색상

 

경보

- 대표 클래스 : alert

- 옵션 클래스 : alert-색상

 

패널

- 대표 클래스 : panel 

- 옵션 클래스 : panel-색상 

- 하위 클래스 : panel-heading, panel-body, panel-footer

 

 

 

❗ 부트스트랩 그리드 시스템

- 부트스트랩으로 반응형 웹을 구현해야 할 경우 그리드 시스템을 활용하여 구현한다. 

- .container 혹은 .container-fulid 클래스가 필요 (적절한 정렬과 패딩) 

- 그리드시스템에서 1행을 표현할때 row라는 클래스를 쓴다. 

- 그리드시스템에서 디바이스의 크기를 지정할때 lg, md, sm, xs로 지정이 가능하다. 

  (예 : col-lg-*, col-md-*, col-sm-*, col-xs-*)

- 그리드를 표현 하고자 할때 col-크기-값 형태로 표현 해야한다. 

- 그리드의 값은 총 12가 최고값이며 1행에 열의 총 합산값이 12가 되도록 해주면 된다.

 

 

디바이스크기 별로 정의된 그리드시스템의 값

- .col-lg-* : 1200px 이상시 반응하는 클래스

- .col-md-* : 992px 이상시 반응하는 클래스 
- .col-sm-* : 768px 이상시 반응하는 클래스 

- .col-xs-* : 768px 미만 반응하는 클래스 

- 그리드시스템의 클래스들은 중첩 적용이 가능하며 각 클래스들의 크기에 맞을때 반응을 하게 된다. 

 

 

offset 

- 기본적인 그리드시스템의 클래스와 같이 사용하며, 기본적인 클래스의 값과 합산하여 총 12값이 되면 된다.

- 중앙 정렬할때 혹은 빈 공간을 체워야 할때 사용을 한다.