목차

Bootstrap Panels

  • description : Bootstrap Panels
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-26


Panels

Bootstrap의 패널은 콘텐츠 주위에 약간의 패딩이 있는 테두리가 있는 박스입니다.

패널은 .panel 클래스로 만들고, 패널 내부의 콘텐츠는 .panel-body 클래스를 가집니다.

예제

Basic Panel

A Basic Panel


.panel-default 클래스는 패널의 색상을 지정하는데 사용합니다.

Panel Heading


.panel-heading 클래스는 패널에 제목을 추가합니다.

예제

Panel Heading

Panel Heading
Panel Content



.panel-footer 클래스는 패널에 푸터를 추가합니다.

예제

Panel Footer

Panel Heading
Panel Content


Panel Group

많은 패널을 함께 그룹화 하려면, .panel-group클래스로 <div>를 감싸세요.

.panel-group 클래스는 각 패널의 하단 여백(bottom-margin)을 지웁니다.

예제

Panel Group

The panel-group class clears the bottom-margin. Try to remove the class and see what happens.

Panel Header
Paenl Content
Panel Header
Panel Content
Panel Header
Panel Content

Without Panel Group

Panel Header
Paenl Content
Panel Header
Panel Content
Panel Header
Panel Content

Result



Panels with Contextual Classes

패널에 색상을 지정하기 위해, 컨텍스추얼 클래스를 사용합니다.
(.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning,,.panel-danger):

예제

Panels with Contextual Classes

Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content

Result