버튼

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

이 페이지에서

예

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

<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"과 같은 보조 기술에 목적을 적절하게 전달 해야 합니다. 스크린 리더.

링크

<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-*기본 수정자 클래스 를 모든 버튼의 모든 배경 이미지와 색상을 제거 하는 것으로 교체하십시오 .

<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

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

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

비활성화 상태

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

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

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

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

기본 링크 링크

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg 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를 사용하여 해당 기능을 완전히 비활성화하십시오.

기본 링크 링크

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

차단 버튼

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

<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

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

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

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

<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"보조 기술에 적절하게 전달되도록 해야 합니다.

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

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

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

행동 양식

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

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

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

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

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

사스

변수

$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:              $link-color;
$btn-link-hover-color:        $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%;

믹신

버튼에는 세 가지 믹스인이 있습니다. 버튼 및 버튼 아웃라인 변형 믹스인(둘 모두 에 기반 $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)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    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)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

루프

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

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

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