부트스트랩 4 토스트
부트스트랩 4 토스트
알림 구성 요소는 어떤 일이 발생했을 때(즉, 사용자가 버튼을 클릭하거나 양식을 제출할 때 등) 몇 초 동안만 표시되는 경고 상자와 같습니다.
토스트 헤더
5분 전
토스트 본문 내부의 일부 텍스트
토스트를 만드는 방법
토스트를 만들려면 클래스를 사용하고 클래스 내부에 and
.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>
참고: 토스트는 jQuery로 초기화해야 합니다. 지정된 요소를 선택하고 toast()메서드를 호출합니다.
다음 코드는 문서의 모든 "토스트"를 표시합니다.
예시
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
토스트 표시 및 숨기기
토스트는 기본적으로 숨겨져 있습니다. 속성을 사용하여 data-autohide="false"
기본적으로 표시합니다. 닫으려면 <button> 요소를 사용하고 다음을 추가 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>
mr-auto, ml-2및 mb-1클래스 를 확인 하시겠습니까 ? 특정 여백을 추가하는 데 사용됩니다. 이에 대한 자세한 내용은 Bootstrap 4 Utilities 장 에서 배우게 됩니다 .
전체 부트스트랩 토스트 참조
모든 토스트 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS Toast Reference 로 이동하십시오 .