목차
Badge 소개
Badge Color (색깔)
Badge pill (알약배지 = 모서리가 둥근 배지)
badge 예제 - 연회색 배지
Badge 소개
모든 콘텐츠에 추가 정보 추가하는 데 사용.
(예) 새글표시, 새글개수표시
1. 요소 안 span 태그에 (.badge) 클래스 적용해 생성.
.badge {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
2. 부모요소 크기에 따라 크기가 자동조절됨.
<div class="container">
<h1>Homzzang.com <span class="badge badge-secondary ">New</span></h1>
<h2>Homzzang.com <span class="badge badge-secondary ">New</span></h2>
<h3>Homzzang.com <span class="badge badge-secondar y">New</span></h3>
<h4>Homzzang.com <span class="badge badge-secondary ">New</span></h4>
<h5>Homzzang.com <span class="badge badge-secondary ">New</span></h5>
<h6>Homzzang.com <span class="badge badge-secondary ">New</span></h6>
</div>
결과보기
Badge Color (색깔)
<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>
결과보기
.badge-pill {
padding-right: .6em;
padding-left: .6em;
border-radius: 10rem;
}
badge 예제 - 연회색 배지
<button type="button" class="btn btn-primary">
쪽지 <span class="badge badge-light">4</span>
</button>
결과보기
주소 복사
랜덤 이동