[basic] BS4 - 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 (버튼 회전 = 로딩 표시)

Button Background (버튼 배경색) 

 

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

 

결과보기

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

 

<a href="#" class="btn btn-info" role="button">Link Button</a> 

<button type="button" class="btn btn-info">Button</button>

<input type="button" class="btn btn-info" value="Input Button">

<input type="submit" class="btn btn-info" value="Submit Button">

 

결과보기

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

 

결과보기

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>

 

결과보기

Button Width (버튼 너비 = 버튼 가로길이)

 

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

 

---

[예제] 버튼높이 + 버튼너비

 

<h2>Block 기본 버튼</h2>

<button type="button" class="btn btn-primary btn-block">기본버튼</button>

<h2>Block 큰 버튼</h2>

<button type="button" class="btn btn-primary btn-lg btn-block">큰버튼</button>

<h2>Block 작은 버튼</h2>

<button type="button" class="btn btn-primary btn-sm btn-block">작은버튼 1</button>

 

결과보기 

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

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

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

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

 

---

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

 

active 클래스 활용.

 

---

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

 

<button> 태그
disabled 속성 지원하므로, disabled 속성 이용.

주의: disabled 클래스 이용 X

 

<a> 태그
disabled 속성 지원 안 하므로, disabled 클래스 이용.

주의: disabled 속성 이용 X

 

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>

 

결과보기

더 자세히 보기