<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Bootstrap 4 弹出框</title>
</head>
<body>
<div class="container mt-4">
<h2>弹出框示例</h2>
<!-- 触发弹出框的元素 -->
<button type="button" class="btn btn-secondary" data-toggle="popover" title="弹出框标题" data-content="这是弹出框的内容。">
弹出框
</button>
</div>
<!-- Bootstrap JavaScript 和 jQuery（可选）-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 激活弹出框 -->
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
在这个例子中，我们使用了 data-toggle="popover"、title 和 data-content 属性来指定触发弹出框的元素，并设置弹出框的标题和内容。Bootstrap 4 弹出框可以在不同位置弹出，也可以通过其他属性进行定制。
请注意，我们引入了 Bootstrap 的 JavaScript 文件（jQuery、Popper.js 和 Bootstrap.js）来激活弹出框的功能。你可以根据实际需求添加更多的弹出框，并使用其他 Bootstrap 类来调整样式。这只是一个简单的示例，你可以根据需要进行更多的定制。
转载请注明出处：http://www.zyzy.cn/article/detail/5505/Bootstrap