Bootstrap从入门到实战---警告提示框

最新推荐文章于 2024-07-31 06:07:14 发布

i see the future

最新推荐文章于 2024-07-31 06:07:14 发布

阅读量217

点赞数

分类专栏： HTML/CSS/JS/Bootstrap

本文链接：https://blog.csdn.net/m0_46629123/article/details/118558181

版权

HTML/CSS/JS/Bootstrap 专栏收录该内容

98 篇文章 8 订阅

订阅专栏

Bootstrap从入门到实战—警告提示框
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>

    </style>
</head>
<body>
    <div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
    <div class="alert alert-secondary" role="alert">A simple primary alert—check it out!</div>
    <div class="alert alert-success" role="alert">A simple primary alert—check it out!</div>
    <div class="alert alert-danger" role="alert">A simple primary alert—check it out!</div>
    <div class="alert alert-warning" role="alert">A simple primary alert—check it out!</div>
    <div class="alert alert-info" role="alert">A simple primary alert—check it out!</div>
    <div class="alert alert-light" role="alert">A simple primary alert—check it out!</div>
    <div class="alert alert-dark" role="alert">A simple primary alert—check it out!</div>


    <div class="alert alert-primary" role="alert">
        A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-primary" role="alert">
        A simple primary alert with <a href="#">an example link</a>. Give it a click if you like.
    </div>


    <div class="alert alert-sucess" role="alert">
        <h4 class="alert-heading">well done!</h4>
        <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
        <hr>
        <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </div>


    <div class="alert alert-sucess" role="alert">
        <h4 class="alert-heading">well done!</h4>
        <img src="images/1.jpg" alt="">
    </div>

    <div class="alert alert-warning alert-dimissible fade show" role="alert">
        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="alert alert-warning alert-dismissible fade show">
        你确定要关闭吗？
        <button class="close" data-dismiss="alert">&times;</button>
    </div>

    <div class="alert alert-warning one">
        你确定要关闭吗？
        <button class="close two">关闭我咯</button>
    </div>


    <div class="alert alert-warning one" id="play">
        你确定展示
        <button class="close two">确定展示吗？</button>
    </div>

    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

    <script>
        $(".two").click(function(){
            alert(typeof document.getElementById("purchases"))
        });
    </script>


</body>
</html>