Bootstrap4 弹出框学习笔记
概述
Bootstrap4 提供了丰富的组件，其中弹出框是一个非常常用的组件。通过弹出框可以使得网站更加易用和美观。
基本用法
htmlCopy Code<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击打开弹窗</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">标题</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<p>内容</p>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
实例展示
下面是一个实例，展示了一个按钮，点击按钮后会弹出模态框。
htmlCopy Code<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap4 弹出框学习笔记</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Bootstrap4 弹出框学习笔记</h1>
<p>点击下面的按钮，打开一个弹出框。</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击打开弹窗</button>
</div>
</div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">这是一个标题</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<p>这是一个内容。</p>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
结语
以上就是 Bootstrap4 弹出框学习笔记，希望对您有所帮助。