부트스트랩 JS 토스트
토스트 CSS 클래스
Toast 구성 요소는 어떤 일이 발생했을 때(즉, 사용자가 버튼을 클릭하거나 양식을 제출할 때 등) 몇 초 동안만 표시되는 경고 상자와 같습니다.
토스트에 대한 튜토리얼은 부트스트랩 토스트 튜토리얼 을 읽어보세요 .
| Class | Description | Example |
|---|---|---|
.toast |
Creates the toast | |
.toast-header |
Creates the toast header | |
.toast-body |
Creates the toast body |
JavaScript를 통해 활성화
토스트는 jQuery로 초기화해야 합니다. 지정된 요소를 선택하고 toast()메서드를 호출합니다.
예시
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
토스트 옵션
옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-animation="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the toast.
|
|
| autohide | boolean | true | Specifies whether to hide the toast by default | |
| delay | number | 500 | Specifies the number of milliseconds it will take to hide the toast once it is shown. |
토스트 방법
다음 표에는 사용 가능한 모든 토스트 방법이 나열되어 있습니다.
| Method | Description | Try it |
|---|---|---|
| .toast(options) | Activates the toast with an option. See options above for valid values | |
| .toast("show") | Shows the toast | |
| .toast("hide") | Hides the toast | |
| .toast("dispose") | Hides and destroys the toast |
건배 이벤트
다음 표에는 사용 가능한 모든 알림 이벤트가 나열되어 있습니다.
| Event | Description | Try it |
|---|---|---|
| show.bs.toast | Occurs when the toast is about to be shown | |
| shown.bs.toast | Occurs when the toast is fully shown (after CSS transitions have completed) | |
| hide.bs.toast | Occurs when the toast is about to be hidden | |
| hidden.bs.toast | Occurs when the toast is fully hidden (after CSS transitions have completed) |