GitHub에서 보기

배지

// Badges

배지에 대한 개요와 사용법 예시입니다.

예시

부모 요소의 크기에 일치하도록 상대적인 글꼴 크기 em을 사용하고 있습니다. v5 이후, 배지에는 더 이상 링크에 대한 포커스나 호버 스타일은 없습니다.

제목

Example heading New

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

배지를 사용하는 방법에 따라서, 스크린 리더나 동일한 지원기술을 사용하는 사용자에게 혼란을 줄 수 있음으로 주의하세요. 배지의 스타일은 그 목적을 시각적으로 보여주는 것이지만, 이러한 사용자들에게는 단지 배지의 내용만이 제시될 뿐입니다. 특정 상황에 따라 이 배지들은 문장의 끝, 링크 혹은 버튼에 임의로 추가된 단어나 숫자로 보일 수 있습니다.

문맥이 명확하지 않은 경우(“Notifications” 의 예처럼, “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>

배경색

Background 유틸리티 클래스를 사용해, 배지의 외형을 변경할 수 있습니다. Bootstrap의 기본의 .bg-light를 사용할 경우, 적절한 스타일링을 위해 .text-dark와 같은 텍스트색을 변경하는 유틸리티가 필요할 수 있으니 주의하세요. Background 유틸리티 클래스는 background-color 외에는 아무것도 설정하지 않기 때문입니다.

Primary Secondary Success Danger Warning Info Light Dark

<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 보다 더 동그란 배지를 만들 수 있습니다.

Primary Secondary Success Danger Warning Info Light Dark

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

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;