in English

버튼

다양한 크기, 상태 등을 지원하는 양식, 대화 상자 등의 작업에 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>
보조 기술에 의미 전달

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

텍스트 줄 바꿈 비활성화

버튼 텍스트를 줄바꿈하지 않으려면 버튼에 .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>

를 추가하여 부모의 전체 너비에 걸쳐 있는 블록 수준 버튼을 만듭니다 .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

활성 상태

더 어두운 배경, 더 어두운 테두리 및 그림자가 활성화된 경우 삽입된 그림자와 함께 활성화되면 버튼이 눌러진 것처럼 보입니다. 의사 클래스를 사용하므로 s 에 클래스를 추가할 필요가 없습니다<button> . 그러나 프로그래밍 방식으로 상태를 복제해야 하는 경우 동일한 활성 모양을 강제로 적용할 수 있습니다 .active(및 속성 포함 ).aria-pressed=“true”

기본 링크 링크 
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

비활성화 상태

모든 요소 에 disabledboolean 속성을 추가하여 버튼이 비활성화된 것처럼 보이게 합니다 .<button>

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

버튼 플러그인

버튼으로 더 많은 작업을 수행하십시오. 버튼 상태를 제어하거나 도구 모음과 같은 더 많은 구성 요소에 대한 버튼 그룹을 만듭니다.

상태 전환

data-toggle="button"버튼의 active상태 를 토글하려면 추가 합니다. 버튼을 사전 토글하는 경우 .active클래스 및 .aria-pressed="true"<button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

체크박스와 라디오 버튼

부트스트랩의 .button스타일은 s와 같은 다른 요소에 적용하여 <label>체크박스 또는 라디오 스타일 버튼 토글을 제공할 수 있습니다. 수정된 버튼을 포함하는 에 추가 data-toggle="buttons"하여 .btn-groupJavaScript를 통해 토글 동작을 활성화하고 버튼 내의 s .btn-group-toggle스타일에 추가하십시오. 단일 입력 전원 버튼 또는 그 그룹을 만들 수 있습니다.<input>

이러한 버튼의 체크 상태는 버튼의 이벤트 를 통해서만 업데이트됩니다click . 다른 방법을 사용하여 입력을 업데이트하는 경우(예: <input type="reset">입력 속성을 수동으로 적용하거나 사용하여) 수동으로 checked토글해야 .active합니다 <label>.

미리 선택된 버튼을 사용하려면 수동으로 .active클래스를 입력의 <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

행동 양식

방법 설명
$().button('toggle') 푸시 상태를 전환합니다. 버튼에 활성화된 모양을 제공합니다.
$().button('dispose') 요소의 버튼을 파괴합니다.