부트스트랩 4 배지

배지는 콘텐츠에 추가 정보를 추가하는 데 사용된다.

예제

<span> 요소 내에서 상황에 맞는 클래스(예: .badge) 와 함께 .badge-secondary 클래스를 사용하여 직사각형 배지를 만든다.
배지는 상위 요소(있는 경우)의 크기에 맞게 크기가 조정된다.

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

상황별 배지

배지 색상을 변경하려면 상황별 클래스(.badge-*)를 사용하자.

예제

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

알약 배지

.badge-pill 클래스를 사용하여 배지를 더욱 둥글게 만들자.

예제

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

요소 내부의 배지

버튼 안에 배지를 사용하자.

예제

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

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기