여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap - Bootstrap 4 버튼
Bootstrap – Bootstrap 4 버튼
12개월전 작성
12개월전 수정



부트스트랩 4 버튼

Bootstrap 4는 다양한 스타일의 버튼을 제공한다.

예제 1
<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>
기본 예시
예제 보기
예제 2
<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">
기본 예시
예제 보기

버튼 개요

부트스트랩 4는 8개의 윤곽선/테두리 버튼을 제공한다.

예제
<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>
기본 예시
예제 보기

버튼 크기

.btn-lg큰 버튼에는 클래스를 사용 하고 .btn-sm작은 버튼에는 클래스를 사용하자.

예제
<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>
기본 예시
예제 보기

블록 레벨 버튼

.btn-block상위 요소의 전체 너비에 걸쳐 있는 블록 수준 버튼을 생성하려면 클래스를 추가하자.

예제
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
기본 예시
예제 보기

활성/비활성화 버튼

버튼은 활성(눌린 것처럼 보임) 또는 비활성화(클릭할 수 없음) 상태로 설정할 수 있다.

.active 클래스는 버튼이 눌린 것처럼 보이게 하고 disabled 속성은 버튼을 클릭할 수 없게 만든다.
요소는 비활성화된 속성을 지원하지 않으므로 .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>

스피너 버튼

버튼에 “스피너”를 추가할 수도 있다.

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

기본 예시
예제 보기

참고

Mingg`s Diary
밍구
밍구
공부 목적 블로그