bootstrap实现一个toast右侧弹出提示框并消失效果代码-html代码-BFW代码库

bootstrap实现一个toast右侧弹出提示框并消失效果代码

代码语言：html

所属分类：弹出层

代码描述：bootstrap实现一个toast右侧弹出提示框并消失效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.5.2.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
            background-color: #fafafa;
        }
        .bs4ToastWrapper {
            position: fixed;
            z-index: 1;
            left: 75%;
            top: 2%;
            width: 300px;
        }

        .bs4Toasticonimage {
            height: 15px;
        }

        .bs4Toasticon {
            margin-right: 0.5rem;
        }
    </style>

</head>
<body>



    <div class="mt-5">
        <button onclick="toast();" class="btn btn-primary">Primary</button>
        <button onclick="dangerT();" class="btn btn-danger">Danger</button>
        <button onclick="warning();" class="btn btn-warning">Warning</button>
        <button onclick="buttontoast();" class="btn btn-info">With Buttons</button>
        <button onclick="icont();" class="btn btn-info">With FA Icon</button>
        <button onclick="imaget();" class="btn btn-info">With Image</button>

    </div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/popper-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.4.5.2.js"></script>
    <script>
        class bs4Toast {
            static error(title = '', content = '', options = {}) {
               .........完整代码请登录后点击上方下载按钮下载查看