배지 Badges

카운터 숫자 및 라벨 구성요소인 배지에 대한 문서 및 예제

예제

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

헤드라인 예제 New
헤드라인 예제 New
헤드라인 예제 New
헤드라인 예제 New
헤드라인 예제 New
헤드라인 예제 New
<h1>헤드라인 예제 <span class="badge badge-secondary">New</span></h1>
<h2>헤드라인 예제 <span class="badge badge-secondary">New</span></h2>
<h3>헤드라인 예제 <span class="badge badge-secondary">New</span></h3>
<h4>헤드라인 예제 <span class="badge badge-secondary">New</span></h4>
<h5>헤드라인 예제 <span class="badge badge-secondary">New</span></h5>
<h6>헤드라인 예제 <span class="badge badge-secondary">New</span></h6>

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

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

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

그것들이 사용되는 방법에 따라서, 스크린리더 사용자 및 유사한 보조 기술 사용자는 배지를 혼동 할 수 있습니다. 배지 스타일링은 목적에 따라 시각적 신호를 제공하지만 배지의 내용은 간단하게 표시됩니다. 배지들은 문장이나 링크 또는 버튼의 끝에 추가 단어나 숫자처럼 보일 수 있다

Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

문맥이 분명하지 않으면 (예 : “알림” 예제에서와 같이 “4”가 알림 수 임을 인식하는 경우) 시각적으로 숨겨진 추가 텍스트를 포함한 추가 컨텍스트를 포함하는 것을 고려하십시오.

<button type="button" class="btn btn-primary">
  프로필 <span class="badge badge-light">9</span>
  <span class="sr-only">읽지 않은 메시지</span>
</button>

문맥의 변형 Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge. 배지의 모양을 변경하려면 아래에 언급된 클래스 중 하나를 추가하십시오.

Primary Secondary Success Danger Warning Info Light Dark
<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>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

알약형 배지 Pill badges

배지를 더 둥글게 만들려면 .badge-pill 클래스를 사용 하십시오 (보다 큰 border-radius와 가로 padding 사용). v3에서 배지를 놓친 경우 유용합니다.

Primary Secondary Success Danger Warning Info Light Dark
<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>

링크

<a> 요소와 함께 .badge 클래스를 사용하면 hover 와 focus 상태가 있는 실행가능한 배지를 신속하게 제공 할 수 있습니다.

<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>