English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
이 장에서는 Bootstrap 패널(Panels)을 설명합니다. 패널 컴포넌트는 DOM 컴포넌트를 박스에 삽입하는 데 사용됩니다. 기본 패널을 생성하려면 단지 <div> 요소에 class를 추가하면 됩니다. .panel 와 class .panel-default 로 추가할 수 있습니다. 아래의 예제와 같이 보입니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 기본 패널</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-body"> 이것은 기본 패널 </div> </div> </body> </html>테스트해보세요 ‹/›
결과는 다음과 같습니다:
우리는 패널 제목을 추가할 수 있는 두 가지 방법을 다음과 같이 사용할 수 있습니다:
사용하여 .panel-heading class를 사용하여 패널에 제목 컨테이너를 간단하게 추가할 수 있습니다.
class를 사용하여 .panel-title class의 <h1>-<h6>을 사용하여 предопределенный стиль의 제목을 추가할 수 있습니다.
아래의 예제가 이 두 가지 방법을 보여줍니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 패널 제목</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-heading"> title을 가지지 않는 패널 제목 </div> <div class="panel-body"> 패널 내용 </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title"> title을 가진 패널 제목 </h2> </div> <div class="panel-body"> 패널 내용 </div> </div> </body> </html>테스트해보세요 ‹/›
결과는 다음과 같습니다:
우리는 패널에 footnotes를 추가할 수 있습니다. 단지 버튼이나 부문 텍스트를 class를 가진 .panel-footer 의 <div> 내에서만 가능합니다. 아래의 예제가 이 점을 보여줍니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 패널 footnotes</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-body"> 이것은 기본 패널 </div> <div class="panel-footer">패널 footnotes</div> </div> </body> </html>테스트해보세요 ‹/›
결과는 다음과 같습니다:
footnote는 상황을 가진 패널에서 색상과 경계선을 상속받지 않습니다. 왜냐하면 그것은 전경 내용이 아니기 때문입니다.
사용 상황 상태 클래스 panel-primary, panel-success, panel-info, panel-warning、panel-danger를 사용하여 컨텍스트 색상 패널을 설정할 수 있습니다. 다음은 예제입니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 컨텍스트 색상 패널</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <h2 class="panel-title"> 패널 제목</h2> </div> <div class="panel-body"> 이것은 기본 패널 </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h2 class="panel-title"> 패널 제목</h2> </div> <div class="panel-body"> 이것은 기본 패널 </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h2 class="panel-title"> 패널 제목</h2> </div> <div class="panel-body"> 이것은 기본 패널 </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h2 class="panel-title"> 패널 제목</h2> </div> <div class="panel-body"> 이것은 기본 패널 </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h2 class="panel-title"> 패널 제목</h2> </div> <div class="panel-body"> 이것은 기본 패널 </div> </div> </body> </html>테스트해보세요 ‹/›
결과는 다음과 같습니다:
패널에서 테이블을 비경계선으로 만들기 위해 패널에서 class를 사용할 수 있습니다. .table를 가정해 보겠습니다. .panel-body에서 테이블의 상단에 추가적인 경계선을 추가하여 구분할 수 있습니다. 포함하지 않으면 .panel-body 의 <div>를 포함하면 컴포넌트가 패널 헤더에서 중단 없이 테이블로 이동합니다.
다음 예제에서 이를 보여줍니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 로스팅 있는 패널</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title"> 패널 제목</h2> </div> <div class="panel-body"> 이것은 기본 패널 </div> <table class="table"> <th>제품</th><th>가격 </th> <tr><td>제품 A</td><td>200</td></tr> <tr><td>제품 B</td><td>400</td></tr> </table> </div> <div class="panel panel-default"> <div class="panel-heading"> 패널 제목</div> <table class="table"> <th>제품</th><th>가격 </th> <tr><td>제품 A</td><td>200</td></tr> <tr><td>제품 B</td><td>400</td></tr> </table> </div> </body> </html>테스트해보세요 ‹/›
결과는 다음과 같습니다:
어떤 패널에도 목록 그룹을 포함할 수 있습니다. <div> 요소에 추가하여 .panel 와 .panel-default 로 패널을 만들고 패널에 목록 그룹을 추가할 수 있습니다. 다음과 같이 추가할 수 있습니다. 목록 그룹 단서에 어떻게 목록 그룹을 만드는지 배울 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 로스팅 있는 패널</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-heading"> 패널 제목</div> <div class="panel-body"> <p>이것은 기본 패널 내용입니다. 이것은 기본 패널 내용입니다. 이것은 기본 패널 내용입니다. 이것은 기본 패널 내용입니다. 이것은 기본 패널 내용입니다. 이것은 기본 패널 내용입니다. 이것은 기본 패널 내용입니다. 이것은 기본 패널 내용입니다. </p> </div> <ul class="list-group"> <li class="list-group-item">무료 도메인 등록</li> <li class="list-group-item">무료 Window 공간 호스팅</li> <li class="list-group-item">이미지의 수</li> <li class="list-group-item">24*7 지원</li> <li class="list-group-item">每年更新成本</li> </ul> </div> </body> </html>테스트해보세요 ‹/›
결과는 다음과 같습니다: