주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
in English

경고

사용 가능하고 유연한 몇 가지 경고 메시지를 사용하여 일반적인 사용자 작업에 대한 상황별 피드백 메시지를 제공합니다.

이 페이지에서

예

경고는 텍스트 길이에 관계없이 사용할 수 있으며 선택적인 닫기 버튼도 있습니다. 적절한 스타일 지정을 위해 8개의 필수 컨텍스트 클래스(예: .alert-success) 중 하나를 사용하십시오. 인라인 해제의 경우 경고 JavaScript 플러그인 을 사용합니다 .

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
보조 기술에 의미 전달

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

유틸리티 클래스를 사용하여 .alert-link경고 내에서 일치하는 색상 링크를 신속하게 제공합니다.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

추가 콘텐츠

경고에는 제목, 단락 및 구분선과 같은 추가 HTML 요소도 포함될 수 있습니다.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

아이콘

마찬가지로 flexbox 유틸리티 및 부트스트랩 아이콘 을 사용하여 아이콘이 있는 경고를 생성할 수 있습니다. 아이콘과 콘텐츠에 따라 더 많은 유틸리티나 사용자 정의 스타일을 추가할 수 있습니다.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

알림에 둘 이상의 아이콘이 필요하십니까? 동일한 아이콘을 반복적으로 쉽게 참조할 수 있도록 더 많은 부트스트랩 아이콘을 사용하고 로컬 SVG 스프라이트를 만드는 것을 고려하십시오.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

해고

경고 JavaScript 플러그인을 사용하면 모든 경고를 인라인으로 해제할 수 있습니다. 방법은 다음과 같습니다.

  • 경고 플러그인 또는 컴파일된 부트스트랩 JavaScript를 로드했는지 확인하십시오.
  • 닫기 버튼과 경고 오른쪽에 추가 패딩을 추가하고 닫기 버튼 을 배치하는 클래스를 추가합니다..alert-dismissible
  • 닫기 버튼 data-bs-dismiss="alert"에서 JavaScript 기능을 트리거하는 속성을 추가합니다. <button>모든 장치에서 적절한 동작을 위해 요소를 함께 사용하십시오 .
  • 경고를 해제할 때 경고를 활성화하려면 .fade및 .show클래스를 추가해야 합니다.

라이브 데모를 통해 다음과 같이 작동하는 것을 볼 수 있습니다.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
경고가 해제되면 요소가 페이지 구조에서 완전히 제거됩니다. 키보드 사용자가 닫기 버튼을 사용하여 경고를 해제하면 포커스가 갑자기 사라지고 브라우저에 따라 페이지/문서의 시작 부분으로 재설정됩니다. 이러한 이유로 closed.bs.alert이벤트를 수신하고 프로그래밍 방식 focus()으로 페이지에서 가장 적절한 위치로 설정하는 JavaScript를 추가로 포함하는 것이 좋습니다. 일반적으로 포커스를 받지 않는 비대화형 요소로 포커스를 이동하려는 경우 tabindex="-1"요소에 추가해야 합니다.

사스

변수

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

변형 믹스인

$theme-colors경고에 대한 컨텍스트 수정자 클래스를 생성하기 위해 와 함께 사용됩니다 .

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

고리

alert-variant()믹스 인을 사용하여 수정자 클래스를 생성하는 루프입니다 .

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

자바스크립트 동작

트리거

JavaScript를 통해 경고 해제 활성화:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

또는 위에서 설명한 대로 경고 내data 버튼의 속성을 사용하여 다음을 수행합니다.

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

경고를 닫으면 DOM에서 경고가 제거됩니다.

행동 양식

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

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

이렇게 하면 data-bs-dismiss="alert"속성이 있는 하위 요소에 대한 클릭 이벤트에 대한 경고가 수신됩니다. (data-api의 자동초기화 사용시 필요하지 않습니다.)

방법 설명
close DOM에서 경고를 제거하여 경고를 닫습니다. .fade요소에 및 클래스가 있는 경우 .show경고가 제거되기 전에 사라집니다.
dispose 요소의 경고를 파괴합니다. (DOM 요소에 저장된 데이터 제거)
getInstance DOM 요소와 연결된 경고 인스턴스를 가져올 수 있는 정적 메서드는 다음과 같이 사용할 수 있습니다.bootstrap.Alert.getInstance(alert)
getOrCreateInstance DOM 요소와 연결된 경고 인스턴스를 반환하거나 초기화되지 않은 경우 새 인스턴스를 만드는 정적 메서드입니다. 다음과 같이 사용할 수 있습니다.bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

이벤트

부트스트랩의 경고 플러그인은 경고 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.

이벤트 설명
close.bs.alert close인스턴스 메서드가 호출 되면 즉시 발생합니다 .
closed.bs.alert 경고가 닫히고 CSS 전환이 완료되면 시작됩니다. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})