Bootstrap 4 토스트

토스트 구성 요소는 어떤 일이 발생했을 때(예: 사용자가 버튼을 클릭하거나 양식을 제출할 때 등) 몇 초 동안만 표시되는 경고 상자와 같다.

토스트를 만드는 방법

토스트를 만들려면 .toast 클래스를 사용 하고 .toast 클래스 내부에 .toast-header 와 .toast-body를 추가한다.

예제

<div class="toast">
  <div class="toast-header">
    Toast Header
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

<script>
$(document).ready(function(){
  $('.toast').toast('show');
});
</script>

토스트 표시 및 숨기기

토스트는 기본적으로 숨겨져 있다.
data-autohide=”false” 속성을 사용하여 표시한다.
닫으려면 요소를 사용하고 data-dismiss=”toast” 속성을 추가한다.

예제

<div class="toast" data-autohide="false">
  <div class="toast-header">
    <strong class="mr-auto text-primary">Toast Header</strong>
    <small class="text-muted">5 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

기본 예시

예제 보기

참고

W3C School - Bootstrap – Bootstrap 4 Toast

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기