배지

배지, 소량 및 라벨링 구성 요소에 대한 문서 및 예.

예시

배지는 상대 글꼴 크기 및 em단위를 사용하여 직계 상위 요소의 크기와 일치하도록 크기가 조정됩니다.

예시 제목새로운

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

배지는 링크 또는 버튼의 일부로 사용되어 카운터를 제공할 수 있습니다.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

배지는 사용 방법에 따라 스크린 리더 및 유사한 보조 기술 사용자에게 혼동을 줄 수 있습니다. 배지의 스타일은 목적에 대한 시각적 신호를 제공하지만 이러한 사용자에게는 배지의 콘텐츠가 표시됩니다. 특정 상황에 따라 이러한 배지는 문장, 링크 또는 버튼 끝에 임의의 추가 단어 또는 숫자처럼 보일 수 있습니다.

컨텍스트가 명확하지 않은 경우("4"가 알림 수인 "알림" 예에서와 같이), 시각적으로 숨겨진 추가 텍스트와 함께 추가 컨텍스트를 포함하는 것을 고려하십시오.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

문맥 변형

아래에 언급된 수정자 클래스를 추가하여 배지 모양을 변경합니다.

주요한 중고등 학년 성공 위험 경고 정보 빛 어두운

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

보조 기술에 의미 전달

색상을 사용하여 의미를 추가하는 것은 시각적 표시만 제공하며 스크린 리더와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시되는 정보가 콘텐츠 자체(예: 보이는 텍스트)에서 명확하거나 .sr-only클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

알약 배지

수정자 클래스를 사용 .badge-pill하여 배지를 더 둥글게 만듭니다(더 크고 border-radius추가 가로 padding포함). v3에서 배지를 놓친 경우 유용합니다.

주요한 중고등 학년 성공 위험 경고 정보 빛 어두운

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

연결

요소 에서 상황별 .badge-*클래스를 사용하면 호버 및 포커스 상태가 포함된 실행 가능한 배지를 <a>빠르게 제공 할 수 있습니다.

주요한 중고등 학년 성공 위험 경고 정보 빛 어두운

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>