Panel 클래스
.panel : 내용 주위에 약간의 패딩 있는 테두리 상자 생성.
.panel-body : 패널 내부의 내용 컨테이너.
.panel-collapse : 축소 가능 패널 (= 접기 가능 패널) (숨기기 및 표시 패널 간 전환)
.panel-danger : 빨간색 패널. 위험 패널.
.panel-info : 하늘색 패널. 정보 패널.
.panel-success : 녹색 패널. 성공 패널.
.panel-warning : 노란색 패널. 경고 패널.
.panel-footer : 패널 꼬리말 (밝은 배경색)
.panel-group : 패널 그룹. (각 패널 아래의 아래쪽 여백이 제거됨.)
.panel-heading : 패널 제목 (밝은 배경색)
.panel-title : 텍스트 제목 조정. (.panel-heading 안에서 사용. margin 제거 및 글자크기 16px 설정).
BS Panel : 내용 주위에 약간의 패딩과 테두리가 있는 글상자.
Panel Basic 기본
<div class="panel panel-default ">
<div class="panel-body ">내용</div>
</div>
결과보기
Panel Heading 제목
<div class="panel panel-default">
<div class="panel-heading ">제목</div>
<div class="panel-body">내용</div>
</div>
결과보기
.panel-title 사용 O (margin 제거 및 글자크기 16px 설정)
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title ">제목</h3></div>
<div class="panel-body">내용</div>
</div>
.panel-title 사용 X
<div class="panel panel-default">
<div class="panel-heading"><h3>Panel Heading</h3></div>
<div class="panel-body">내용</div>
</div>
예제보기
Panel Footer 꼬리말
<div class="panel panel-default">
<div class="panel-body">내용</div>
<div class="panel-footer ">꼬리말</div>
</div>
결과보기
Panel Group 그룹
<div class="panel-group ">
<div class="panel panel-default">
<div class="panel-body">내용1</div>
</div>
<div class="panel panel-default">
<div class="panel-body">내용2</div>
</div>
</div>
Panel Contextual Background Color 맥락배경색
<div class="panel-group">
<div class="panel panel-default ">
<div class="panel-heading">회색배경</div>
<div class="panel-body">기본</div>
</div>
<div class="panel panel-primary ">
<div class="panel-heading">파란배경</div>
<div class="panel-body">중요</div>
</div>
<div class="panel panel-success ">
<div class="panel-heading">녹색배경</div>
<div class="panel-body">성공・긍정</div>
</div>
<div class="panel panel-info ">
<div class="panel-heading">하늘색배경</div>
<div class="panel-body">중립</div>
</div>
<div class="panel panel-warning ">
<div class="panel-heading">아이보리배경</div>
<div class="panel-body">경보・경고・주의・조심</div>
</div>
<div class="panel panel-danger ">
<div class="panel-heading">빨간배경</div>
<div class="panel-body">위험・잠재적부정</div>
</div>
</div>
예제보기
