[Bootstrap] Buttons

1. 기본 버튼 스타일

• `.btn` 클래스와 함께 다양한 색상 클래스를 조합해 사용

<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

---

2. 버튼이 적용 가능한 태그

• `<button>`, `<a>`, `<input>` 등 다양한 태그에서 사용 가능

<a href="#" class="btn btn-success">링크 버튼</a>
<input type="submit" class="btn btn-primary" value="제출 버튼">

---

3.  아웃라인 버튼

• 테두리만 있는 버튼 스타일: `btn-outline-*`

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

---

4. 버튼 크기 조절

클래스	크기
`btn-lg`	큰 버튼
(기본)	보통 크기
`btn-sm`	작은 버튼

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

---

5. 블록 레벨 버튼 (가로 폭 100%)

• 부모 요소에 `d-grid`를 적용하면 버튼이 가로 전체를 차지
• 여러 개일 경우, 버튼 간 간격은 `.gap-3` 등으로 조절 가능

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>

---

6. 활성/비활성 상태

• `.active`: 눌린 상태처럼 보임
• `disabled`: 비활성화 (버튼 작동 X)

<button class="btn btn-primary active">활성 상태</button>
<button class="btn btn-primary" disabled>비활성 상태</button>
<a href="#" class="btn btn-primary disabled">비활성 링크</a> <!-- 링크에는 disabled 속성 대신 클래스 사용 -->

---

7. 스피너 버튼 (로딩 표시)

• 버튼 안에 로딩 애니메이션을 추가
• `spinner-border`: 회전형 로딩
• `spinner-grow`: 점점 커지는 로딩
• `-sm`: 작은 크기

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading..
</button>