Source

경고

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

예

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

<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>
보조 기술에 의미 전달

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

유틸리티 클래스를 사용하여 .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>

해고

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

  • 경고 플러그인 또는 컴파일된 부트스트랩 JavaScript를 로드했는지 확인하십시오.
  • 소스에서 JavaScript를 빌드하는 경우util.js . 컴파일된 버전에는 이것을 포함합니다.
  • .alert-dismissible경고 오른쪽에 추가 패딩을 추가 하고 버튼을 배치하는 클래스를 해제 버튼과 추가 .close합니다.
  • 닫기 버튼 data-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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

자바스크립트 동작

트리거

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

$('.alert').alert()

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

행동 양식

방법 설명
$().alert() data-dismiss="alert"속성 이 있는 하위 요소에 대한 클릭 이벤트를 수신 대기하도록 경고를 만듭니다 . (data-api의 자동초기화 사용시 필요하지 않습니다.)
$().alert('close') DOM에서 경고를 제거하여 경고를 닫습니다. .fade요소에 및 클래스가 있는 경우 .show경고가 제거되기 전에 사라집니다.
$().alert('dispose') 요소의 경고를 파괴합니다. 
$(".alert").alert('close')

이벤트

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

이벤트 설명
close.bs.alert close이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
closed.bs.alert 이 이벤트는 경고가 닫힐 때 시작됩니다(CSS 전환이 완료될 때까지 기다림). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})