문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Panels======
<WRAP left notice 80%>
  * description : Bootstrap Panels
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-26
</WRAP>
<WRAP clear></WRAP>
\\
=====Panels=====
Bootstrap의 패널은 콘텐츠 주위에 약간의 패딩이 있는 테두리가 있는 박스입니다.\\
{{:wiki:bootstrap:bootstrap_note:basicpanel.png?600|}}\\
패널은 ''%%.panel%%'' 클래스로 만들고, 패널 내부의 콘텐츠는 ''%%.panel-body%%'' 클래스를 가집니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Basic Panel</h2>
        <div class="panel panel-default">
            <div class="panel-body">A Basic Panel</div>
        </div>
    </div>

</body>
</HTML>
\\

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

    <div class="container">
        <h2>Panel Heading</h2>
        <div class="panel panel-default">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">Panel Content</div>
        </div>
    </div>

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

    <div class="container">
        <h2>Panel Footer</h2>
        <div class="panel panel-default">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">Panel Content</div>
            <div class="panel-footer">Panel Footer</div>
        </div>
    </div>

</body>
</HTML>
\\
=====Panel Group=====
많은 패널을 함께 그룹화 하려면, ''%%.panel-group%%''클래스로 ''%%<div>%%''를 감싸세요.\\
\\
''%%.panel-group%%'' 클래스는 각 패널의 하단 여백(bottom-margin)을 지웁니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Panel Group</h2>
        <p>The panel-group class clears the bottom-margin. Try to remove the class and see what happens.</p>
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">Panel Header</div>
                <div class="panel-body">Paenl Content</div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">Panel Header</div>
                <div class="panel-body">Panel Content</div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">Panel Header</div>
                <div class="panel-body">Panel Content</div>
            </div>
        </div>

        <h2>Without Panel Group</h2>
        <div>
            <div class="panel panel-default">
                <div class="panel-heading">Panel Header</div>
                <div class="panel-body">Paenl Content</div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">Panel Header</div>
                <div class="panel-body">Panel Content</div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">Panel Header</div>
                <div class="panel-body">Panel Content</div>
            </div>
        </div>
    </div>

</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:panelgroup.png?400|}}\\
\\
=====Panels with Contextual Classes=====
패널에 색상을 지정하기 위해, 컨텍스추얼 클래스를 사용합니다.\\
(''%%.panel-default%%'', ''%%.panel-primary%%'', ''%%.panel-success%%'', ''%%.panel-info%%'', ''%%.panel-warning%%'',,''%%.panel-danger%%''):\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Panels with Contextual Classes</h2>
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">Panel with panel-default class</div>
                <div class="panel-body">Panel Content</div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">Panel with panel-primary class</div>
                <div class="panel-body">Panel Content</div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">Panel with panel-success class</div>
                <div class="panel-body">Panel Content</div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">Panel with panel-info class</div>
                <div class="panel-body">Panel Content</div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">Panel with panel-warning class</div>
                <div class="panel-body">Panel Content</div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">Panel with panel-danger class</div>
                <div class="panel-body">Panel Content</div>
            </div>
        </div>
    </div>

</body>
</HTML>
===Result===
{{:wiki:bootstrap:bootstrap_note:panelwithcontextualclasses.png?400|}}\\

{{tag>오션 Bootstrap Panels}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
