경고

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

이 페이지에서

예

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

간단한 기본 알림 - 확인하십시오!

간단한 보조 알림 - 확인하십시오!

간단한 성공 알림 - 확인하십시오!

간단한 위험 경고 - 확인하십시오!

간단한 경고 알림 - 확인하십시오!

간단한 정보 알림 - 확인하십시오!

간단한 조명 알림 - 확인하십시오!

간단한 암흑 경보 - 확인하십시오!

HTML

<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클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

라이브 예시

아래 버튼을 클릭하여 경고(시작할 인라인 스타일로 숨겨짐)를 표시한 다음 내장된 닫기 버튼으로 경고를 해제(및 삭제)합니다.

HTML

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

다음 JavaScript를 사용하여 실시간 알림 데모를 트리거합니다.

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

링크 색상

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

예제 링크가 있는 간단한 기본 알림입니다 . 원하는 경우 클릭하십시오.

예제 링크 가 있는 간단한 보조 알림 . 원하는 경우 클릭하십시오.

예제 링크 가 있는 간단한 성공 알림 . 원하는 경우 클릭하십시오.

예제 링크 가 있는 간단한 위험 경고 . 원하는 경우 클릭하십시오.

예제 링크 가 있는 간단한 경고 경고 . 원하는 경우 클릭하십시오.

예제 링크 가 있는 간단한 정보 알림 . 원하는 경우 클릭하십시오.

예제 링크 가 있는 간단한 조명 경고 . 원하는 경우 클릭하십시오.

예제 링크 가 있는 간단한 다크 경고 . 원하는 경우 클릭하십시오.

HTML

<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 요소도 포함될 수 있습니다.

잘했어요!

예, 이 중요한 경고 메시지를 성공적으로 읽었습니다. 이 예제 텍스트는 경고 내의 간격이 이러한 종류의 콘텐츠와 어떻게 작동하는지 볼 수 있도록 조금 더 실행됩니다.

필요할 때마다 마진 유틸리티를 사용하여 물건을 깔끔하고 깔끔하게 유지하십시오.

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 유틸리티 및 부트스트랩 아이콘 을 사용하여 아이콘이 있는 경고를 생성할 수 있습니다. 아이콘과 콘텐츠에 따라 더 많은 유틸리티나 사용자 정의 스타일을 추가할 수 있습니다.

아이콘이 있는 경고 예시

HTML

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" 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 스프라이트를 만드는 것을 고려하십시오.

아이콘이 있는 경고 예시

아이콘이 있는 예시 성공 알림

아이콘이 있는 경고 경고의 예

아이콘이 있는 위험 경고의 예

HTML

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" 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" 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" 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" 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" 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" 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" 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클래스를 추가해야 합니다.

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

성스러운 과카몰리! 아래 필드 중 일부를 확인해야 합니다.

HTML

<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"요소에 추가해야 합니다.

CSS

변수

v5.2.0에 추가됨

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

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Sass 변수

$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) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .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);
  }
}

자바스크립트 동작

초기화

요소를 경고로 초기화

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

경고를 해제하기 위한 유일한 목적으로 JS API를 통해 구성 요소를 수동으로 초기화할 필요는 없습니다. 를 사용 data-bs-dismiss="alert"하면 구성 요소가 자동으로 적절하게 초기화됩니다.

자세한 내용은 트리거 섹션을 참조하세요.

트리거

해고는 아래와 같이 경고 내data 버튼의 속성을 사용하여 수행할 수 있습니다.

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

또는 아래에 설명 된 대로 경고 외부의data-bs-target 버튼에서 :

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

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

행동 양식

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

const 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)`.

기본 사용법:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

이벤트

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

이벤트	설명
`close.bs.alert`	`close`인스턴스 메서드가 호출 되면 즉시 발생합니다 .
`closed.bs.alert`	경고가 닫히고 CSS 전환이 완료되면 시작됩니다.

const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // 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()
})