부트 스트랩-패널

이 장에서는 부트 스트랩 패널에 대해 설명합니다. 패널 구성 요소는 DOM 구성 요소를 상자에 넣을 때 사용됩니다. 기본 패널을 얻으려면 클래스를 추가하십시오..panel<div> 요소에. 수업 추가.panel-default 다음 예제와 같이이 요소에-

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

제목이있는 패널

패널 제목을 추가하는 방법에는 두 가지가 있습니다.

사용하다 .panel-heading 패널에 제목 컨테이너를 쉽게 추가 할 수 있습니다.
<h1>-<h6>를 .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 With title
      </h3>
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

바닥 글이있는 패널

클래스가 포함 된 <div>에서 버튼 또는 보조 텍스트를 래핑하여 패널에 바닥 글을 추가 할 수 있습니다. .panel-footer. 다음 예제는이를 보여줍니다.

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <div class = "panel-footer">Panel footer</div>
</div>

패널 바닥 글은 전경에있는 것이 아니므로 상황 별 변형을 사용할 때 색상과 테두리를 상속하지 않습니다.

패널 상황 별 대안

다음과 같은 상황 별 상태 클래스를 사용하십시오. panel-primary, panel-success, panel-info, panel-warning, panel-danger, 특정 컨텍스트에 대해 더 의미있는 패널을 만듭니다.

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

테이블이있는 패널

패널 내에서 경계가없는 테이블을 가져 오려면 클래스를 사용하십시오. .table패널 내에서. 다음을 포함하는 <div>가 있다고 가정합니다..panel-body, 분리를 위해 테이블 상단에 추가 테두리를 추가합니다. 포함하는 <div>가없는 경우.panel-body그러면 구성 요소가 중단없이 패널 헤더에서 테이블로 이동합니다.

다음 예제는 이것을 보여줍니다-

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

목록 그룹이있는 패널

모든 패널에 목록 그룹을 포함 할 수 있습니다. 수업을 추가하여 패널 만들기.panel<div> 요소에. 수업 추가.panel-default이 요소에. 이제이 패널 내에 목록 그룹이 포함됩니다. 당신은 장에서 목록 그룹 만드는 법을 배울 수 목록 그룹 .

<div class = "panel panel-default">
   <div class ="panel-heading">Panel heading</div>
   
   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>
   
   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>
</div>