댓글 목록

부트스트랩4 배지(Badges)

페이지 정보

작성자 운영자 작성일 18-03-24 14:03 조회 1,752 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

1c2f02a52d95d3ecfdc6a4d20be85dfa_1521866764_8832.png
배지는 컨텐츠에 추가 정보를 제공하는데 사용됩니다. 직사격형 모양의 배지를 만들려면 <span>요소에 .badge클래스와 문맥에 맞는 클래스(예: .badge-info)를 함께 사용하면 됩니다.

배지는 부모 요소가 있는 경우, 부모 요소의 크기와 일치하도록 배율이 자동 조정됩니다.

<h1>실전홈페이지제작강좌 <span class="badge badge-info">인기</span></h1>
<h2>실전홈페이지제작강좌 <span class="badge badge-info">50</span></h2>
<h3>실전홈페이지제작강좌 <span class="badge badge-info">5011</span></h3>
<h4>실전홈페이지제작강좌 <span class="badge badge-info">추천</span></h4>
<h5>실전홈페이지제작강좌 <span class="badge badge-info">705</span></h5>
<h6>실전홈페이지제작강좌 <span class="badge badge-info">4300</span></h6>

문맥 배지 (Contextual)

1c2f02a52d95d3ecfdc6a4d20be85dfa_1521867074_7045.png
문백 클래스(.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>


Pill 배지 (모서리 라운드 형태)

1c2f02a52d95d3ecfdc6a4d20be85dfa_1521867327_5792.png
.badge-pill클래스를 추가하면 배지 모서리 부분을 둥글게 할 수 있습니다.

<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Succeess</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>


요소 내부에 배지 두기


1c2f02a52d95d3ecfdc6a4d20be85dfa_1521867635_0291.png
 

<button type="button" class="btn btn-primary">
    실전홈페이지제작강좌 <span class="badge badge-light">7000</span>
</button>
<button type="button" class="btn btn-success">
    CSS Grid강좌 <span class="badge badge-light">400</span>
</button>


댓글목록 0

등록된 댓글이 없습니다.