버튼

다양한 크기, 상태 등을 지원하는 양식, 대화 상자 등의 작업에 Bootstrap의 사용자 정의 버튼 스타일을 사용하십시오.

이 페이지에서

예

부트스트랩에는 각각 고유한 의미 목적을 제공하는 미리 정의된 몇 가지 버튼 스타일이 포함되어 있으며 더 많은 제어를 위해 몇 가지 추가 기능이 추가되었습니다.

HTML

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

보조 기술에 의미 전달

색상을 사용하여 의미를 추가하는 것은 시각적 표시만 제공하며 스크린 리더와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시되는 정보가 콘텐츠 자체(예: 보이는 텍스트)에서 명확하거나 .visually-hidden클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

텍스트 줄 바꿈 비활성화

버튼 텍스트를 줄바꿈하지 않으려면 버튼에 .text-nowrap클래스를 추가할 수 있습니다. Sass에서는 $btn-white-space: nowrap각 버튼에 대한 텍스트 줄 바꿈을 비활성화하도록 설정할 수 있습니다.

버튼 태그

.btn클래스는 요소와 함께 사용하도록 설계 되었습니다 <button>. <a>그러나 이러한 클래스를 또는 요소 에서도 사용할 수 있습니다 <input>(일부 브라우저에서는 약간 다른 렌더링을 적용할 수 있음).

페이지 내 기능(예: 콘텐츠 축소)을 실행하는 데 사용되는 요소 에 버튼 클래스를 <a>사용할 때 현재 페이지 내의 새 페이지 또는 섹션에 연결하는 대신 이러한 링크를 제공하여 다음 role="button"과 같은 보조 기술에 목적을 적절하게 전달 해야 합니다. 스크린 리더.

링크

HTML

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

개요 버튼

버튼이 필요하지만 그들이 가져온 무거운 배경색은 필요하지 않습니까? .btn-outline-*기본 수정자 클래스 를 모든 버튼의 모든 배경 이미지와 색상을 제거 하는 것으로 교체하십시오 .

HTML

<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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

일부 버튼 스타일은 상대적으로 밝은 전경색을 사용하며 충분한 대비를 위해 어두운 배경에서만 사용해야 합니다.

크기

더 크거나 작은 버튼이 마음에 드시나요? 추가 크기의 경우 또는를 .btn-lg추가 하십시오..btn-sm

HTML

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

HTML

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

CSS 변수를 사용하여 사용자 정의 크기 조정을 할 수도 있습니다.

HTML

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

비활성화 상태

모든 요소 에 disabledboolean 속성을 추가하여 버튼이 비활성화된 것처럼 보이게 합니다 . <button>비활성화된 버튼이 pointer-events: none적용되어 호버 및 활성 상태가 트리거되지 않습니다.

HTML

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

요소 를 사용하는 비활성화된 버튼 <a>은 약간 다르게 작동합니다.

<a>disableds는 속성을 지원하지 않으므로 .disabled시각적으로 비활성화된 것처럼 보이도록 클래스를 추가해야 합니다.
pointer-events모든 앵커 버튼 을 비활성화하기 위해 일부 미래 친화적 스타일이 포함되어 있습니다 .
비활성화된 버튼을 사용 하는 경우 보조 기술에 대한 요소의 상태를 나타내는 속성 <a>이 포함되어야 합니다 .aria-disabled="true"
를 사용하는 비활성화된 버튼 에는 속성 이 포함 <a> 되지 않아야 합니다.href

기본 링크 링크

HTML

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

링크 기능 주의 사항

href비활성화된 링크에 속성 을 유지해야 하는 경우를 다루기 위해 .disabled클래스는 s pointer-events: none의 링크 기능을 비활성화하려고 하는 데 사용합니다 <a>. 이 CSS 속성은 아직 HTML에 대해 표준화되지 않았지만 모든 최신 브라우저에서 지원합니다. 또한 를 지원하는 브라우저에서도 pointer-events: none키보드 탐색은 영향을 받지 않습니다. 즉, 시력이 좋은 키보드 사용자와 보조 기술 사용자는 여전히 이러한 링크를 활성화할 수 있습니다. 따라서 안전을 위해 에 추가하여 이러한 링크에 속성을 aria-disabled="true"포함하여 tabindex="-1"키보드 포커스를 받지 않도록 하고 사용자 정의 JavaScript를 사용하여 해당 기능을 완전히 비활성화하십시오.

기본 링크 링크

HTML

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

차단 버튼

