배지

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

이 페이지에서

예

배지는 상대 글꼴 크기 및 em단위를 사용하여 직계 상위 요소의 크기와 일치하도록 크기가 조정됩니다. v5부터 배지에는 더 이상 링크에 대한 포커스 또는 호버 스타일이 없습니다.

제목

예시 제목새로운

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

버튼

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

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

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

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

포지셔닝

유틸리티를 사용하여 수정하고 .badge링크나 버튼의 모서리에 배치합니다.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

.badge보다 일반적인 지표에 대한 카운트 없이 클래스를 몇 가지 더 많은 유틸리티로 대체할 수도 있습니다 .

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

배경색

백그라운드 유틸리티 클래스를 사용하여 배지 모양을 빠르게 변경하십시오. 부트스트랩의 기본값을 사용할 때 적절한 스타일 지정을 위해 .bg-light텍스트 색상 유틸리티가 필요할 수 있습니다. .text-dark백그라운드 유틸리티는 background-color.

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

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

보조 기술에 의미 전달

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

알약 배지

.rounded-pill더 큰 로 배지를 더 둥글게 만들 려면 유틸리티 클래스를 사용하십시오 border-radius.

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

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

사스

변수

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;