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


Alerts

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

Examples

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

유틸리티 클래스를 사용하여 링크의 색상을 지정할 수 있습니다.
<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 엘레먼트를 추가할 수 있습니다.
<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 클래스를 사용할 수 있습니다.

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

이벤트

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


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

댓글

주간 인기글

카드뉴스 마케팅 팁

[ubuntu] 신규 계정에 sudo 권한 추가하기

[정보] 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다

[Spring Boot] JPA + Pageable 을 이용한 페이징 처리

[네이버클라우드] 서버 인스턴스 생성하기