부트스트랩 배지 및 레이블
배지
배지는 링크와 연결된 항목 수를 나타내는 숫자 표시기입니다.
소식 5코멘트 10
업데이트 2
숫자(5, 10, 2)는 배지입니다.
.badge요소 내에서 클래스 를 사용 <span>하여 배지 만들기:
예시
<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>
배지는 버튼과 같은 다른 요소 내부에서도 사용할 수 있습니다.
다음 예에서는 버튼에 배지를 추가하는 방법을 보여줍니다.
예시
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
라벨
레이블은 다음에 대한 추가 정보를 제공하는 데 사용됩니다.
새로운 예
새로운 예
새로운 예
새로운 예
새로운 예
새로운 예
클래스를 사용 하고 요소 내에서 .label6개의 컨텍스트 클래스 .label-default, .label-primary, .label-success,
또는 .label-info, 중 하나 를 사용하여 레이블을 만듭니다..label-warning.label-danger<span>
예시
<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>
다음 예는 모든 컨텍스트 레이블 클래스를 보여줍니다.
기본 레이블
기본 레이블
성공 레이블
정보 레이블
경고 레이블
위험 레이블
예시
<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>