부트스트랩 버튼

부트스트랩으로 버튼을 꾸미는 방법

기본 버튼과 부트스트랩 버튼의 차이는 class="btn btn-default" 과 같이 부트스트랩에서 제공하는 class 속성을 추가해주는 것이다.

<div>
    <button type="button">기본</button>
    <button type="button" class="btn btn-default">기본</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">성공</button>
    <button type="button" class="btn btn-info">정보</button>
    <button type="button" class="btn btn-warning">경고</button>
    <button type="button" class="btn btn-danger">위험</button>
</div>
<div>
    <button type="button">기본</button>
    <button type="button" class="btn btn-default btn-sm">기본</button>
    <button type="button" class="btn btn-primary btn-sm">Primary</button>
    <button type="button" class="btn btn-success btn-sm">성공</button>
    <button type="button" class="btn btn-info btn-sm">정보</button>
    <button type="button" class="btn btn-warning btn-sm">경고</button>
    <button type="button" class="btn btn-danger btn-sm">위험</button>
</div>
<div>
    <button type="button">기본</button>
    <button type="button" class="btn btn-default btn-xs">기본</button>
    <button type="button" class="btn btn-primary btn-xs">Primary</button>
    <button type="button" class="btn btn-success btn-xs">성공</button>
    <button type="button" class="btn btn-info btn-xs">정보</button>
    <button type="button" class="btn btn-warning btn-xs">경고</button>
    <button type="button" class="btn btn-danger btn-xs">위험</button>
</div>
<div>
    <button type="button">기본</button>
    <button type="button" class="btn btn-default btn-lg">기본</button>
    <button type="button" class="btn btn-primary btn-lg">Primary</button>
    <button type="button" class="btn btn-success btn-lg">성공</button>
    <button type="button" class="btn btn-info btn-lg">정보</button>
    <button type="button" class="btn btn-warning btn-lg">경고</button>
    <button type="button" class="btn btn-danger btn-lg">위험</button>
</div>