[bootstrap] Bootstrap 이용하기 05 (170406)

Bootstrap 이용하기 05

• Panel 이용하기

- panel의 색상 클래스 : panel-primary, panel-success, panel-info, panel-warning, panel-danger

- panel은 panel heading, panel-body, panel-footer 로 구성된다.

- panel 속에 table을 넣을 수 있다.

- panel 속에 li를 넣을 수 있다.

- insert효과를 well클래스로 줄 수 있다.

** 출력 결과 **

- 패널 예제

- 패널 안에 크기가 유동적인 이미지를 넣기 위해서는 img-responsive 클래스를 이용한다.

** 출력 결과 **

• ProgressBar 이용하기

- progress-bar, progress-bar-(color속성:success,info, warning, danger), progress-bar-striped를 이용할 수 있다.

- style="width:30%" 형태로 퍼센트를 입력할 수 있다.

- 아래 upload버튼 클릭 시 퍼센트가 차오르는 형태의 jquery를 구현할 수 있다.

** 출력 결과 **

• Responsive Navbar 만들기
  

- 반응형 navbar를 만들기 위해서는 xs영역에서 숨겨질 contents를 담을 div가 필요하다.

- collapse를 이용해 접고 펼 수 있는 navbar를 생성한다. collapse, navbar-collapse를 숨겨질 영역 div에 넣는다. id값을 지정해준다.

- 버튼에는 data-toggle="collapse" data-target="#id값" 을 넣는다. 접히고 펴지는 것은 id값 때문이다.

** 출력 결과 **