首页bootstrap弹窗

bootstrap弹窗

时间: 2023-08-06 14:08:49 浏览: 154

Bootstrap提供了一个弹窗组件，可以使用它来创建弹窗。以下是一个简单的例子： ```html <!DOCTYPE html> <html> <head> <title>Bootstrap Modal Example</title>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> </head> <body>  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> 打开弹窗 </button>  <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="myModalLabel">弹窗标题</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> 弹窗内容在这里... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存更改</button> </div> </div> </div> </div>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> ``` 在上面的例子中，我们使用了Bootstrap的`modal`类来创建了一个弹窗组件。我们给触发弹窗的按钮添加了`data-bs-toggle="modal"`和`data-bs-target="#myModal"`属性，来指定弹窗的目标。弹窗内容被包裹在`<div class="modal">`中，并且设置了一个唯一的ID作为`data-bs-target`属性的值。弹窗标题、内容和底部按钮可以根据需要进行修改。最后，我们需要在页面中引入Bootstrap的CSS和JS文件，以确保弹窗正常工作。

阅读全文