Bootstrap Panels
Panels
Bootstrap의 패널은 콘텐츠 주위에 약간의 패딩이 있는 테두리가 있는 박스입니다.
패널은 .panel
클래스로 만들고, 패널 내부의 콘텐츠는 .panel-body
클래스를 가집니다.
예제
.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