경고
사용 가능하고 유연한 몇 가지 경고 메시지를 사용하여 일반적인 사용자 작업에 대한 상황별 피드백 메시지를 제공합니다.
경고는 텍스트 길이에 관계없이 사용할 수 있으며 선택 사항인 해제 버튼도 사용할 수 있습니다. 적절한 스타일 지정을 위해 8개의 필수 컨텍스트 클래스(예: .alert-success
) 중 하나를 사용하십시오. 인라인 해제의 경우 경고 jQuery 플러그인 을 사용합니다 .
<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-only
클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.
유틸리티 클래스를 사용하여 .alert-link
경고 내에서 일치하는 색상 링크를 신속하게 제공합니다.
<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>
경고에는 제목, 단락 및 구분선과 같은 추가 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">×</span>
</button>
</div>
JavaScript를 통해 경고 해제 활성화:
또는 위에서 설명한 대로 경고 내data
버튼의 속성을 사용하여 다음을 수행합니다.
경고를 닫으면 DOM에서 경고가 제거됩니다.
방법 | 설명 |
---|---|
$().alert() |
data-dismiss="alert" 속성 이 있는 하위 요소에 대한 클릭 이벤트를 수신 대기하도록 경고를 만듭니다 . (data-api의 자동초기화 사용시 필요하지 않습니다.) |
$().alert('close') |
DOM에서 경고를 제거하여 경고를 닫습니다. .fade 요소에 및 클래스가 있는 경우 .show 경고가 제거되기 전에 사라집니다. |
$().alert('dispose') |
요소의 경고를 파괴합니다. |
부트스트랩의 경고 플러그인은 경고 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.
이벤트 | 설명 |
---|---|
close.bs.alert |
close 이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 . |
closed.bs.alert |
이 이벤트는 경고가 닫힐 때 시작됩니다(CSS 전환이 완료될 때까지 기다림). |