[Bootstrap] Alerts / 경고

Alerts / 경고

 

소수의 사용 가능하고 유연한 경고 메시지와 함께 

일반적인 사용자 작업에 대한 상황 별 피드백 메시지를 제공합니다.

 

모든 길이의 텍스트와 선택적인 닫기 버튼에 대해 경고를 사용할 수 있습니다. 

 

적절한 스타일을 지정하려면 8 개의 필수 콘텍스트 클래스 중 하나를 사용하십시오 

(예 : .alert-success). 인라인 해제의 경우 경고 jQuery 플러그인을 사용하십시오.

 

alert 색상

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

보조 기술에 의미 전달
색상을 사용하여 의미를 추가하면 시각적 표시만 제공되며 

화면 판독기와 같은 보조 기술 사용자에게는 전달되지 않습니다. 

색상으로 표시된 정보가 콘텐츠 자체 

(예 : 보이는 텍스트)에서 분명하거나 .sr 전용 클래스로 

숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

 

Link Color

.alert-link 유틸리티 클래스를 사용하여 경보 내에서 일치하는 색상 링크를 빠르게 제공하십시오.

Link Color

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Additional content

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

Additional content

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

해제

알림 자바 스크립트 플러그인을 사용하면 모든 알림을 인라인으로 닫을 수 있습니다.

 

방법은 다음과 같습니다.

경고 플러그인 또는 컴파일된 부트 스트랩 자바 스크립트를 로드했는지 확인하세요.

소스에서 자바 스크립트를 빌드하는 경우 util.js가 필요합니다.

 

컴파일 된 버전에는 이것을 포함합니다.

닫기 버튼과 .alert-dismissible 클래스를 추가하여 경고 오른쪽에 추가 패딩을 추가하고

.close 버튼을 배치합니다.

닫기 버튼에서 JavaScript 기능을 트리거하는 data-dismiss = "alert"속성을 추가합니다.

 

모든 장치에서 올바른 동작을 위해

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