Bootstrap 4 Toast
Bootstrap 4 Toast
O componente toast é como uma caixa de alerta que é mostrada apenas por alguns segundos quando algo acontece (ou seja, quando o usuário clica em um botão, envia um formulário etc.).
Como criar um brinde
Para criar um toast, use a .toastclasse e adicione a .toast-headere a
.toast-bodydentro dela:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Nota: Toasts devem ser inicializados com jQuery: selecione o elemento especificado e chame o toast()método.
O código a seguir mostrará todos os "brindes" no documento:
Exemplo
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Mostrar e ocultar um brinde
As torradas ficam ocultas por padrão. Use o data-autohide="false"
atributo para mostrá-lo por padrão. Para fechá-lo, use um elemento <button> e adicione data-dismiss="toast":
Exemplo
<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>
Observe as classes mr-auto, ml-2e ? mb-1Eles são usados para adicionar margens específicas. Você aprenderá mais sobre eles no Capítulo Utilitários do Bootstrap 4 .
Referência completa do Bootstrap Toast
Para obter uma referência completa de todas as opções, métodos e eventos de brinde, acesse nosso Bootstrap JS Toast Reference .