twitter-bootstrap
패널

비고

기본 예제

기본적으로 모든 .panel 은 일부 내용을 포함하기 위해 몇 가지 기본 테두리와 패딩을 적용합니다.

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

표제가있는 패널

.panel-heading 을 사용하여 제목 컨테이너를 패널에 쉽게 추가하십시오. pre-styled 제목을 추가하기 위해 .panel-title 클래스가있는 <h1>-<h6> 도 포함 할 수 있습니다. 그러나 <h1>-<h6> 의 글꼴 크기는 .panel-heading 의해 무시됩니다.

적절한 링크 색상을 지정하려면 .panel-title 안에 링크를 삽입하십시오.

<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 panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

바닥 글이있는 패널

.panel-footer 에서 단추 또는 보조 텍스트를 .panel-footer 바꿈하십시오. 전경에 있지 않기 때문에 문맥 변형을 사용할 때 패널 바닥 글 은 색상과 테두리를 상속받지 않습니다.

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>