Bootstrap components 부트스트랩 컴포넌트 1탄 아이콘

1. Bootstrap components

 

 

Bootstrap (부트스트랩)에서  제공하는 기능을 이용하여 Button 을 사용하는 경우, 

아래와 같이 사용하게 된다.

 

<button type="button" class="btn btn-default" aria-label="Left Align">

이때, 버튼에 추가적인 기능을 넣을 수 있는데 대표적인 것이 GlyphsIcon (상형아이콘) 이다

 

다음과 같이 다양한 아이콘이 제공되는데, 이것을 버튼에도 넣을 수 있다.

 

 

 

 

아래와 같이 사용하면 된다.

 

<button type="button" class="btn btn-default" aria-label="Left Align">   
   <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> 
</button>  
<button type="button" class="btn btn-default btn-lg">   
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> 
  Star 
</button>

 

 

버튼의 크기는 다음과 같이 조절할 수 있다

 

 

<button class="btn btn-primary btn-lg">Large</button>
 <button class="btn btn-primary">Default</button>
 <button class="btn btn-primary btn-md">Medium</button> 
<button class="btn btn-primary btn-sm">Small</button> 
<button class="btn btn-primary btn-xs">XSmall</button>