[basic] BS3 - Panel (BS글상자 = BS패널)

Panel 클래스

 

.panel  :  내용 주위에 약간의 패딩 있는 테두리 상자 생성.

.panel-body  :  패널 내부의 내용 컨테이너.

.panel-collapse  :  축소 가능 패널 (= 접기 가능 패널) (숨기기 및 표시 패널 간 전환)

.panel-danger  :   빨간색 패널. 위험 패널.

.panel-info  :  하늘색 패널. 정보 패널.

.panel-success  :  녹색 패널. 성공 패널.

.panel-warning  :  노란색 패널. 경고 패널.

.panel-footer  :  패널 꼬리말 (밝은 배경색)

.panel-group  :  패널 그룹. (각 패널 아래의 아래쪽 여백이 제거됨.)

.panel-heading  :  패널 제목 (밝은 배경색)

.panel-title  :  텍스트 제목 조정. (.panel-heading 안에서 사용. margin 제거 및 글자크기 16px 설정).

 

BS Panel : 내용 주위에 약간의 패딩과 테두리가 있는 글상자.

Panel Basic 기본

 

<div class="panel panel-default">

    <div class="panel-body">내용</div>

</div>

 

결과보기

Panel Heading 제목

 

<div class="panel panel-default">  

    <div class="panel-heading">제목</div>

    <div class="panel-body">내용</div>

</div>

 

결과보기

---

 

.panel-title 사용 O  (margin 제거 및 글자크기 16px 설정)

<div class="panel panel-default">

    <div class="panel-heading"><h3 class="panel-title">제목</h3></div>

    <div class="panel-body">내용</div>

</div>

.panel-title 사용 X

<div class="panel panel-default">

    <div class="panel-heading"><h3>Panel Heading</h3></div>

    <div class="panel-body">내용</div>

</div>

 

예제보기

Panel Footer 꼬리말

 

<div class="panel panel-default">

  <div class="panel-body">내용</div>

  <div class="panel-footer">꼬리말</div>

</div>

 

결과보기

Panel Group 그룹

 

<div class="panel-group">

    <div class="panel panel-default">

        <div class="panel-body">내용1</div>

    </div>

    <div class="panel panel-default">

        <div class="panel-body">내용2</div>

    </div>

</div>

 

Panel Contextual Background Color 맥락배경색

 

<div class="panel-group">

    <div class="panel panel-default">

        <div class="panel-heading">회색배경</div>

        <div class="panel-body">기본</div>

    </div>

    <div class="panel panel-primary">

        <div class="panel-heading">파란배경</div>

        <div class="panel-body">중요</div>

    </div>

    <div class="panel panel-success">

        <div class="panel-heading">녹색배경</div>

        <div class="panel-body">성공・긍정</div>

    </div>

    <div class="panel panel-info">

        <div class="panel-heading">하늘색배경</div>

        <div class="panel-body">중립</div>

    </div>

    <div class="panel panel-warning">

        <div class="panel-heading">아이보리배경</div>

        <div class="panel-body">경보・경고・주의・조심</div>

    </div>

    <div class="panel panel-danger">

        <div class="panel-heading">빨간배경</div>

        <div class="panel-body">위험・잠재적부정</div>

    </div>

</div>

 

예제보기