패널은 콘텐츠가 있는 박스 형태의 구성요소를 만들 때 사용합니다.
<div class=”panel panel-default“>
<div class=”panel-body“>
Basic panel example
</div>
</div>
<div class=”panel-body“>
Basic panel example
</div>
</div>
.panel-heading을 사용해서 콘텐츠 영역과 분리된 제목 영역을 만들 수 있습니다.
<div class=”panel panel-default“>
<div class=”panel-heading“>Panel heading without title</div>
<div class=”panel-body“>
Panel content
</div>
</div>
<div class=”panel-heading“>Panel heading without title</div>
<div class=”panel-body“>
Panel content
</div>
</div>
.panel-footer를 사용해 푸터를 배치할 수도 있습니다.
<div class=”panel panel-default“>
<div class=”panel-body“>
Panel content
</div>
<div class=”panel-footer“>Panel footer</div>
</div>
<div class=”panel-body“>
Panel content
</div>
<div class=”panel-footer“>Panel footer</div>
</div>
'프로그래밍 언어 > 부트스트랩(Bootstrap)' 카테고리의 다른 글
[bootstrap] 부트스트랩 – 패널과 리스트 그룹 (0) | 2016.02.05 |
---|---|
[bootstrap] 부트스트랩 – 목록 – 패널(Panels) 색상 (0) | 2016.02.03 |
[bootstrap] 부트스트랩 – 리스트 그룹(List group) – 콘텐츠 추가 (0) | 2016.02.03 |
[bootstrap] 부트스트랩 – 리스트 그룹(List group) – 색상 및 링크 (0) | 2016.02.03 |
[bootstrap] 부트스트랩 – 리스트 그룹(List group) – 하이라이트 (0) | 2016.02.03 |
댓글