======Bootstrap Panels====== * description : Bootstrap Panels * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-26 \\ =====Panels===== Bootstrap의 패널은 콘텐츠 주위에 약간의 패딩이 있는 테두리가 있는 박스입니다.\\ {{:wiki:bootstrap:bootstrap_note:basicpanel.png?600|}}\\ 패널은 ''%%.panel%%'' 클래스로 만들고, 패널 내부의 콘텐츠는 ''%%.panel-body%%'' 클래스를 가집니다.\\ ====예제====

Basic Panel

A Basic Panel
\\ ''%%.panel-default%%'' 클래스는 패널의 색상을 지정하는데 사용합니다.\\ \\ =====Panel Heading===== {{:wiki:bootstrap:bootstrap_note:panelheading.png?600|}}\\ ''%%.panel-heading%%'' 클래스는 패널에 제목을 추가합니다.\\ ====예제====

Panel Heading

Panel Heading
Panel Content
\\ =====Panel Footer===== {{:wiki:bootstrap:bootstrap_note:panelfooter.png?600|}}\\ ''%%.panel-footer%%'' 클래스는 패널에 푸터를 추가합니다.\\ ====예제====

Panel Footer

Panel Heading
Panel Content
Panel Footer
\\ =====Panel Group===== 많은 패널을 함께 그룹화 하려면, ''%%.panel-group%%''클래스로 ''%%
%%''를 감싸세요.\\ \\ ''%%.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=== {{:wiki:bootstrap:bootstrap_note:panelgroup.png?400|}}\\ \\ =====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=== {{:wiki:bootstrap:bootstrap_note:panelwithcontextualclasses.png?400|}}\\ {{tag>오션 Bootstrap Panels}}