jquery Bootstrap吐司未显示

ndh0cuux 于 2023-08-04 发布在 jQuery

关注(0)|答案(4)|浏览(157)

我正在开发一个网站在HTML中使用bootstrap和JavaScript。我正在尝试使用bootstrap网站上的以下代码添加吐司：

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

字符串
但是吐司并不像图像中所示的那样显示。它只是在导航和转盘之间留下一个间隙。

我已经从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)

型
但还是什么都没发生。希望有人能帮帮我：）

jquery

来源：https://stackoverflow.com/questions/56503954/bootstrap-toast-does-not-show-up

4条答案

按热度按时间

trnvg8h31#

你需要把有效的选项。i：e show, hide or a callback function。参见-https://getbootstrap.com/docs/4.2/components/toasts/。

$('.toast').toast('show');

个字符
如果不想自动关闭吐司，请添加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>

的字符串

赞(0）回复(0）举报 2023-08-04

vwhgwdsa2#

<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（'show'）;”文件准备好后。

<script>
    $(document).ready(function() {
        $(".toast").toast('show');
    });
</script>

型

赞(0）回复(0）举报 2023-08-04

qgzx9mmu3#

首先，你需要把吐司固定在顶部或底部，这取决于你想要它的位置。

<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）回复(0）举报 2023-08-04

i1icjdpr4#

我尝试了这个解决方案，但我得到了一个JS错误“Uncaught ReferenceError：bootstrap is not defined”，这似乎是为了阻止显示烤面包机。
我看到的唯一区别是，我正在使用bootstrap 5，而且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-bootstrap 5应用程序，其他一切似乎都很好。

赞(0）回复(0）举报 2023-08-04

我来回答

jquery Bootstrap吐司未显示

4条答案

相关问题

热门标签

最新问答