Bootstrap toast не отображается
Я разрабатываю веб-сайт в HTML, используя загрузку и javascript. Я пытаюсь добавить тост, используя следующий код с сайта начальной загрузки:
<div class = "toast" role = "alert" aria-live = "assertive" aria-atomic = "true">
<div class = "toast-header">
<img src = "..." class = "rounded mr-2" alt = "...">
<strong class = "mr-auto">Bootstrap</strong>
<small class = "text-muted">11 mins ago</small>
<button type = "button" class = "ml-2 mb-1 close" data-dismiss = "toast" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "toast-body">
Hello, world! This is a toast message.
</div>
</div>Но тост не отображается, как показано на изображении. Он просто оставляет зазор между навигацией и каруселью.
Я импортировал все эти скрипты с сайта начальной загрузки:
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>
И поместил следующее в мой документ javascript:
$('.toast').toast(option)Но все равно ничего не происходит. Я надеюсь, что кто-то может мне помочь :)
Я не уверен, что прочитал, чтобы поместить это в свой javascript. Это с сайта начальной загрузки: getbootstrap.com/docs/4.3/components/toasts, если вы перейдете к использованию.
См. - getbootstrap.com/docs/4.2/components/toasts.
к сожалению, я не уверен, что это значит
Вы можете проверить на примере, как они использовали toast, и на основе вашей функциональности вы можете передать valid option. Оператор $().toast(options) из getbootstrap.com/docs/4.2/components/toasts является синтаксисом.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно поставить допустимый вариант. я: е show, hide or a callback function. См. - https://getbootstrap.com/docs/4.2/components/toasts/.
$('.toast').toast('show');<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class = "toast" role = "alert" aria-live = "assertive" aria-atomic = "true">
<div class = "toast-header">
<img height = "200px" width = "200px" src = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" class = "rounded mr-2" alt = "...">
<strong class = "mr-auto">Bootstrap</strong>
<small class = "text-muted">11 mins ago</small>
<button type = "button" class = "ml-2 mb-1 close" data-dismiss = "toast" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "toast-body">
Hello, world! This is a toast message.
</div>
</div>Если вы не хотите автоматически закрывать тост, добавьте data-autohide = "false".
$('.toast').toast('show')<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class = "toast" data-autohide = "false">
<div class = "toast-header">
<svg class = " rounded mr-2" width = "20" height = "20" xmlns = "http://www.w3.org/2000/svg" preserveAspectRatio = "xMidYMid slice" focusable = "false" role = "img">
<rect fill = "#007aff" width = "100%" height = "100%" /></svg>
<strong class = "mr-auto">Bootstrap</strong>
<small class = "text-muted">11 mins ago</small>
<button type = "button" class = "ml-2 mb-1 close" data-dismiss = "toast" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "toast-body">
Hello, world! This is a toast message.
</div>
</div>К сожалению, это не привело к появлению всплывающего уведомления, но увеличило зазор в верхней части страницы.
@AlexHawking — проверьте свою консоль на наличие ошибок, а также просмотрите раздел gap с помощью инструментов разработчика.
@randomSould - извините, но я все еще изучаю кое-что в этом роде, не могли бы вы пояснить на языке для начинающих, извините
Подождите, в моей консоли ошибка: Uncaught ReferenceError: $ не определено в scripts.js:1
Это означает, что вы получаете доступ к jquery code до загрузки файла. Вместо того, чтобы размещать код jQuery в разделе заголовка, поместите все исходные файлы вашего скрипта непосредственно перед концом закрывающего тега </body>, а также обязательно сначала поместите файл jquery.min.js, а затем файл начальной загрузки js или любой другой.
Я сделал это, и ошибок нет, но теперь появляется тост и перемещает весь элемент, прежде чем сразу появиться. Я думал, что он должен появляться над элементами и исчезать при нажатии кнопки?
@AlexHawking - Отлично! :) Похоже, вам нужен popup или modal, который не влияет на вашу существующую структуру html и открывается в отдельном окне - getbootstrap.com/docs/4.0/components/modal. Я не очень разбираюсь в toasters, но вы можете проверить разные примеры.
Давайте продолжить обсуждение в чате.
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class = "toast" data-autohide = "false">
<div class = "toast-header">
<svg class = " rounded mr-2" width = "20" height = "20" xmlns = "http://www.w3.org/2000/svg" preserveAspectRatio = "xMidYMid slice" focusable = "false" role = "img">
<rect fill = "#007aff" width = "100%" height = "100%" /></svg>
<strong class = "mr-auto">Bootstrap</strong>
<small class = "text-muted">11 mins ago</small>
<button type = "button" class = "ml-2 mb-1 close" data-dismiss = "toast" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "toast-body">
Hello, world! This is a toast message.
</div>
</div>
Вам нужно запустить " $(".toast").toast('show'); ", когда документ будет готов.
<script>
$(document).ready(function() {
$(".toast").toast('show');
});
</script>
что такое
option?