부트스트랩 패널


Bootstrap Panels

이 장에서는 Bootstrap 패널에 대해 설명합니다. Panel 구성 요소는 DOM 구성 요소를 상자에 삽입하는 데 사용됩니다. 기본 패널을 생성하려면 다음 예제와 같이 <div> 요소에 클래스 .panel 및 클래스 .panel-default를 추가하기만 하면 됩니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>

</body>
</html>

예제 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

패널 제목

다음 두 가지 방법으로 패널 제목을 추가할 수 있습니다.

  • .panel-heading을 사용하면 클래스를 쉽게 추가할 수 있습니다. 패널 제목 컨테이너. 패널에 제목 컨테이너를 쉽게 추가할 수 있습니다.

    .panel-title
    • 클래스 <h1>-<h6>와 함께 사용하여 미리 정의된 스타일 제목을 추가하세요.

  • 다음 예에서는 이러한 두 가지 방법을 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 面板标题</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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">
      <h3 class="panel-title">
         带有 title 的面板标题
      </h3>
   </div>
   <div class="panel-body">
      面板内容
   </div>
</div>

</body>
</html>

인스턴스 실행»
온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
패널 각주

다음을 실행할 수 있습니다. 패널의 인스턴스 바닥글을 추가하려면
.panel-footer

클래스를 사용하여 <div>에 버튼이나 하위 텍스트를 배치하세요. 다음 예는 이를 보여줍니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 面板脚注</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
   <div class="panel-body">
      这是一个基本的面板
   </div>
   <div class="panel-footer">面板脚注</div>
</div>

</body>
</html>

예제 실행»
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요.
패널 바닥글은 상황에 따라 색상이 지정된 패널 및 테두리의 색상을 상속하지 않습니다. 전경의 콘텐츠가 아닙니다.

상황에 맞는 색상이 있는 패널
상황에 맞는 상태 클래스
panel-primary, panel-success, panel-info, panel-warning, panel-danger

를 사용하여 상황에 맞는 색상이 있는 패널을 설정하세요.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带语境色彩的面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-primary">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-success">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-info">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-warning">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-danger">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>

</body>
</html>

인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
테이블이 있는 패널

패널에 테두리 없는 테이블을 만들려면 다음에서 클래스를 사용할 수 있습니다. 패널
.table

.

.panel-body

를 포함하는 <div>가 있다고 가정하고, 테이블 상단에 추가 테두리를 추가하여 이를 구분할 수 있습니다. .panel-body를 포함하는 <div>가 없으면 구성요소는 중단 없이 패널 헤더에서 테이블로 이동합니다. 다음 예에서는 이를 보여줍니다.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带表格的面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </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>
+
.panel-default 클래스를 사용하면 패널을 생성하고 패널에 목록 그룹을 추가할 수 있습니다. 챕터 목록 그룹에서 목록 그룹을 생성하는 방법을 배울 수 있습니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带列表组的面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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>

인스턴스 실행 »온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

←
→