Bootstrap Glyphicons and Badges
Glyphicons
Bootstrap 는 Glyphicons Halflings 세트로부터 200개의 상형아이콘(글리피콘:glyphicons) 을 제공한다..
Glyphicons 은 text, buttons, toolbars, navigation, forms, 등에 사용될 수 있다.
글리피콘(glyphicons)의 몇 가지 예:
Envelope glyphicon:
Print glyphicon:
Search glyphicon:
Download glyphicon:
Glyphicon Syntax
글리피콘(glyphicon)은 다음과 같은 구분으로 삽입된다.:
<span class="glyphicon glyphicon-name"></span>
위의 구문의 name 부분은 글리피콘(glyphicon)의 적절한 이름으로 대체되어야 합니다.
Glyphicon Example
다음의 예는 글리피콘(glyphicons) 사용의 다양한 경우를 보여줍니다:
Example
<p>Envelope
icon: <span
class="glyphicon
glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a
href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button
type="button"
class="btn
btn-default">
<span
class="glyphicon
glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button
type="button"
class="btn
btn-info">
<span
class="glyphicon
glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a
href="#"
class="btn
btn-success btn-lg">
<span
class="glyphicon
glyphicon-print"></span>
Print
</a>
</p>
Try it Yourself »Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »
Badges
배지(Badge)는 링크와 관련된 항목이 얼마나 많은 지를 나타내는 수치 표시자(numerical indicator) 입니다.:
News 5Comments 10
Updates 2
The numbers (5, 10, and 2) are the badges.
배지(badges)를 생생하는데는 <span> 요소 안에 .badge
클래스를 사용합니다. :
Example
<a href="#">News
<span
class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
Try it Yourself »배지(Badges)는 버튼과 같은 다른 요소 안에서도 사용이 사능하다. :
다음 예는 버튼에 배지를 추가하는 방법을 보여 준다.:
Example
<button type="button" class="btn btn-primary">Primary
<span
class="badge">7</span></button>
Try it Yourself »Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
Complete Bootstrap Glyphicon Reference
For a complete reference of all glyphicons, go to our complete Bootstrap Glyphicon Reference.