디스플레이 및 간격 유틸리티를 혼합하여 Bootstrap 4와 같은 전폭 "블록 버튼"의 반응형 스택을 만듭니다. 버튼 특정 클래스 대신 유틸리티를 사용하여 간격, 정렬 및 반응 동작을 훨씬 더 잘 제어할 수 있습니다.

HTML

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

여기서 우리는 클래스를 대체 하여 유틸리티 를 무효화하는 md중단점 까지 수직으로 쌓인 버튼으로 시작하여 반응형 변형을 만듭니다 . 브라우저의 크기를 조정하여 변경 사항을 확인하십시오..d-md-block.d-gridgap-2

HTML

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

그리드 열 너비 클래스를 사용하여 블록 버튼의 너비를 조정할 수 있습니다. 예를 들어 반각 "블록 버튼"의 경우 .col-6. 를 사용하여 수평으로 가운데에 놓습니다 .mx-auto.

HTML

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

수평일 때 버튼의 정렬을 조정하기 위해 추가 유틸리티를 사용할 수 있습니다. 여기에서는 이전의 반응형 예제를 사용하고 버튼이 더 이상 쌓이지 않을 때 버튼을 오른쪽 정렬하기 위해 버튼에 일부 플렉스 유틸리티와 여백 유틸리티를 추가했습니다.

HTML

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

버튼 플러그인

버튼 플러그인을 사용하면 간단한 켜기/끄기 토글 버튼을 만들 수 있습니다.

시각적으로 이 토글 버튼은 체크박스 토글 버튼 과 동일합니다 . 그러나 보조 기술에 의해 다르게 전달됩니다. 확인란 토글은 화면 판독기에 의해 "선택됨"/"선택되지 않음"(외양에도 불구하고 기본적으로 여전히 확인란이기 때문에)으로 발표되는 반면 이러한 토글 버튼은 다음과 같이 발표됩니다. "버튼"/"버튼 누름". 이 두 가지 접근 방식 중 선택은 생성하는 토글 유형과 토글이 확인란으로 발표될 때 또는 실제 버튼으로 발표될 때 사용자에게 의미가 있는지 여부에 따라 다릅니다.

상태 전환

data-bs-toggle="button"버튼의 active상태 를 토글하려면 추가 합니다. .active버튼을 미리 토글하는 경우 클래스 를 수동으로 추가하고 aria-pressed="true"보조 기술에 적절하게 전달되도록 해야 합니다.

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

링크 전환 활성 토글 링크 비활성화된 토글 링크

HTML

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

행동 양식

버튼 생성자를 사용하여 버튼 인스턴스를 만들 수 있습니다. 예를 들면 다음과 같습니다.

const bsButton = new bootstrap.Button('#myButton')

방법	설명
`dispose`	요소의 버튼을 파괴합니다. (DOM 요소에 저장된 데이터 제거)
`getInstance`	DOM 요소에 연결된 버튼 인스턴스를 가져올 수 있는 정적 메서드는 다음과 같이 사용할 수 있습니다 `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	DOM 요소에 연결된 버튼 인스턴스를 반환하거나 초기화되지 않은 경우 새로 생성하는 정적 메서드입니다. 다음과 같이 사용할 수 있습니다 `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	푸시 상태를 전환합니다. 버튼에 활성화된 모양을 제공합니다.

예를 들어 모든 버튼을 전환하려면

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

변수

v5.2.0에 추가됨

Bootstrap의 진화하는 CSS 변수 접근 방식의 일부로 버튼은 이제 .btn향상된 실시간 사용자 정의를 위해 로컬 CSS 변수를 사용합니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 사용자 정의도 계속 지원됩니다.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

각 .btn-*수정자 클래스는 적절한 CSS 변수를 업데이트하여 , 및 믹스 button-variant()인 을 사용하여 추가 CSS 규칙을 최소화 합니다.button-outline-variant()button-size()

.btn-*다음 은 Bootstrap의 CSS 변수를 자체 CSS와 Sass 변수를 혼합하여 재할당하여 문서 고유의 버튼에 대해 수행하는 것처럼 사용자 정의 수정자 클래스를 빌드하는 예입니다 .

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Sass 변수

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Sass 믹스인

버튼에는 세 가지 믹스인이 있습니다. 버튼 및 버튼 아웃라인 변형 믹스인(둘 모두 에 기반 $theme-colors)과 버튼 크기 믹스인입니다.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Sass 루프

버튼 변형(일반 및 아웃라인 버튼용)은 맵과 함께 해당 믹스인을 사용하여 $theme-colors에서 수정자 클래스를 생성합니다 scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}