[CSS프레임워크 BootStrap][ch1] 버튼과 버튼 그룹

1. 부트스트랩 웹 페이지 진입 (https://getbootstrap.com/)

2. Docs > 왼쪽 메뉴 중 Components > Buttons

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

btn-group라는 클래스로 버튼을 묶어주면 버튼을 그룹화 시켜줌

Components > Button group 참고

<div class="btn-group">
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>
</div>

-outline-을 추가하면 버튼 외부 선이 생김을 확인 할 수 있다.

Components > Buttons > Outline buttons 참고

<div class="btn-group">
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>
      <button type="button" class="btn btn-link">Link</button>
      <button type="button" class="btn btn-outline-primary">Primary</button>
      <button type="button" class="btn btn-outline-success">Success</button>
</div>