Bootstrap 5

[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와 동일 (더 자세히 보기)


분류 제목
basic BS5 - HOME (BS소개)
basic BS5 - Start (BS시작) - BS5다운로드 / BS5CDN / BS5구문
basic BS5 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS5 - Grid (BS그리드)
basic BS5 - Text/Typography (BS글자/BS텍스트)
basic BS5 - Color (BS색깔/BS색상) - 글자색 / 배경색
basic BS5 - Table (BS테이블) - 테이블테두리 / 테이블배경색 / 반응형테이블
basic BS5 - Image (BS이미지) - 이미지모양 / 이미지정렬 / 반응형이미지
basic BS5 - Jumbotron (BS점보트론) - 지원 X
basic BS5 - Alert (BS경고 = BS얼럿 = BS경보)
basic BS5 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS5 - Button Group (BS버튼그룹)
basic BS5 - Badge (BS배지)
basic BS5 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS5 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS5 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS5 - List Group (BS리스트그룹)
basic BS5 - Card (BS카드)
basic BS5 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS5 - Collapse (BS접기 = BS컬랩스 = BS토글)
1/4
목록
 홈  PC버전 로그인 일본어
그누앞단언어 1
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱닷컴 PC버전 로그인