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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

======Bootstrap Badges and Labels======
<WRAP left notice 80%>
  * description : Bootstrap Badges and Labels
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-25
</WRAP>
<WRAP clear></WRAP>
\\
=====Badges=====
===배지는 링크와 관련된 항목 수를 나타내는 **숫자 표시기 (numerical indicators)**입니다.===
{{:wiki:bootstrap:bootstrap_note:bootstrap-badges.png|}}\\
숫자 (5, 10, 2)가 **배지(badges)**입니다.\\
\\
''%%<span>%%'' 요소 내에서 ''%%.badge%%'' 클래스를 사용하여 배지를 만듭니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Badges</h2>
        <a href="#">News <span class="badge">5</span></a><br>
        <a href="#">Comments <span class="badge">10</span></a><br>
        <a href="#">Updates <span class="badge">2</span></a><br>
    </div>

</body>
</HTML>
\\
배지는 버튼과 같은 다른 요소 내에서도 사용할 수 있습니다:\\
{{:wiki:bootstrap:bootstrap_note:badges_on_a_button.png?250|}}\\
다음 예제는 버튼에 배지를 추가하는 방법을 보여줍니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Badges on Buttons</h2>
        <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
        <button type="button" class="btn btn-success">Success <span class="badge">3</span></button>
        <button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>
    </div>

</body>
</HTML>
\\
=====Labels=====
라벨은 무언가에 대한 추가 정보를 제공하는 데 사용됩니다.\\
라벨을 만들기 위하여 ''%%<span>%%'' 요소 내에 ''%%.label%%'' 클래스를 사용한 다음,\\ 
6개의 컨텐스추얼 클래스 중 하나를 사용하세요\\
''%%.label-default%%'', ''%%.label-primary%%'', ''%%.label-success%%'', ''%%.label-info%%'', ''%%.label-warning%%'', ''%%label-danger%%''\\
{{:wiki:bootstrap:bootstrap_note:labels.png?200|}}\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Labels</h2>
        <h1>Example <span class="label label-default">New</span></h1>
        <h2>Example <span class="label label-default">New</span></h2>
        <h3>Example <span class="label label-default">New</span></h3>
        <h4>Example <span class="label label-default">New</span></h4>
        <h5>Example <span class="label label-default">New</span></h5>
        <h6>Example <span class="label label-default">New</span></h6>
    </div>

</body>
</HTML>
\\
하기의 예제에서 모든 컨텍스추얼 라벨 클래스를 확인합니다.\\
{{:wiki:bootstrap:bootstrap_note:contextual-label-classes.png?400|}}
====예제====
<HTML>
    <div class="container">
        <h2>Contextual Label Classes</h2>
        <p>Contextual Label Classes can be used to color the label.</p>
        <span class="label label-default">Default Label</span>
        <span class="label label-primary">Primary Label</span>
        <span class="label label-success">Success Label</span>
        <span class="label label-info">Info Label</span>
        <span class="label label-warning">Warning Label</span>
        <span class="label label-danger">Danger Label</span>
    </div>
</HTML>

 







{{tag>오션 Bootstrap Badges and Labels}}

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

사용자 도구

사이트 도구

문서 도구