[부트스트랩] 컴포넌트 #1 - alert

Alerts

일반적인 사용자에 대한 메시지 표시를 위한 Alert 에 대한 사용법을 예제를 통하여 설명합니다.

Examples

Alerts 는 일정길이를 가진 텍스트와 버튼을 사용합니다. 올바른 스타일 지정을 위해 Alerts 상황에 맞게 클래스를 지정하면 됩니다.

This is a primary alert—check it out!

This is a secondary alert—check it out!

This is a success alert—check it out!

This is a danger alert—check it out!

This is a warning alert—check it out!

This is a info alert—check it out!

This is a light alert—check it out!

This is a dark alert—check it out!

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

링크 색상

유틸리티 클래스를 사용하여 링크의 색상을 지정할 수 있습니다.

This is a primary alert with an example link. Give it a click if you like.

This is a secondary alert with an example link. Give it a click if you like.

This is a success alert with an example link. Give it a click if you like.

This is a danger alert with an example link. Give it a click if you like.

This is a warning alert with an example link. Give it a click if you like.

This is a info alert with an example link. Give it a click if you like.

This is a light alert with an example link. Give it a click if you like.

This is a dark alert with an example link. Give it a click if you like.

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

추가 컨텐츠

Alerts 는 헤딩, 단락 및 구분선과 같은 추가 HTML 엘레먼트를 추가할 수 있습니다.

Well done!

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.

---

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

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

감추기

자바스크립트를 사용하여 Alerts 를 감추는게 가능합니다.

• alert 관련 플러그인을 로드하거나, 부트스트랩 자바스크립트를 포함시켜야 합니다.
• 감추기 버튼 및  .alert-dismissible 클래스를 추가하고  .close 버튼의 위치를 우측상단으로 지정합니다.
• On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
• 애니메이트 효과를 주기 위해 .fade 와 .show 클래스를 사용할 수 있습니다.

Holy guacamole! You should check in on some of those fields below.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>

JavaScript 사용법

트리거

$(".alert").alert()

Or with data attributes on a button within the alert, as demonstrated above:

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

메소드

Method	Description
$().alert()	Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)
$().alert('close')	Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed.

$(".alert").alert('close')

이벤트

Event	Description
close.bs.alert	This event fires immediately when the close instance method is called.
closed.bs.alert	This event is fired when the alert has been closed (will wait for CSS transitions to complete).

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})