Bootstrap 4 Тост
Bootstrap 4 Тост
Компонент всплывающего уведомления похож на окно предупреждения, которое отображается только на пару секунд, когда что-то происходит (например, когда пользователь нажимает кнопку, отправляет форму и т. д.).
Как создать тост
Чтобы создать тост, используйте .toastкласс и добавьте в него a .toast-headerи a
.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» .
Полный справочник тостов Bootstrap
Полный справочник по всем параметрам, методам и событиям тостов можно найти в нашем справочнике тостов Bootstrap JS .