logo标签列表

Bootstrap提示框未显示

javascriptjqueryhtmlcssbootstrap-4
18

我正在使用bootstrap和javascript开发一个HTML网站。 我试图使用来自bootstrap网站的以下代码添加toast：

<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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

但是，如图所示，提示框没有出现。它只是在导航栏和轮播图之间留下了一些空白。toast img.

我已经从Bootstrap网站导入了所有这些脚本：

    <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)

但是，仍然没有发生任何事情。我希望有人能帮助我解决问题 :)

2
什么是“option”？ - random
我不确定我需要在我的JavaScript代码中添加这个。它来自Bootstrap网站：https://getbootstrap.com/docs/4.3/components/toasts/，如果您前往使用说明部分，则会看到该内容。 - Alex Hawking
1
请查看 - https://getbootstrap.com/docs/4.2/components/toasts/. - random
不幸的是，我不确定这意味着什么。 - Alex Hawking
你可以查看示例，了解他们如何使用“toast”，根据你的功能传递“有效选项”。来自 https://getbootstrap.com/docs/4.2/components/toasts/ 的语句 $().toast(options) 是一种语法。 - random
4个回答
28
你需要提供有效的选项，即展示（show）、隐藏（hide）或回调函数。参见 - 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">&times;</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">&times;</span>
                  </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

2
不幸的是，这并没有使烤面包出现，但确实使页面顶部的间隙变大了。 - Alex Hawking
1
@AlexHawking - 请检查您的控制台是否有任何错误，并使用开发人员工具检查 gap 部分。 - random
2
这意味着在文件加载之前访问了 jquery 代码。请将 jQuery 代码放置在头部区域之外，而是将所有脚本源文件放置在闭合的 </body> 标签之前。同时，请确保首先放置 jquery.min.js 文件，然后再放置您的 bootstrap js 文件或其他任何文件。 - random
我已经完成了这个任务，没有出现任何错误，但是 Toast 现在会在立即出现之前移动所有元素。我原以为它应该出现在元素的上方，并在单击按钮时消失？ - Alex Hawking
@AlexHawking - 太好了！ :) 看起来你需要一个 popup 或 modal，它不会影响你现有的 HTML 结构，并且会在单独的窗口中打开 - https://getbootstrap.com/docs/4.0/components/modal/。我对 toasters 没有太多的了解，但你可以查看不同的例子。 - random
显示剩余3条评论
5
<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">&times;</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>
2
首先，您需要将吐司固定在顶部或底部，具体取决于您想要的位置。
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast fixed-bottom m-5 ms-auto"
    data-bs-autohide="false">
    <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>
<script>
    window.onload = (event) => {
        let myAlert = document.querySelector('.toast');
        let bsAlert = new bootstrap.Toast(myAlert);
        
        setTimeout(function () {
            bsAlert.show();
        }, 5000);
    };
</script>
0
我尝试了这个解决方案，但是我遇到了一个 JavaScript 错误：“Uncaught ReferenceError: bootstrap is not defined”，这似乎导致弹出框无法显示。
我唯一看到的区别是，我正在使用 bootstrap5，而且似乎 bootstrap 不再需要 JQuery，所以它没有包含在基本模板中。
在渲染后的基本模板中，我看到的内容是：
<head>
...
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet">
...
</head>

<body>
...
<toaster html goes here>
....
<script crossorigin="anonymous" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body

我不知道为什么bootstrap未定义，因为JS明显已经链接了，但是我对bootstrap还很陌生，可能做错了其他事情。我正在使用django-bootstrap5应用程序，其他一切似乎都正常工作。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接