Bootstrap] 버튼 만들기

부트스트랩 버튼 만들기 

클래스에서 btn을 입력하면 부트스트랩 버튼을 불러온다.

 

 

부트스트랩 버튼 색지정 

부트스트랩 위 색깔 표를 보면 각 색마다 이름이 정해져 있다. 

btn-primary 클래스를 추가하면 이미 설정된 파란색이 나온다. 

 

<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> 링크 밑줄

 

 

원하는 색이 없을 때 사용자 색 지정 

1. 새로운 클래스(card-btn)를 하나 만들고 css에서 따로 설정해 준다. 

 

2. 그 전에 html head에서 css 링크가 bootstrap 링크보다 아래 위치해 있어야 css가 적용된다. 

 

3. css에서 원하는 색 지정한다. 

 

4. 결과물

결과물

마우스 올렸을 때 색 변경

 

 

 

보더로만 버튼 만들기 

클래스 "btn-outline-색이름" 추가하기 

결과물

 

 

 

 버튼 사이즈 

클래스에 btn-lg (큰사이즈), btn-sm(작은사이즈) 버튼 사이즈를 조절 할 수 있다. 

 

부트스트랩 버튼 바로가기 

https://getbootstrap.com/docs/5.0/components/buttons/

Buttons