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>
输出:
版权声明:本页面内容旨在传播知识，为用户自行发布，若有侵权等问题请及时与本网联系，我们将第一时间处理。E-mail:284563525@qq.com
