부트스트랩 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

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기