1. Bootstrap 버튼

Bootstrap을 통해 손쉽게 버튼을 구현해봅시다. button 태그를 이용하거나 div 태그를 통해서도 버튼을 만들 수 있습니다.

출처: Bootstrap Buttons

1.1 활용 예제

<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>
<div class="btn btn-primary">ABC</div>
<div class="btn btn-outline-primary">DEF</div>

1.2 화면 출력

2. Bootstrap 버튼 그룹

버튼 그룹이라는 태그를 통해 버튼을 묶어주면 여러 버튼을 그룹화시켜서 화면에 출력해줄 수 있습니다.

출처: Bootstrap Button group

2.1 활용 예제

<div class="btn-group">
  <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>
  <div class="btn btn-primary">ABC</div>
  <div class="btn btn-outline-primary">DEF</div>
</div>

2.2 화면 출력

3. 그외 기능

버튼의 사이즈를 large, small과 같이.btn-lg, .btn-sm 태그를 이용해 크고 작은 버튼을 출력할 수 있습니다. 또한 disabled 속성만 추가해주면 버튼의 비활성화를 시킬 수 있습니다.