Bootstrap 5 토스트

토스트(토스트)

토스트 컴포넌트는 경고 상자와 유사하며, 특정 일이 발생할 때(예: 사용자가 버튼을 클릭하거나 양식을 제출할 때) 몇 초 동안만 표시됩니다.

Toast를 어떻게 생성하나요

Toast를 생성하려면, 사용하세요 .toast 클래스를 사용하고, 그 안에 추가하세요 .toast-header 와 .toast-body。

주의:기본적으로, toast는 숨겨져 있습니다. 표시하려면, 사용하세요 .show 클래스. 그를 닫으려면, <button> 요소를 사용하고, 추가하세요 data-bs-dismiss="toast"：

<div class="toast show">
  <div class="toast-header">
    Toast 제목
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Toast 본문 내의 텍스트
  </div>
</div>

직접 시험해 보세요

Toast 열기

버튼을 클릭하여 Toast를 표시하려면, JavaScript를 통해 초기화해야 합니다: 지정된 요소를 선택하고 호출하세요 toast() 메서드.

버튼을 클릭하면 다음 코드가 문서에 있는 모든 toast를 표시됩니다:

예제

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  )
  toastList.forEach(toast => toast.show())
}
</script>

직접 시험해 보세요