배지

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

이 페이지에서

예

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

제목

예시 제목새로운

HTML

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

버튼

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

HTML

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

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

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

포지셔닝

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

HTML

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

HTML

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

배경색

v5.2.0에 추가됨

도우미background-color 와 대조되는 전경 color을 설정 합니다.text-bg-{color} . 이전에는 원하는 경우 계속 사용할 수 있는 스타일링을 위해 선택한 유틸리티 .text-{color}와 수동으로 페어링해야 했습니다..bg-{color}

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

HTML

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

보조 기술에 의미 전달

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

알약 배지

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

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

HTML

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

CSS

변수

v5.2.0에 추가됨

Bootstrap의 진화하는 CSS 변수 접근 방식의 일환으로 이제 배지 .badge는 향상된 실시간 사용자 지정을 위해 로컬 CSS 변수를 사용합니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 사용자 정의도 계속 지원됩니다.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass 변수

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