[bootstrap] 부트스트랩 – 버튼 – 레이블(Lable)과 배지(Badge)

글자나 숫자를 하이라이트하기 위해 사용하며 글자는 레이블, 숫자는 배지를 사용합니다.

레이블은 span 태그에 .lable 선택자와 색상 변경을 위한 선택자를 사용합니다.

<span class=”label label-default“>Default</span>
<span class=”label label-primary“>Primary</span>
<span class=”label label-success“>Success</span>
<span class=”label label-info“>Info</span>
<span class=”label label-warning“>Warning</span>
<span class=”label label-danger“>Danger</span>

 

배지는 선택자가 없으며, 버튼에 배지를 추가해 사용하면 버튼의 색상에 따라 배지의 배경색이 바뀝니다. 이것은 필(Pills)에도 적용됩니다. 배지를 필에 사용할 경우 선택된 필이 하이라이트 돼서 버튼 형태로 되면 배지의 배경 색도 흰색으로 바뀝니다.

 <a href=”#”>Inbox <span class=”badge“>42</span></a>

<button class=”btn btn-primary” type=”button“>
Messages <span class=”badge badge-primary“>4</span>
</button>

 

숫자가 없을 경우, 예를 들어 읽을 메시지가 없으면 이 요소에 :empty 선택자를 사용하므로 IE8에서는 제대로 동작하지 않습니다.