Bootstrap 5关闭按钮

Bootstrap 5提供了一个新的组件，它是一个关闭按钮，可用于关闭模态和提醒等内容。它可以使用bootstrap.js或bootstrap.min.js包含在网页中。这个组件可以与模型、警报和弹出式窗口相结合。被禁用的关闭按钮有pointer-events: none;应用到，防止悬停和活动状态的触发。

示例:

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Close button
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        Close icon
        <button type="button" class="close"
            aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <br/>
        Close disabled icon
        <button type="button" class="close"
            aria-label="Close" disabled>
            <span aria-hidden="true">×</span>
        </button>
    </div>
</body>
</html>

输出:

Bootstrap 5关闭按钮