[basic] BS5 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화

1. Button Background (버튼 배경색)
2. .btn 클래스 사용 가능 요소 : <a> , <button> , <input>
3. Button Outline (버튼 외곽선)
4. Button Height (버튼 높이)
5. Button Width (버튼 너비) / 버튼간 상하 간격
6. Button Active / Disabled (버튼 활성화/비활성화)
7. Button Spin (버튼 회전 = 로딩 표시)

※ BS4와 거의 유사하나, 버튼 너비 및 상하 간격 처리 클래스가 새로 생김. 

Button Background (버튼 배경색) 

 

<div class="container">

  <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>      

</div>

 

결과보기

※ BS4와 동일

.btn 클래스 사용 가능 요소 : <a> , <button> , <input>

 

<a href="#" class="btn btn-success">A 태그</a>

 

<button type="button" class="btn btn-success">BUTTON 태그</button>

 

<input type="button" class="btn btn-success" value="button INPUT 태그">

<input type="submit" class="btn btn-success" value="submit INPUT 태그">

<input type="reset" class="btn btn-success" value="reset INPUT 태그">

결과보기

PS. A태그 href 속성에 # 넣는 이유: 링크할 페이지 없는데 404에러는 싫을 때 넣음.

※ BS4와 동일

Button Outline (버튼 외곽선)

 

<div class="container mt-3">

  <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>

</div>

 

결과보기

※ BS4와 동일

Button Height (버튼 높이)

 

<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>

결과보기

※ BS4와 동일

Button Width (버튼 너비) / 버튼간 상하 간격

[블럭 버튼 (= 한 줄 전체 너비를 차지하는 버튼)]

해당 요소에 .btn-block 클래스 추가 후, 부모 요소에 .d-grid 클래스 추가

 

<div class="d-grid">

  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

</div>

 

 

PS. .d-grid 클래스 정의

.d-grid {

  display: grid !important;

}

---

[블럭 버튼 간 상하 간격]

부모요소에 (.gap-0 ~ .gap-5) 클래스 추가.

 

<div class="container mt-3">

  <div class="d-grid gap-3">

    <button type="button" class="btn btn-primary btn-block">HTML</button>

    <button type="button" class="btn btn-primary btn-block">CSS</button>

    <button type="button" class="btn btn-primary btn-block">JS</button>

  </div>

</div>

 

결과보기

 

PS. .gap-0 ~ .gap-5 클래스 정의

.gap-0 {  gap: 0 !important; }

.gap-1 {  gap: 0.25rem !important; }

.gap-2 {  gap: 0.5rem !important; }

.gap-3 {  gap: 1rem !important; }

.gap-4 {  gap: 1.5rem !important; }

.gap-5 {  gap: 3rem !important; }

cf. BS5부터 (.d-grid) / (.gap-0 ~ .gap-5) 클래스 생김

Button Active / Disabled (버튼 활성화/비활성화)

<div class="container mt-3">

  <button type="button" class="btn btn-primary">기본 BUTTON</button>

  <button type="button" class="btn btn-primary active">active BUTTON</button>

  <button type="button" class="btn btn-primary" disabled>disabled BUTTON</button>

  <a href="#" class="btn btn-primary disabled">disabled A</a>

</div>

 

결과보기

---

[활성화 (= 버튼눌림효과)]

 

.active 클래스 활용.

 

---

[비활성화 (= 버튼클릭방지)]

 

<button> 태그

• disabled 속성 지원하므로, disabled 속성 이용.
• 주의: .disabled 클래스 이용 X

  

<a> 태그

• disabled 속성 지원 안 하므로, .disabled 클래스 이용.
• 주의: disabled 속성 이용 X

 

※ BS4와 동일

Button Spin (버튼 회전 = 로딩 표시)

[활성]

 

// 스피너 

<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>

 

결과보기

※ BS4와 동일 (더 자세히 보기)